@moontra/moonui-pro 2.20.2 → 2.20.3

package/src/components/kanban/card-detail-modal.tsx

@@ -1,761 +0,0 @@
-"use client"
-
-import React, { useState, useEffect } from 'react'
-import { motion, AnimatePresence } from 'framer-motion'
-import { Dialog, DialogContent, DialogHeader, DialogTitle } from '../ui/dialog'
-import { Button } from '../ui/button'
-import { Input } from '../ui/input'
-import { Textarea } from '../ui/textarea'
-import { Label } from '../ui/label'
-import { MoonUIBadgePro as Badge } from '../ui/badge'
-import { MoonUIAvatarPro, MoonUIAvatarFallbackPro, MoonUIAvatarImagePro, AvatarGroup as MoonUIAvatarGroupPro } from '../ui/avatar'
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../ui/select'
-import { Popover, PopoverContent, PopoverTrigger } from '../ui/popover'
-import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem } from '../ui/command'
-import { Calendar as CalendarComponent } from '../ui/calendar'
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '../ui/tabs'
-import { ScrollArea } from '../ui/scroll-area'
-import { Progress } from '../ui/progress'
-import { Separator } from '../ui/separator'
-import { Checkbox } from '../ui/checkbox'
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from '../ui/dropdown-menu'
-import { 
-  X, 
-  Calendar, 
-  User, 
-  Tag, 
-  Paperclip, 
-  MessageCircle,
-  Clock,
-  Flag,
-  CheckSquare,
-  Plus,
-  MoreHorizontal,
-  Edit2,
-  Trash2,
-  Download,
-  Eye,
-  Link2,
-  Archive,
-  Copy,
-  Activity,
-  AlertCircle,
-  Check,
-  ChevronDown,
-  Upload,
-  FileText,
-  Image,
-  FileIcon,
-  Send,
-  Star,
-  StarOff
-} from 'lucide-react'
-import { format } from 'date-fns'
-import { cn } from '../../lib/utils'
-import type { KanbanCard, KanbanAssignee, KanbanLabel, KanbanActivity, KanbanChecklist } from './types'
-
-interface CardDetailModalProps {
-  card: KanbanCard
-  isOpen: boolean
-  onClose: () => void
-  onUpdate: (card: KanbanCard) => void
-  onDelete: (card: KanbanCard) => void
-  availableAssignees?: KanbanAssignee[]
-  availableLabels?: KanbanLabel[]
-  currentColumn?: string
-  availableColumns?: { id: string; title: string }[]
-}
-
-const PRIORITY_OPTIONS = [
-  { value: 'low', label: 'Low', icon: Flag, color: 'text-green-600' },
-  { value: 'medium', label: 'Medium', icon: Flag, color: 'text-yellow-600' },
-  { value: 'high', label: 'High', icon: Flag, color: 'text-orange-600' },
-  { value: 'urgent', label: 'Urgent', icon: AlertCircle, color: 'text-red-600' }
-]
-
-const formatFileSize = (bytes: number) => {
-  if (bytes === 0) return '0 Bytes'
-  const k = 1024
-  const sizes = ['Bytes', 'KB', 'MB', 'GB']
-  const i = Math.floor(Math.log(bytes) / Math.log(k))
-  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
-}
-
-const getInitials = (name: string) => {
-  return name.split(' ').map(n => n[0]).join('').toUpperCase()
-}
-
-export function CardDetailModal({
-  card: initialCard,
-  isOpen,
-  onClose,
-  onUpdate,
-  onDelete,
-  availableAssignees = [],
-  availableLabels = [],
-  currentColumn,
-  availableColumns = []
-}: CardDetailModalProps) {
-  const [card, setCard] = useState(initialCard)
-  const [isEditingTitle, setIsEditingTitle] = useState(false)
-  const [isEditingDescription, setIsEditingDescription] = useState(false)
-  const [newComment, setNewComment] = useState('')
-  const [newChecklistItem, setNewChecklistItem] = useState('')
-  const [selectedTab, setSelectedTab] = useState('overview')
-
-  useEffect(() => {
-    setCard(initialCard)
-  }, [initialCard])
-
-  const updateCard = (updates: Partial<KanbanCard>) => {
-    const updatedCard = { ...card, ...updates }
-    setCard(updatedCard)
-    onUpdate(updatedCard)
-  }
-
-  const addComment = () => {
-    if (!newComment.trim()) return
-
-    const newActivity: KanbanActivity = {
-      id: Date.now().toString(),
-      user: {
-        id: 'current-user',
-        name: 'Current User',
-        email: 'user@example.com'
-      },
-      action: 'commented',
-      timestamp: new Date(),
-      details: newComment
-    }
-
-    updateCard({
-      activities: [newActivity, ...(card.activities || [])],
-      comments: (card.comments || 0) + 1
-    })
-    setNewComment('')
-  }
-
-  const addChecklistItem = () => {
-    if (!newChecklistItem.trim()) return
-
-    const checklist = card.checklist || {
-      id: Date.now().toString(),
-      title: 'Checklist',
-      items: []
-    }
-
-    checklist.items.push({
-      id: Date.now().toString(),
-      text: newChecklistItem,
-      completed: false
-    })
-
-    updateCard({ checklist })
-    setNewChecklistItem('')
-  }
-
-  const toggleChecklistItem = (itemId: string) => {
-    if (!card.checklist) return
-
-    const updatedChecklist = {
-      ...card.checklist,
-      items: card.checklist.items.map(item =>
-        item.id === itemId ? { ...item, completed: !item.completed } : item
-      )
-    }
-
-    updateCard({ checklist: updatedChecklist })
-  }
-
-  const deleteChecklistItem = (itemId: string) => {
-    if (!card.checklist) return
-
-    const updatedChecklist = {
-      ...card.checklist,
-      items: card.checklist.items.filter(item => item.id !== itemId)
-    }
-
-    updateCard({ checklist: updatedChecklist })
-  }
-
-  const completedChecklistItems = card.checklist?.items.filter(item => item.completed).length || 0
-  const totalChecklistItems = card.checklist?.items.length || 0
-  const checklistProgress = totalChecklistItems > 0 ? (completedChecklistItems / totalChecklistItems) * 100 : 0
-
-  const handleFileUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const files = e.target.files
-    if (!files) return
-
-    const newAttachments = Array.from(files).map(file => ({
-      id: Date.now().toString() + Math.random(),
-      name: file.name,
-      type: file.type,
-      url: URL.createObjectURL(file),
-      size: file.size
-    }))
-
-    updateCard({
-      attachments: [...(card.attachments || []), ...newAttachments]
-    })
-  }
-
-  const removeAttachment = (attachmentId: string) => {
-    updateCard({
-      attachments: card.attachments?.filter(a => a.id !== attachmentId)
-    })
-  }
-
-  return (
-    <Dialog open={isOpen} onOpenChange={onClose}>
-      <DialogContent className="max-w-4xl max-h-[90vh] overflow-hidden p-0">
-        {/* Header */}
-        <div className="p-6 pb-0">
-          <div className="flex items-start justify-between">
-            <div className="flex-1">
-              {isEditingTitle ? (
-                <Input
-                  value={card.title}
-                  onChange={(e) => updateCard({ title: e.target.value })}
-                  onBlur={() => setIsEditingTitle(false)}
-                  onKeyDown={(e) => {
-                    if (e.key === 'Enter') setIsEditingTitle(false)
-                    if (e.key === 'Escape') {
-                      setCard(initialCard)
-                      setIsEditingTitle(false)
-                    }
-                  }}
-                  className="text-xl font-semibold"
-                  autoFocus
-                />
-              ) : (
-                <h2 
-                  className="text-xl font-semibold cursor-pointer hover:bg-muted rounded px-2 -mx-2 py-1"
-                  onClick={() => setIsEditingTitle(true)}
-                >
-                  {card.title}
-                </h2>
-              )}
-              {currentColumn && (
-                <p className="text-sm text-muted-foreground mt-1">
-                  in {currentColumn}
-                </p>
-              )}
-            </div>
-          </div>
-        </div>
-
-        {/* Tabs */}
-        <Tabs value={selectedTab} onValueChange={setSelectedTab} className="flex-1">
-          <div className="px-6 pt-4">
-            <TabsList>
-              <TabsTrigger value="overview">Overview</TabsTrigger>
-              <TabsTrigger value="activity">
-                Activity
-                {card.activities && card.activities.length > 0 && (
-                  <Badge variant="secondary" className="ml-2">
-                    {card.activities.length}
-                  </Badge>
-                )}
-              </TabsTrigger>
-              <TabsTrigger value="comments">
-                Comments
-                {card.comments && card.comments > 0 && (
-                  <Badge variant="secondary" className="ml-2">
-                    {card.comments}
-                  </Badge>
-                )}
-              </TabsTrigger>
-            </TabsList>
-          </div>
-
-          <ScrollArea className="flex-1 max-h-[calc(90vh-200px)]">
-            <div className="p-6">
-              <TabsContent value="overview" className="mt-0">
-                <div className="space-y-6">
-                  {/* Description */}
-                  <div>
-                    <Label className="text-base font-semibold mb-2 block">Description</Label>
-                    {isEditingDescription ? (
-                      <div className="space-y-2">
-                        <Textarea
-                          value={card.description || ''}
-                          onChange={(e) => updateCard({ description: e.target.value })}
-                          placeholder="Add a description..."
-                          className="min-h-[100px]"
-                          autoFocus
-                        />
-                        <div className="flex gap-2">
-                          <Button
-                            size="sm"
-                            onClick={() => setIsEditingDescription(false)}
-                          >
-                            Save
-                          </Button>
-                          <Button
-                            size="sm"
-                            variant="ghost"
-                            onClick={() => {
-                              setCard(initialCard)
-                              setIsEditingDescription(false)
-                            }}
-                          >
-                            Cancel
-                          </Button>
-                        </div>
-                      </div>
-                    ) : (
-                      <div
-                        className="min-h-[50px] p-3 rounded-md border cursor-pointer hover:bg-muted/50"
-                        onClick={() => setIsEditingDescription(true)}
-                      >
-                        {card.description || (
-                          <span className="text-muted-foreground">Add a description...</span>
-                        )}
-                      </div>
-                    )}
-                  </div>
-
-                  {/* Details Grid */}
-                  <div className="grid grid-cols-2 gap-4">
-                    {/* Assignees */}
-                    <div>
-                      <Label className="text-sm font-medium mb-2 block">Assignees</Label>
-                      <Popover>
-                        <PopoverTrigger asChild>
-                          <Button variant="outline" className="w-full justify-start">
-                            {card.assignees && card.assignees.length > 0 ? (
-                              <div className="flex items-center gap-2">
-                                <MoonUIAvatarGroupPro max={3} size="xs">
-                                  {card.assignees.map((assignee) => (
-                                    <MoonUIAvatarPro key={assignee.id} className="h-5 w-5">
-                                      <MoonUIAvatarImagePro src={assignee.avatar} />
-                                      <MoonUIAvatarFallbackPro className="text-xs">
-                                        {getInitials(assignee.name)}
-                                      </MoonUIAvatarFallbackPro>
-                                    </MoonUIAvatarPro>
-                                  ))}
-                                </MoonUIAvatarGroupPro>
-                                <span className="text-sm">
-                                  {card.assignees.map(a => a.name).join(', ')}
-                                </span>
-                              </div>
-                            ) : (
-                              <span className="text-muted-foreground">Add assignee</span>
-                            )}
-                          </Button>
-                        </PopoverTrigger>
-                        <PopoverContent className="p-0" align="start">
-                          <Command>
-                            <CommandInput placeholder="Search assignees..." />
-                            <CommandEmpty>No assignees found.</CommandEmpty>
-                            <CommandGroup>
-                              {availableAssignees.map((assignee) => {
-                                const isSelected = card.assignees?.some(a => a.id === assignee.id)
-                                return (
-                                  <CommandItem
-                                    key={assignee.id}
-                                    onSelect={() => {
-                                      if (isSelected) {
-                                        updateCard({
-                                          assignees: card.assignees?.filter(a => a.id !== assignee.id)
-                                        })
-                                      } else {
-                                        updateCard({
-                                          assignees: [...(card.assignees || []), assignee]
-                                        })
-                                      }
-                                    }}
-                                  >
-                                    <Check
-                                      className={cn(
-                                        "mr-2 h-4 w-4",
-                                        isSelected ? "opacity-100" : "opacity-0"
-                                      )}
-                                    />
-                                    <MoonUIAvatarPro className="h-6 w-6 mr-2">
-                                      <MoonUIAvatarImagePro src={assignee.avatar} />
-                                      <MoonUIAvatarFallbackPro className="text-xs">
-                                        {getInitials(assignee.name)}
-                                      </MoonUIAvatarFallbackPro>
-                                    </MoonUIAvatarPro>
-                                    <span>{assignee.name}</span>
-                                  </CommandItem>
-                                )
-                              })}
-                            </CommandGroup>
-                          </Command>
-                        </PopoverContent>
-                      </Popover>
-                    </div>
-
-                    {/* Priority */}
-                    <div>
-                      <Label className="text-sm font-medium mb-2 block">Priority</Label>
-                      <Select value={card.priority || 'medium'} onValueChange={(value: any) => updateCard({ priority: value })}>
-                        <SelectTrigger>
-                          <SelectValue />
-                        </SelectTrigger>
-                        <SelectContent>
-                          {PRIORITY_OPTIONS.map((option) => (
-                            <SelectItem key={option.value} value={option.value}>
-                              <div className="flex items-center gap-2">
-                                <option.icon className={cn("h-4 w-4", option.color)} />
-                                <span>{option.label}</span>
-                              </div>
-                            </SelectItem>
-                          ))}
-                        </SelectContent>
-                      </Select>
-                    </div>
-
-                    {/* Due Date */}
-                    <div>
-                      <Label className="text-sm font-medium mb-2 block">Due Date</Label>
-                      <Popover>
-                        <PopoverTrigger asChild>
-                          <Button variant="outline" className="w-full justify-start">
-                            {card.dueDate ? (
-                              <>
-                                <Calendar className="mr-2 h-4 w-4" />
-                                {format(card.dueDate, 'PPP')}
-                              </>
-                            ) : (
-                              <span className="text-muted-foreground">Set due date</span>
-                            )}
-                          </Button>
-                        </PopoverTrigger>
-                        <PopoverContent className="w-auto p-0" align="start">
-                          <CalendarComponent
-                            mode="single"
-                            selected={card.dueDate}
-                            onSelect={(date) => {
-                              if (date instanceof Date) {
-                                updateCard({ dueDate: date })
-                              } else {
-                                updateCard({ dueDate: undefined })
-                              }
-                            }}
-                            initialFocus
-                          />
-                        </PopoverContent>
-                      </Popover>
-                    </div>
-
-                    {/* Labels */}
-                    <div>
-                      <Label className="text-sm font-medium mb-2 block">Labels</Label>
-                      <Popover>
-                        <PopoverTrigger asChild>
-                          <Button variant="outline" className="w-full justify-start">
-                            {card.labels && card.labels.length > 0 ? (
-                              <div className="flex flex-wrap gap-1">
-                                {card.labels.map((label) => (
-                                  <div
-                                    key={label.id}
-                                    className="px-2 py-0.5 rounded text-xs text-white"
-                                    style={{ backgroundColor: label.color }}
-                                  >
-                                    {label.name}
-                                  </div>
-                                ))}
-                              </div>
-                            ) : (
-                              <span className="text-muted-foreground">Add labels</span>
-                            )}
-                          </Button>
-                        </PopoverTrigger>
-                        <PopoverContent className="p-3" align="start">
-                          <div className="space-y-2">
-                            {availableLabels.map((label) => {
-                              const isSelected = card.labels?.some(l => l.id === label.id)
-                              return (
-                                <div
-                                  key={label.id}
-                                  className={cn(
-                                    "flex items-center gap-2 p-2 rounded cursor-pointer hover:bg-muted",
-                                    isSelected && "bg-muted"
-                                  )}
-                                  onClick={() => {
-                                    if (isSelected) {
-                                      updateCard({
-                                        labels: card.labels?.filter(l => l.id !== label.id)
-                                      })
-                                    } else {
-                                      updateCard({
-                                        labels: [...(card.labels || []), label]
-                                      })
-                                    }
-                                  }}
-                                >
-                                  <div
-                                    className="w-6 h-6 rounded"
-                                    style={{ backgroundColor: label.color }}
-                                  />
-                                  <span className="text-sm">{label.name}</span>
-                                  {isSelected && <Check className="h-4 w-4 ml-auto" />}
-                                </div>
-                              )
-                            })}
-                          </div>
-                        </PopoverContent>
-                      </Popover>
-                    </div>
-                  </div>
-
-                  {/* Checklist */}
-                  <div>
-                    <div className="flex items-center justify-between mb-3">
-                      <Label className="text-base font-semibold">Checklist</Label>
-                      {totalChecklistItems > 0 && (
-                        <div className="flex items-center gap-2">
-                          <span className="text-sm text-muted-foreground">
-                            {completedChecklistItems}/{totalChecklistItems}
-                          </span>
-                          <Progress value={checklistProgress} className="w-20 h-2" />
-                        </div>
-                      )}
-                    </div>
-                    <div className="space-y-2">
-                      {card.checklist?.items.map((item) => (
-                        <div key={item.id} className="flex items-center gap-2 group">
-                          <Checkbox
-                            checked={item.completed}
-                            onCheckedChange={() => toggleChecklistItem(item.id)}
-                          />
-                          <span className={cn(
-                            "flex-1",
-                            item.completed && "line-through text-muted-foreground"
-                          )}>
-                            {item.text}
-                          </span>
-                          <Button
-                            variant="ghost"
-                            size="icon"
-                            className="h-6 w-6 opacity-0 group-hover:opacity-100"
-                            onClick={() => deleteChecklistItem(item.id)}
-                          >
-                            <Trash2 className="h-3 w-3" />
-                          </Button>
-                        </div>
-                      ))}
-                      <div className="flex items-center gap-2">
-                        <Checkbox disabled className="invisible" />
-                        <Input
-                          placeholder="Add an item..."
-                          value={newChecklistItem}
-                          onChange={(e) => setNewChecklistItem(e.target.value)}
-                          onKeyDown={(e) => {
-                            if (e.key === 'Enter') {
-                              e.preventDefault()
-                              addChecklistItem()
-                            }
-                          }}
-                        />
-                        <Button
-                          size="sm"
-                          onClick={addChecklistItem}
-                          disabled={!newChecklistItem.trim()}
-                        >
-                          Add
-                        </Button>
-                      </div>
-                    </div>
-                  </div>
-
-                  {/* Attachments */}
-                  <div>
-                    <Label className="text-base font-semibold mb-3 block">Attachments</Label>
-                    <div className="space-y-2">
-                      {card.attachments?.map((attachment) => (
-                        <div key={attachment.id} className="flex items-center gap-3 p-3 border rounded-lg group">
-                          <div className="flex-shrink-0">
-                            {attachment.type.startsWith('image/') ? (
-                              <Image className="h-8 w-8 text-muted-foreground" />
-                            ) : (
-                              <FileText className="h-8 w-8 text-muted-foreground" />
-                            )}
-                          </div>
-                          <div className="flex-1 min-w-0">
-                            <p className="text-sm font-medium truncate">{attachment.name}</p>
-                            <p className="text-xs text-muted-foreground">{formatFileSize(attachment.size)}</p>
-                          </div>
-                          <div className="flex items-center gap-1 opacity-0 group-hover:opacity-100">
-                            <Button
-                              variant="ghost"
-                              size="icon"
-                              className="h-8 w-8"
-                              onClick={() => window.open(attachment.url, '_blank')}
-                            >
-                              <Download className="h-4 w-4" />
-                            </Button>
-                            <Button
-                              variant="ghost"
-                              size="icon"
-                              className="h-8 w-8"
-                              onClick={() => removeAttachment(attachment.id)}
-                            >
-                              <Trash2 className="h-4 w-4" />
-                            </Button>
-                          </div>
-                        </div>
-                      ))}
-                      <div>
-                        <input
-                          type="file"
-                          id="file-upload"
-                          className="hidden"
-                          multiple
-                          onChange={handleFileUpload}
-                        />
-                        <Button
-                          variant="outline"
-                          className="w-full"
-                          onClick={() => document.getElementById('file-upload')?.click()}
-                        >
-                          <Upload className="mr-2 h-4 w-4" />
-                          Add attachment
-                        </Button>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </TabsContent>
-
-              <TabsContent value="activity" className="mt-0">
-                <div className="space-y-4">
-                  {card.activities?.map((activity) => (
-                    <div key={activity.id} className="flex gap-3">
-                      <MoonUIAvatarPro className="h-8 w-8">
-                        <MoonUIAvatarImagePro src={activity.user.avatar} />
-                        <MoonUIAvatarFallbackPro className="text-xs">
-                          {getInitials(activity.user.name)}
-                        </MoonUIAvatarFallbackPro>
-                      </MoonUIAvatarPro>
-                      <div className="flex-1">
-                        <div className="flex items-center gap-2 mb-1">
-                          <span className="font-medium text-sm">{activity.user.name}</span>
-                          <span className="text-sm text-muted-foreground">{activity.action}</span>
-                          <span className="text-xs text-muted-foreground">
-                            {format(activity.timestamp, 'PPp')}
-                          </span>
-                        </div>
-                        {activity.details && (
-                          <p className="text-sm text-muted-foreground">{activity.details}</p>
-                        )}
-                      </div>
-                    </div>
-                  ))}
-                  {(!card.activities || card.activities.length === 0) && (
-                    <div className="text-center py-8 text-muted-foreground">
-                      <Activity className="h-8 w-8 mx-auto mb-2 opacity-50" />
-                      <p>No activity yet</p>
-                    </div>
-                  )}
-                </div>
-              </TabsContent>
-
-              <TabsContent value="comments" className="mt-0">
-                <div className="space-y-4">
-                  {/* Comment Input */}
-                  <div className="flex gap-3">
-                    <MoonUIAvatarPro className="h-8 w-8">
-                      <MoonUIAvatarFallbackPro>U</MoonUIAvatarFallbackPro>
-                    </MoonUIAvatarPro>
-                    <div className="flex-1 space-y-2">
-                      <Textarea
-                        placeholder="Add a comment..."
-                        value={newComment}
-                        onChange={(e) => setNewComment(e.target.value)}
-                        className="min-h-[80px]"
-                      />
-                      <div className="flex justify-end">
-                        <Button
-                          size="sm"
-                          onClick={addComment}
-                          disabled={!newComment.trim()}
-                        >
-                          <Send className="mr-2 h-4 w-4" />
-                          Comment
-                        </Button>
-                      </div>
-                    </div>
-                  </div>
-
-                  <Separator />
-
-                  {/* Comments List */}
-                  {card.activities?.filter(a => a.action === 'commented').map((comment) => (
-                    <div key={comment.id} className="flex gap-3">
-                      <MoonUIAvatarPro className="h-8 w-8">
-                        <MoonUIAvatarImagePro src={comment.user.avatar} />
-                        <MoonUIAvatarFallbackPro className="text-xs">
-                          {getInitials(comment.user.name)}
-                        </MoonUIAvatarFallbackPro>
-                      </MoonUIAvatarPro>
-                      <div className="flex-1">
-                        <div className="flex items-center gap-2 mb-1">
-                          <span className="font-medium text-sm">{comment.user.name}</span>
-                          <span className="text-xs text-muted-foreground">
-                            {format(comment.timestamp, 'PPp')}
-                          </span>
-                        </div>
-                        <p className="text-sm">{comment.details}</p>
-                      </div>
-                    </div>
-                  ))}
-                  {!card.activities?.some(a => a.action === 'commented') && (
-                    <div className="text-center py-8 text-muted-foreground">
-                      <MessageCircle className="h-8 w-8 mx-auto mb-2 opacity-50" />
-                      <p>No comments yet</p>
-                      <p className="text-sm">Be the first to comment</p>
-                    </div>
-                  )}
-                </div>
-              </TabsContent>
-            </div>
-          </ScrollArea>
-        </Tabs>
-
-        {/* Footer Actions */}
-        <div className="border-t p-4 flex items-center justify-between">
-          <div className="flex items-center gap-2">
-            <DropdownMenu>
-              <DropdownMenuTrigger asChild>
-                <Button variant="outline" size="sm">
-                  <MoreHorizontal className="h-4 w-4 mr-2" />
-                  Actions
-                </Button>
-              </DropdownMenuTrigger>
-              <DropdownMenuContent align="start">
-                <DropdownMenuItem>
-                  <Copy className="mr-2 h-4 w-4" />
-                  Duplicate card
-                </DropdownMenuItem>
-                <DropdownMenuItem>
-                  <Archive className="mr-2 h-4 w-4" />
-                  Archive card
-                </DropdownMenuItem>
-                <DropdownMenuItem>
-                  <Link2 className="mr-2 h-4 w-4" />
-                  Copy link
-                </DropdownMenuItem>
-                <DropdownMenuSeparator />
-                <DropdownMenuItem
-                  onClick={() => {
-                    onDelete(card)
-                    onClose()
-                  }}
-                  className="text-destructive"
-                >
-                  <Trash2 className="mr-2 h-4 w-4" />
-                  Delete card
-                </DropdownMenuItem>
-              </DropdownMenuContent>
-            </DropdownMenu>
-          </div>
-          <Button onClick={onClose}>Close</Button>
-        </div>
-      </DialogContent>
-    </Dialog>
-  )
-}