@wakastellar/ui 2.0.0 → 2.1.0

package/src/blocks/file-manager/index.tsx

@@ -0,0 +1,890 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../utils"
+import { Button } from "../../components/button"
+import { Input } from "../../components/input"
+import { Badge } from "../../components/badge"
+import { Checkbox } from "../../components/checkbox"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "../../components/dropdown-menu"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "../../components/dialog"
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "../../components/alert-dialog"
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "../../components/table"
+import {
+  Folder,
+  File,
+  FileText,
+  FileImage,
+  FileVideo,
+  FileAudio,
+  FileArchive,
+  FileCode,
+  FilePlus,
+  FolderPlus,
+  Upload,
+  Download,
+  Trash2,
+  Edit,
+  Copy,
+  Move,
+  Share2,
+  MoreHorizontal,
+  Grid,
+  List,
+  Search,
+  ChevronRight,
+  Home,
+  ArrowUp,
+  RefreshCw,
+  Star,
+  StarOff,
+  Eye,
+  X,
+} from "lucide-react"
+
+// ============================================
+// TYPES
+// ============================================
+
+export type FileType =
+  | "folder"
+  | "document"
+  | "image"
+  | "video"
+  | "audio"
+  | "archive"
+  | "code"
+  | "other"
+
+export interface FileItem {
+  id: string
+  name: string
+  type: FileType
+  size?: number
+  mimeType?: string
+  path: string
+  parentId?: string | null
+  createdAt: Date | string
+  modifiedAt: Date | string
+  createdBy?: { id: string; name: string }
+  starred?: boolean
+  shared?: boolean
+  thumbnail?: string
+  metadata?: Record<string, unknown>
+}
+
+export interface BreadcrumbItem {
+  id: string
+  name: string
+  path: string
+}
+
+export interface WakaFileManagerProps {
+  /** Fichiers et dossiers */
+  files: FileItem[]
+  /** Chemin courant */
+  currentPath?: string
+  /** Fil d'Ariane */
+  breadcrumbs?: BreadcrumbItem[]
+  /** Fichiers sélectionnés */
+  selectedFiles?: string[]
+  /** Callback sélection */
+  onSelectionChange?: (fileIds: string[]) => void
+  /** Callback navigation */
+  onNavigate?: (path: string, folderId?: string) => void
+  /** Callback ouvrir fichier */
+  onFileOpen?: (file: FileItem) => void
+  /** Callback télécharger */
+  onDownload?: (fileIds: string[]) => void
+  /** Callback supprimer */
+  onDelete?: (fileIds: string[]) => void
+  /** Callback renommer */
+  onRename?: (fileId: string, newName: string) => void
+  /** Callback copier */
+  onCopy?: (fileIds: string[], targetPath: string) => void
+  /** Callback déplacer */
+  onMove?: (fileIds: string[], targetPath: string) => void
+  /** Callback créer dossier */
+  onCreateFolder?: (name: string, parentPath: string) => void
+  /** Callback upload */
+  onUpload?: (files: File[], targetPath: string) => void
+  /** Callback partager */
+  onShare?: (fileId: string) => void
+  /** Callback favori */
+  onToggleStar?: (fileId: string) => void
+  /** Callback rafraîchir */
+  onRefresh?: () => void
+  /** Mode d'affichage */
+  viewMode?: "grid" | "list"
+  /** Callback changement de mode */
+  onViewModeChange?: (mode: "grid" | "list") => void
+  /** Afficher la recherche */
+  showSearch?: boolean
+  /** Callback recherche */
+  onSearch?: (query: string) => void
+  /** Afficher le header */
+  showHeader?: boolean
+  /** Afficher les actions */
+  showActions?: boolean
+  /** En cours de chargement */
+  loading?: boolean
+  /** Classes CSS additionnelles */
+  className?: string
+}
+
+// ============================================
+// FILE TYPE CONFIG
+// ============================================
+
+const fileTypeConfig: Record<FileType, { icon: React.ElementType; color: string }> = {
+  folder: { icon: Folder, color: "text-yellow-500" },
+  document: { icon: FileText, color: "text-blue-500" },
+  image: { icon: FileImage, color: "text-green-500" },
+  video: { icon: FileVideo, color: "text-purple-500" },
+  audio: { icon: FileAudio, color: "text-pink-500" },
+  archive: { icon: FileArchive, color: "text-orange-500" },
+  code: { icon: FileCode, color: "text-cyan-500" },
+  other: { icon: File, color: "text-gray-500" },
+}
+
+// ============================================
+// HELPERS
+// ============================================
+
+function formatFileSize(bytes?: number): string {
+  if (!bytes) return "-"
+  const units = ["B", "KB", "MB", "GB", "TB"]
+  let unitIndex = 0
+  let size = bytes
+
+  while (size >= 1024 && unitIndex < units.length - 1) {
+    size /= 1024
+    unitIndex++
+  }
+
+  return `${size.toFixed(1)} ${units[unitIndex]}`
+}
+
+function getFileType(mimeType?: string, name?: string): FileType {
+  if (!mimeType && !name) return "other"
+
+  if (mimeType) {
+    if (mimeType.startsWith("image/")) return "image"
+    if (mimeType.startsWith("video/")) return "video"
+    if (mimeType.startsWith("audio/")) return "audio"
+    if (mimeType.includes("zip") || mimeType.includes("archive") || mimeType.includes("compressed")) return "archive"
+    if (mimeType.includes("text") || mimeType.includes("document") || mimeType.includes("pdf")) return "document"
+    if (mimeType.includes("javascript") || mimeType.includes("json") || mimeType.includes("xml")) return "code"
+  }
+
+  if (name) {
+    const ext = name.split(".").pop()?.toLowerCase()
+    if (["jpg", "jpeg", "png", "gif", "svg", "webp"].includes(ext || "")) return "image"
+    if (["mp4", "avi", "mov", "mkv", "webm"].includes(ext || "")) return "video"
+    if (["mp3", "wav", "ogg", "flac"].includes(ext || "")) return "audio"
+    if (["zip", "rar", "7z", "tar", "gz"].includes(ext || "")) return "archive"
+    if (["pdf", "doc", "docx", "txt", "rtf"].includes(ext || "")) return "document"
+    if (["js", "ts", "jsx", "tsx", "py", "java", "cpp", "c", "go", "rs"].includes(ext || "")) return "code"
+  }
+
+  return "other"
+}
+
+// ============================================
+// SUB-COMPONENTS
+// ============================================
+
+interface FileManagerHeaderProps {
+  breadcrumbs: BreadcrumbItem[]
+  viewMode: "grid" | "list"
+  onViewModeChange: (mode: "grid" | "list") => void
+  onNavigate: (path: string) => void
+  onCreateFolder?: () => void
+  onUpload?: () => void
+  onRefresh?: () => void
+  showSearch: boolean
+  onSearch?: (query: string) => void
+  selectedCount: number
+  onDeleteSelected?: () => void
+  onDownloadSelected?: () => void
+}
+
+function FileManagerHeader({
+  breadcrumbs,
+  viewMode,
+  onViewModeChange,
+  onNavigate,
+  onCreateFolder,
+  onUpload,
+  onRefresh,
+  showSearch,
+  onSearch,
+  selectedCount,
+  onDeleteSelected,
+  onDownloadSelected,
+}: FileManagerHeaderProps) {
+  const [searchQuery, setSearchQuery] = React.useState("")
+
+  return (
+    <div className="space-y-4">
+      {/* Top bar */}
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          {onRefresh && (
+            <Button variant="outline" size="icon" onClick={onRefresh}>
+              <RefreshCw className="h-4 w-4" />
+            </Button>
+          )}
+          {onUpload && (
+            <Button variant="outline" onClick={onUpload}>
+              <Upload className="h-4 w-4 mr-2" />
+              Importer
+            </Button>
+          )}
+          {onCreateFolder && (
+            <Button variant="outline" onClick={onCreateFolder}>
+              <FolderPlus className="h-4 w-4 mr-2" />
+              Nouveau dossier
+            </Button>
+          )}
+        </div>
+
+        <div className="flex items-center gap-2">
+          {showSearch && onSearch && (
+            <div className="relative w-64">
+              <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+              <Input
+                placeholder="Rechercher..."
+                value={searchQuery}
+                onChange={(e) => {
+                  setSearchQuery(e.target.value)
+                  onSearch(e.target.value)
+                }}
+                className="pl-9"
+              />
+            </div>
+          )}
+          <Button
+            variant={viewMode === "grid" ? "secondary" : "ghost"}
+            size="icon"
+            onClick={() => onViewModeChange("grid")}
+          >
+            <Grid className="h-4 w-4" />
+          </Button>
+          <Button
+            variant={viewMode === "list" ? "secondary" : "ghost"}
+            size="icon"
+            onClick={() => onViewModeChange("list")}
+          >
+            <List className="h-4 w-4" />
+          </Button>
+        </div>
+      </div>
+
+      {/* Breadcrumbs */}
+      <div className="flex items-center gap-1 text-sm">
+        <button
+          onClick={() => onNavigate("/")}
+          className="flex items-center gap-1 hover:text-primary"
+        >
+          <Home className="h-4 w-4" />
+        </button>
+        {breadcrumbs.map((item, index) => (
+          <React.Fragment key={item.id}>
+            <ChevronRight className="h-4 w-4 text-muted-foreground" />
+            <button
+              onClick={() => onNavigate(item.path)}
+              className={cn(
+                "hover:text-primary",
+                index === breadcrumbs.length - 1 && "font-medium"
+              )}
+            >
+              {item.name}
+            </button>
+          </React.Fragment>
+        ))}
+      </div>
+
+      {/* Selection actions */}
+      {selectedCount > 0 && (
+        <div className="flex items-center gap-4 p-3 bg-muted rounded-lg">
+          <span className="text-sm font-medium">
+            {selectedCount} élément(s) sélectionné(s)
+          </span>
+          {onDownloadSelected && (
+            <Button variant="outline" size="sm" onClick={onDownloadSelected}>
+              <Download className="h-4 w-4 mr-2" />
+              Télécharger
+            </Button>
+          )}
+          {onDeleteSelected && (
+            <Button variant="destructive" size="sm" onClick={onDeleteSelected}>
+              <Trash2 className="h-4 w-4 mr-2" />
+              Supprimer
+            </Button>
+          )}
+        </div>
+      )}
+    </div>
+  )
+}
+
+interface FileItemComponentProps {
+  file: FileItem
+  viewMode: "grid" | "list"
+  isSelected: boolean
+  onSelect: (selected: boolean) => void
+  onOpen: () => void
+  onRename?: () => void
+  onDelete?: () => void
+  onDownload?: () => void
+  onShare?: () => void
+  onToggleStar?: () => void
+}
+
+function FileItemComponent({
+  file,
+  viewMode,
+  isSelected,
+  onSelect,
+  onOpen,
+  onRename,
+  onDelete,
+  onDownload,
+  onShare,
+  onToggleStar,
+}: FileItemComponentProps) {
+  const config = fileTypeConfig[file.type]
+  const Icon = config.icon
+  const modifiedAt = typeof file.modifiedAt === "string" ? new Date(file.modifiedAt) : file.modifiedAt
+
+  const handleDoubleClick = () => {
+    if (file.type === "folder") {
+      onOpen()
+    }
+  }
+
+  if (viewMode === "grid") {
+    return (
+      <div
+        className={cn(
+          "relative group p-4 rounded-lg border cursor-pointer transition-colors",
+          isSelected ? "bg-primary/10 border-primary" : "hover:bg-muted"
+        )}
+        onClick={() => onSelect(!isSelected)}
+        onDoubleClick={handleDoubleClick}
+      >
+        {/* Checkbox */}
+        <div className="absolute top-2 left-2 opacity-0 group-hover:opacity-100 transition-opacity">
+          <Checkbox
+            checked={isSelected}
+            onCheckedChange={(checked) => onSelect(checked as boolean)}
+            onClick={(e) => e.stopPropagation()}
+          />
+        </div>
+
+        {/* Star */}
+        {file.starred && (
+          <Star className="absolute top-2 right-2 h-4 w-4 text-yellow-500 fill-yellow-500" />
+        )}
+
+        {/* Icon */}
+        <div className="flex flex-col items-center gap-2">
+          {file.thumbnail && file.type === "image" ? (
+            <img
+              src={file.thumbnail}
+              alt={file.name}
+              className="w-16 h-16 object-cover rounded"
+            />
+          ) : (
+            <Icon className={cn("h-12 w-12", config.color)} />
+          )}
+          <span className="text-sm font-medium text-center line-clamp-2">
+            {file.name}
+          </span>
+          {file.type !== "folder" && (
+            <span className="text-xs text-muted-foreground">
+              {formatFileSize(file.size)}
+            </span>
+          )}
+        </div>
+
+        {/* Actions */}
+        <div className="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity">
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild onClick={(e) => e.stopPropagation()}>
+              <Button variant="ghost" size="icon" className="h-7 w-7">
+                <MoreHorizontal className="h-4 w-4" />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+              <DropdownMenuItem onClick={onOpen}>
+                <Eye className="mr-2 h-4 w-4" />
+                Ouvrir
+              </DropdownMenuItem>
+              {onRename && (
+                <DropdownMenuItem onClick={onRename}>
+                  <Edit className="mr-2 h-4 w-4" />
+                  Renommer
+                </DropdownMenuItem>
+              )}
+              {onDownload && file.type !== "folder" && (
+                <DropdownMenuItem onClick={onDownload}>
+                  <Download className="mr-2 h-4 w-4" />
+                  Télécharger
+                </DropdownMenuItem>
+              )}
+              {onShare && (
+                <DropdownMenuItem onClick={onShare}>
+                  <Share2 className="mr-2 h-4 w-4" />
+                  Partager
+                </DropdownMenuItem>
+              )}
+              {onToggleStar && (
+                <DropdownMenuItem onClick={onToggleStar}>
+                  {file.starred ? (
+                    <>
+                      <StarOff className="mr-2 h-4 w-4" />
+                      Retirer des favoris
+                    </>
+                  ) : (
+                    <>
+                      <Star className="mr-2 h-4 w-4" />
+                      Ajouter aux favoris
+                    </>
+                  )}
+                </DropdownMenuItem>
+              )}
+              {onDelete && (
+                <>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuItem onClick={onDelete} className="text-destructive">
+                    <Trash2 className="mr-2 h-4 w-4" />
+                    Supprimer
+                  </DropdownMenuItem>
+                </>
+              )}
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+      </div>
+    )
+  }
+
+  // List view
+  return (
+    <TableRow
+      className={cn("cursor-pointer", isSelected && "bg-primary/10")}
+      onClick={() => onSelect(!isSelected)}
+      onDoubleClick={handleDoubleClick}
+    >
+      <TableCell className="w-12">
+        <Checkbox
+          checked={isSelected}
+          onCheckedChange={(checked) => onSelect(checked as boolean)}
+          onClick={(e) => e.stopPropagation()}
+        />
+      </TableCell>
+      <TableCell>
+        <div className="flex items-center gap-3">
+          <Icon className={cn("h-5 w-5", config.color)} />
+          <span className="font-medium">{file.name}</span>
+          {file.starred && (
+            <Star className="h-4 w-4 text-yellow-500 fill-yellow-500" />
+          )}
+          {file.shared && (
+            <Badge variant="secondary" className="text-xs">
+              Partagé
+            </Badge>
+          )}
+        </div>
+      </TableCell>
+      <TableCell className="text-muted-foreground">
+        {formatFileSize(file.size)}
+      </TableCell>
+      <TableCell className="text-muted-foreground">
+        {modifiedAt.toLocaleDateString("fr-FR")}
+      </TableCell>
+      <TableCell>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild onClick={(e) => e.stopPropagation()}>
+            <Button variant="ghost" size="icon" className="h-8 w-8">
+              <MoreHorizontal className="h-4 w-4" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end">
+            <DropdownMenuItem onClick={onOpen}>
+              <Eye className="mr-2 h-4 w-4" />
+              Ouvrir
+            </DropdownMenuItem>
+            {onRename && (
+              <DropdownMenuItem onClick={onRename}>
+                <Edit className="mr-2 h-4 w-4" />
+                Renommer
+              </DropdownMenuItem>
+            )}
+            {onDownload && file.type !== "folder" && (
+              <DropdownMenuItem onClick={onDownload}>
+                <Download className="mr-2 h-4 w-4" />
+                Télécharger
+              </DropdownMenuItem>
+            )}
+            {onDelete && (
+              <>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem onClick={onDelete} className="text-destructive">
+                  <Trash2 className="mr-2 h-4 w-4" />
+                  Supprimer
+                </DropdownMenuItem>
+              </>
+            )}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </TableCell>
+    </TableRow>
+  )
+}
+
+// ============================================
+// MAIN COMPONENT
+// ============================================
+
+export function WakaFileManager({
+  files,
+  currentPath = "/",
+  breadcrumbs = [],
+  selectedFiles = [],
+  onSelectionChange,
+  onNavigate,
+  onFileOpen,
+  onDownload,
+  onDelete,
+  onRename,
+  onCopy,
+  onMove,
+  onCreateFolder,
+  onUpload,
+  onShare,
+  onToggleStar,
+  onRefresh,
+  viewMode: externalViewMode,
+  onViewModeChange,
+  showSearch = true,
+  onSearch,
+  showHeader = true,
+  showActions = true,
+  loading = false,
+  className,
+}: WakaFileManagerProps) {
+  const [internalViewMode, setInternalViewMode] = React.useState<"grid" | "list">("grid")
+  const [renameDialogOpen, setRenameDialogOpen] = React.useState(false)
+  const [renamingFile, setRenamingFile] = React.useState<FileItem | null>(null)
+  const [newName, setNewName] = React.useState("")
+  const [deleteDialogOpen, setDeleteDialogOpen] = React.useState(false)
+  const [deletingFiles, setDeletingFiles] = React.useState<string[]>([])
+  const [createFolderDialogOpen, setCreateFolderDialogOpen] = React.useState(false)
+  const [newFolderName, setNewFolderName] = React.useState("")
+
+  const viewMode = externalViewMode ?? internalViewMode
+
+  const handleViewModeChange = (mode: "grid" | "list") => {
+    if (onViewModeChange) {
+      onViewModeChange(mode)
+    } else {
+      setInternalViewMode(mode)
+    }
+  }
+
+  const handleSelect = (fileId: string, selected: boolean) => {
+    if (selected) {
+      onSelectionChange?.([...selectedFiles, fileId])
+    } else {
+      onSelectionChange?.(selectedFiles.filter((id) => id !== fileId))
+    }
+  }
+
+  const handleOpen = (file: FileItem) => {
+    if (file.type === "folder") {
+      onNavigate?.(file.path, file.id)
+    } else {
+      onFileOpen?.(file)
+    }
+  }
+
+  const handleRename = (file: FileItem) => {
+    setRenamingFile(file)
+    setNewName(file.name)
+    setRenameDialogOpen(true)
+  }
+
+  const confirmRename = () => {
+    if (renamingFile && newName.trim() && newName !== renamingFile.name) {
+      onRename?.(renamingFile.id, newName.trim())
+    }
+    setRenameDialogOpen(false)
+    setRenamingFile(null)
+  }
+
+  const handleDeleteSelected = () => {
+    setDeletingFiles(selectedFiles)
+    setDeleteDialogOpen(true)
+  }
+
+  const confirmDelete = () => {
+    onDelete?.(deletingFiles)
+    setDeleteDialogOpen(false)
+    setDeletingFiles([])
+    onSelectionChange?.([])
+  }
+
+  const handleCreateFolder = () => {
+    if (newFolderName.trim()) {
+      onCreateFolder?.(newFolderName.trim(), currentPath)
+      setCreateFolderDialogOpen(false)
+      setNewFolderName("")
+    }
+  }
+
+  // Sort files: folders first, then by name
+  const sortedFiles = [...files].sort((a, b) => {
+    if (a.type === "folder" && b.type !== "folder") return -1
+    if (a.type !== "folder" && b.type === "folder") return 1
+    return a.name.localeCompare(b.name)
+  })
+
+  return (
+    <div className={cn("space-y-4", className)}>
+      {showHeader && (
+        <FileManagerHeader
+          breadcrumbs={breadcrumbs}
+          viewMode={viewMode}
+          onViewModeChange={handleViewModeChange}
+          onNavigate={(path) => onNavigate?.(path)}
+          onCreateFolder={onCreateFolder ? () => setCreateFolderDialogOpen(true) : undefined}
+          onUpload={onUpload ? () => {} : undefined}
+          onRefresh={onRefresh}
+          showSearch={showSearch}
+          onSearch={onSearch}
+          selectedCount={selectedFiles.length}
+          onDeleteSelected={onDelete ? handleDeleteSelected : undefined}
+          onDownloadSelected={onDownload ? () => onDownload(selectedFiles) : undefined}
+        />
+      )}
+
+      {loading ? (
+        <div className="flex items-center justify-center py-12">
+          <RefreshCw className="h-6 w-6 animate-spin text-muted-foreground" />
+        </div>
+      ) : sortedFiles.length === 0 ? (
+        <div className="flex flex-col items-center justify-center py-12 text-muted-foreground">
+          <Folder className="h-12 w-12 mb-4" />
+          <p>Ce dossier est vide</p>
+        </div>
+      ) : viewMode === "grid" ? (
+        <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
+          {sortedFiles.map((file) => (
+            <FileItemComponent
+              key={file.id}
+              file={file}
+              viewMode="grid"
+              isSelected={selectedFiles.includes(file.id)}
+              onSelect={(selected) => handleSelect(file.id, selected)}
+              onOpen={() => handleOpen(file)}
+              onRename={onRename ? () => handleRename(file) : undefined}
+              onDelete={onDelete ? () => { setDeletingFiles([file.id]); setDeleteDialogOpen(true); } : undefined}
+              onDownload={onDownload ? () => onDownload([file.id]) : undefined}
+              onShare={onShare ? () => onShare(file.id) : undefined}
+              onToggleStar={onToggleStar ? () => onToggleStar(file.id) : undefined}
+            />
+          ))}
+        </div>
+      ) : (
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead className="w-12">
+                <Checkbox
+                  checked={selectedFiles.length === files.length && files.length > 0}
+                  onCheckedChange={(checked) => {
+                    if (checked) {
+                      onSelectionChange?.(files.map((f) => f.id))
+                    } else {
+                      onSelectionChange?.([])
+                    }
+                  }}
+                />
+              </TableHead>
+              <TableHead>Nom</TableHead>
+              <TableHead>Taille</TableHead>
+              <TableHead>Modifié</TableHead>
+              <TableHead className="w-12"></TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {sortedFiles.map((file) => (
+              <FileItemComponent
+                key={file.id}
+                file={file}
+                viewMode="list"
+                isSelected={selectedFiles.includes(file.id)}
+                onSelect={(selected) => handleSelect(file.id, selected)}
+                onOpen={() => handleOpen(file)}
+                onRename={onRename ? () => handleRename(file) : undefined}
+                onDelete={onDelete ? () => { setDeletingFiles([file.id]); setDeleteDialogOpen(true); } : undefined}
+                onDownload={onDownload ? () => onDownload([file.id]) : undefined}
+                onShare={onShare ? () => onShare(file.id) : undefined}
+                onToggleStar={onToggleStar ? () => onToggleStar(file.id) : undefined}
+              />
+            ))}
+          </TableBody>
+        </Table>
+      )}
+
+      {/* Rename Dialog */}
+      <Dialog open={renameDialogOpen} onOpenChange={setRenameDialogOpen}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Renommer</DialogTitle>
+          </DialogHeader>
+          <Input
+            value={newName}
+            onChange={(e) => setNewName(e.target.value)}
+            placeholder="Nouveau nom"
+            onKeyDown={(e) => e.key === "Enter" && confirmRename()}
+          />
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setRenameDialogOpen(false)}>
+              Annuler
+            </Button>
+            <Button onClick={confirmRename}>Renommer</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* Delete Dialog */}
+      <AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Supprimer ?</AlertDialogTitle>
+            <AlertDialogDescription>
+              Êtes-vous sûr de vouloir supprimer {deletingFiles.length} élément(s) ?
+              Cette action est irréversible.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>Annuler</AlertDialogCancel>
+            <AlertDialogAction onClick={confirmDelete}>Supprimer</AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+
+      {/* Create Folder Dialog */}
+      <Dialog open={createFolderDialogOpen} onOpenChange={setCreateFolderDialogOpen}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Nouveau dossier</DialogTitle>
+          </DialogHeader>
+          <Input
+            value={newFolderName}
+            onChange={(e) => setNewFolderName(e.target.value)}
+            placeholder="Nom du dossier"
+            onKeyDown={(e) => e.key === "Enter" && handleCreateFolder()}
+          />
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setCreateFolderDialogOpen(false)}>
+              Annuler
+            </Button>
+            <Button onClick={handleCreateFolder}>Créer</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  )
+}
+
+// ============================================
+// PRESETS
+// ============================================
+
+export const defaultFiles: FileItem[] = [
+  {
+    id: "1",
+    name: "Documents",
+    type: "folder",
+    path: "/Documents",
+    createdAt: new Date("2024-01-01"),
+    modifiedAt: new Date("2024-01-15"),
+  },
+  {
+    id: "2",
+    name: "Images",
+    type: "folder",
+    path: "/Images",
+    createdAt: new Date("2024-01-01"),
+    modifiedAt: new Date("2024-01-10"),
+    starred: true,
+  },
+  {
+    id: "3",
+    name: "Rapport Q4.pdf",
+    type: "document",
+    path: "/Rapport Q4.pdf",
+    size: 2456000,
+    createdAt: new Date("2024-01-05"),
+    modifiedAt: new Date("2024-01-05"),
+  },
+  {
+    id: "4",
+    name: "Photo vacances.jpg",
+    type: "image",
+    path: "/Photo vacances.jpg",
+    size: 5670000,
+    createdAt: new Date("2024-01-08"),
+    modifiedAt: new Date("2024-01-08"),
+  },
+  {
+    id: "5",
+    name: "Présentation.pptx",
+    type: "document",
+    path: "/Présentation.pptx",
+    size: 8900000,
+    createdAt: new Date("2024-01-12"),
+    modifiedAt: new Date("2024-01-14"),
+    shared: true,
+  },
+]
+
+export const defaultBreadcrumbs: BreadcrumbItem[] = [
+  { id: "root", name: "Mes fichiers", path: "/" },
+]
+
+export default WakaFileManager