\n
\n\n {/* File Browser */}\n \n
\n\n \n
\n {stats?.total_files || 0}
\n{stats?.total_folders || 0} folders
\n\n
\n \n
\n {stats?.active_shares || 0}
\nShared links
\n\n {/* Toolbar */}\n
\n \n
\n\n {/* Upload progress */}\n {Object.keys(uploadProgress).length > 0 && (\n \n {/* Search */}\n
\n\n {/* Breadcrumb */}\n \n\n {/* Bulk Actions */}\n {selectedFiles.size > 0 && (\n \n setSearchQuery(e.target.value)}\n placeholder=\"Search files...\"\n data-testid=\"search-input\"\n className=\"w-full h-10 pl-10 pr-4 bg-background border border-input rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-ring\"\n />\n
\n\n {/* Actions */}\n \n setShowNewFolder(true)}\n data-testid=\"new-folder-btn\"\n className=\"h-10 px-4 bg-secondary text-secondary-foreground text-sm font-medium rounded-lg hover:opacity-80 transition-colors flex items-center gap-2\"\n >\n fileInputRef.current?.click()}\n data-testid=\"upload-btn\"\n className=\"h-10 px-4 bg-primary text-primary-foreground text-sm font-medium rounded-lg hover:opacity-90 transition-colors flex items-center gap-2\"\n >\n handleUpload(e.target.files)}\n className=\"hidden\"\n data-testid=\"file-input\"\n />\n\n {/* View toggle */}\n
\n \n setViewMode('list')}\n data-testid=\"view-list-btn\"\n className={cn(\n \"p-2 transition-colors\",\n viewMode === 'list' ? \"bg-accent\" : \"hover:bg-accent/50\"\n )}\n >\n setViewMode('grid')}\n data-testid=\"view-grid-btn\"\n className={cn(\n \"p-2 transition-colors\",\n viewMode === 'grid' ? \"bg-accent\" : \"hover:bg-accent/50\"\n )}\n >\n
\n \n {selectedFiles.size} selected\n downloadZip(Array.from(selectedFiles))}\n data-testid=\"bulk-zip-btn\"\n className=\"px-3 py-1.5 text-sm bg-primary text-primary-foreground rounded-lg hover:opacity-90 flex items-center gap-1\"\n >\n \n setSelectedFiles(new Set())}\n className=\"px-3 py-1.5 text-sm bg-secondary text-secondary-foreground rounded-lg hover:opacity-80\"\n >\n Clear\n \n
\n )}\n \n {Object.entries(uploadProgress).map(([id, progress]) => (\n
\n )}\n\n {/* File List */}\n \n
\n ))}\n \n
\n {progress}%\n \n \n
\n \n {loading ? (\n // Skeleton loader\n
\n )}\n \n {[...Array(5)].map((_, i) => (\n
\n ) : files.length === 0 ? (\n // Empty state\n \n
\n ))}\n \n
\n ) : viewMode === 'list' ? (\n // List view\n No files yet
\n\n {searchQuery ? 'No files match your search' : 'Upload files or create a folder to get started'}\n
\n\n \n \n
\n
\n ) : (\n // Grid view\n | \n 0}\n onChange={selectAll}\n data-testid=\"select-all-checkbox\"\n className=\"rounded border-input\"\n />\n | \nType | \nName | \nSize | \nModified | \n\n |
|---|---|---|---|---|---|
| \n | \n \n | \n \n | \n \n {formatBytes(file.size)}\n | \n\n {formatDate(file.modified_at)}\n | \n\n | \n
\n {files.map((file, index) => {\n const FileIcon = getFileIcon(file.icon);\n const iconColor = getIconColor(file.icon);\n \n return (\n handleFileClick(file)}\n data-testid={`file-grid-${file.id}`}\n >\n
\n );\n })}\n \n { e.stopPropagation(); setMenuOpenId(menuOpenId === file.id ? null : file.id); }}\n className=\"p-1 opacity-0 group-hover:opacity-100 hover:bg-accent rounded transition-all\"\n >\n
\n {file.name}
\n\n {formatBytes(file.size)}\n
\n