Implement ProjectFiles component
- Complete project files UI with file list, icons, search - Upload files via drag & drop or file picker with optional description - Preview images as thumbnails - Edit file descriptions inline - Download files by clicking filename - Delete files with confirmation - Show file size, mime type icons, uploader, upload date - Dark theme consistent with app design - File size formatting helper - Support for all common file types with appropriate icons
This commit is contained in:
parent
1671352ef9
commit
2586dc7e6a
@ -1,268 +1,331 @@
|
|||||||
import { useCallback, useEffect, useRef, useState } from "react";
|
import { useState, useEffect, useRef } from "react";
|
||||||
import type { Project, ProjectFile } from "@/lib/api";
|
import type { Project, ProjectFile } from "@/lib/api";
|
||||||
import {
|
import {
|
||||||
getProjectFiles,
|
getProjectFiles,
|
||||||
uploadProjectFile,
|
uploadProjectFile,
|
||||||
getProjectFileUrl,
|
|
||||||
updateProjectFile,
|
updateProjectFile,
|
||||||
deleteProjectFile,
|
deleteProjectFile,
|
||||||
|
getProjectFileUrl,
|
||||||
} from "@/lib/api";
|
} from "@/lib/api";
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
project: Project;
|
project: Project;
|
||||||
}
|
}
|
||||||
|
|
||||||
function formatSize(bytes: number): string {
|
function formatFileSize(bytes: number): string {
|
||||||
if (bytes < 1024) return `${bytes} B`;
|
if (bytes < 1024) return `${bytes} B`;
|
||||||
if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
|
if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
|
||||||
return `${(bytes / 1024 / 1024).toFixed(1)} MB`;
|
return `${(bytes / 1024 / 1024).toFixed(1)} MB`;
|
||||||
}
|
}
|
||||||
|
|
||||||
function fileIcon(mime: string | null, filename: string): string {
|
function getFileIcon(mimeType: string | null): string {
|
||||||
if (mime?.startsWith("image/")) return "🖼️";
|
if (!mimeType) return "📄";
|
||||||
if (mime?.startsWith("video/")) return "🎬";
|
if (mimeType.startsWith("image/")) return "📷";
|
||||||
if (mime?.startsWith("audio/")) return "🎵";
|
if (mimeType.startsWith("video/")) return "📹";
|
||||||
if (mime === "application/pdf") return "📕";
|
if (mimeType.startsWith("audio/")) return "🎵";
|
||||||
const ext = filename.split(".").pop()?.toLowerCase();
|
if (mimeType.includes("pdf")) return "📕";
|
||||||
if (["md", "txt", "rst"].includes(ext || "")) return "📝";
|
if (mimeType.includes("word") || mimeType.includes("document")) return "📝";
|
||||||
if (["json", "yaml", "yml", "toml", "xml"].includes(ext || "")) return "⚙️";
|
if (mimeType.includes("spreadsheet") || mimeType.includes("excel")) return "📊";
|
||||||
if (["py", "ts", "js", "rs", "go", "java", "c", "cpp"].includes(ext || "")) return "💻";
|
if (mimeType.includes("presentation") || mimeType.includes("powerpoint")) return "📋";
|
||||||
if (["zip", "tar", "gz", "rar", "7z"].includes(ext || "")) return "📦";
|
if (mimeType.includes("zip") || mimeType.includes("archive")) return "📦";
|
||||||
return "📄";
|
if (mimeType.includes("text")) return "📄";
|
||||||
|
return "📁";
|
||||||
|
}
|
||||||
|
|
||||||
|
function isImage(mimeType: string | null): boolean {
|
||||||
|
return !!mimeType && mimeType.startsWith("image/");
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function ProjectFiles({ project }: Props) {
|
export default function ProjectFiles({ project }: Props) {
|
||||||
const [files, setFiles] = useState<ProjectFile[]>([]);
|
const [files, setFiles] = useState<ProjectFile[]>([]);
|
||||||
const [loading, setLoading] = useState(true);
|
const [loading, setLoading] = useState(true);
|
||||||
const [search, setSearch] = useState("");
|
const [search, setSearch] = useState("");
|
||||||
const [uploading, setUploading] = useState(false);
|
const [uploadLoading, setUploadLoading] = useState(false);
|
||||||
const [dragOver, setDragOver] = useState(false);
|
const [editingDescription, setEditingDescription] = useState<string | null>(null);
|
||||||
const [editingId, setEditingId] = useState<string | null>(null);
|
const [editDescription, setEditDescription] = useState("");
|
||||||
const [editDesc, setEditDesc] = useState("");
|
const [isDragOver, setIsDragOver] = useState(false);
|
||||||
const [uploadDesc, setUploadDesc] = useState("");
|
|
||||||
const [showUploadDesc, setShowUploadDesc] = useState(false);
|
|
||||||
const fileInputRef = useRef<HTMLInputElement>(null);
|
|
||||||
|
|
||||||
const loadFiles = useCallback(async () => {
|
const fileInputRef = useRef<HTMLInputElement>(null);
|
||||||
|
const uploadDescriptionRef = useRef<HTMLInputElement>(null);
|
||||||
|
|
||||||
|
const loadFiles = async () => {
|
||||||
try {
|
try {
|
||||||
const data = await getProjectFiles(project.slug, search || undefined);
|
const result = await getProjectFiles(project.slug, search || undefined);
|
||||||
setFiles(data);
|
setFiles(result);
|
||||||
} catch (e) {
|
} catch (err) {
|
||||||
console.error("Failed to load files:", e);
|
console.error("Failed to load files:", err);
|
||||||
} finally {
|
} finally {
|
||||||
setLoading(false);
|
setLoading(false);
|
||||||
}
|
}
|
||||||
}, [project.slug, search]);
|
};
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
setLoading(true);
|
loadFiles();
|
||||||
const timer = setTimeout(loadFiles, search ? 300 : 0);
|
}, [project.slug, search]);
|
||||||
return () => clearTimeout(timer);
|
|
||||||
}, [loadFiles, search]);
|
|
||||||
|
|
||||||
const handleUpload = async (fileList: FileList) => {
|
const handleFileUpload = async (file: File, description?: string) => {
|
||||||
setUploading(true);
|
setUploadLoading(true);
|
||||||
try {
|
try {
|
||||||
for (const file of Array.from(fileList)) {
|
await uploadProjectFile(project.slug, file, description);
|
||||||
await uploadProjectFile(project.slug, file, uploadDesc || undefined);
|
await loadFiles(); // Refresh list
|
||||||
}
|
alert("Файл загружен успешно!");
|
||||||
setUploadDesc("");
|
} catch (err) {
|
||||||
setShowUploadDesc(false);
|
console.error("Upload failed:", err);
|
||||||
await loadFiles();
|
alert(`Ошибка загрузки: ${err}`);
|
||||||
} catch (e) {
|
|
||||||
console.error("Upload failed:", e);
|
|
||||||
} finally {
|
} finally {
|
||||||
setUploading(false);
|
setUploadLoading(false);
|
||||||
if (fileInputRef.current) fileInputRef.current.value = "";
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleDelete = async (f: ProjectFile) => {
|
const handleFileSelect = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||||
if (!confirm(`Удалить ${f.filename}?`)) return;
|
const file = event.target.files?.[0];
|
||||||
|
if (file) {
|
||||||
|
const description = uploadDescriptionRef.current?.value.trim();
|
||||||
|
handleFileUpload(file, description || undefined);
|
||||||
|
event.target.value = "";
|
||||||
|
if (uploadDescriptionRef.current) {
|
||||||
|
uploadDescriptionRef.current.value = "";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleDrop = (event: React.DragEvent) => {
|
||||||
|
event.preventDefault();
|
||||||
|
setIsDragOver(false);
|
||||||
|
const file = event.dataTransfer.files[0];
|
||||||
|
if (file) {
|
||||||
|
const description = uploadDescriptionRef.current?.value.trim();
|
||||||
|
handleFileUpload(file, description || undefined);
|
||||||
|
if (uploadDescriptionRef.current) {
|
||||||
|
uploadDescriptionRef.current.value = "";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleDragOver = (event: React.DragEvent) => {
|
||||||
|
event.preventDefault();
|
||||||
|
setIsDragOver(true);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleDragLeave = (event: React.DragEvent) => {
|
||||||
|
event.preventDefault();
|
||||||
|
setIsDragOver(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleDownload = (file: ProjectFile) => {
|
||||||
|
const url = getProjectFileUrl(project.slug, file.id);
|
||||||
|
window.open(url, "_blank");
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleEditDescription = (file: ProjectFile) => {
|
||||||
|
setEditingDescription(file.id);
|
||||||
|
setEditDescription(file.description || "");
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSaveDescription = async (file: ProjectFile) => {
|
||||||
try {
|
try {
|
||||||
await deleteProjectFile(project.slug, f.id);
|
await updateProjectFile(project.slug, file.id, {
|
||||||
setFiles((prev) => prev.filter((x) => x.id !== f.id));
|
description: editDescription.trim() || undefined,
|
||||||
} catch (e) {
|
});
|
||||||
console.error("Delete failed:", e);
|
await loadFiles();
|
||||||
|
setEditingDescription(null);
|
||||||
|
} catch (err) {
|
||||||
|
console.error("Failed to update description:", err);
|
||||||
|
alert(`Ошибка обновления: ${err}`);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleSaveDesc = async (f: ProjectFile) => {
|
const handleDeleteFile = async (file: ProjectFile) => {
|
||||||
|
if (!confirm(`Удалить файл "${file.filename}"?`)) return;
|
||||||
|
|
||||||
try {
|
try {
|
||||||
const updated = await updateProjectFile(project.slug, f.id, { description: editDesc });
|
await deleteProjectFile(project.slug, file.id);
|
||||||
setFiles((prev) => prev.map((x) => (x.id === f.id ? updated : x)));
|
await loadFiles();
|
||||||
setEditingId(null);
|
alert("Файл удален!");
|
||||||
} catch (e) {
|
} catch (err) {
|
||||||
console.error("Update failed:", e);
|
console.error("Failed to delete file:", err);
|
||||||
|
alert(`Ошибка удаления: ${err}`);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleDrop = (e: React.DragEvent) => {
|
if (loading) {
|
||||||
e.preventDefault();
|
return (
|
||||||
setDragOver(false);
|
<div className="flex items-center justify-center h-full">
|
||||||
if (e.dataTransfer.files.length) handleUpload(e.dataTransfer.files);
|
<div className="text-[var(--muted)]">Загрузка файлов...</div>
|
||||||
};
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div className="flex flex-col h-full p-4 space-y-4">
|
||||||
className={`flex flex-col h-full ${dragOver ? "ring-2 ring-[var(--accent)] ring-inset" : ""}`}
|
{/* Header with search */}
|
||||||
onDragOver={(e) => { e.preventDefault(); setDragOver(true); }}
|
<div className="flex items-center space-x-4">
|
||||||
onDragLeave={() => setDragOver(false)}
|
<div className="flex-1">
|
||||||
onDrop={handleDrop}
|
|
||||||
>
|
|
||||||
{/* Header */}
|
|
||||||
<div className="px-6 py-4 border-b border-[var(--border)] flex flex-col gap-3">
|
|
||||||
<div className="flex items-center gap-3">
|
|
||||||
<input
|
<input
|
||||||
|
type="text"
|
||||||
|
placeholder="Поиск файлов..."
|
||||||
value={search}
|
value={search}
|
||||||
onChange={(e) => setSearch(e.target.value)}
|
onChange={(e) => setSearch(e.target.value)}
|
||||||
placeholder="🔍 Поиск по имени..."
|
className="w-full px-3 py-2 bg-[var(--surface)] border border-[var(--border)] rounded text-[var(--fg)] placeholder-[var(--muted)] focus:outline-none focus:border-[var(--accent)]"
|
||||||
className="flex-1 bg-[var(--bg)] border border-[var(--border)] rounded-lg px-4 py-2 text-sm outline-none focus:border-[var(--accent)]"
|
|
||||||
/>
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="text-sm text-[var(--muted)]">
|
||||||
|
{files.length} файл{files.length === 1 ? "" : files.length < 5 ? "а" : "ов"}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Upload area */}
|
||||||
|
<div
|
||||||
|
className={`border-2 border-dashed rounded-lg p-6 text-center transition-colors ${
|
||||||
|
isDragOver
|
||||||
|
? "border-[var(--accent)] bg-[var(--accent)]/10"
|
||||||
|
: "border-[var(--border)] hover:border-[var(--muted)]"
|
||||||
|
}`}
|
||||||
|
onDrop={handleDrop}
|
||||||
|
onDragOver={handleDragOver}
|
||||||
|
onDragLeave={handleDragLeave}
|
||||||
|
>
|
||||||
|
{uploadLoading ? (
|
||||||
|
<div className="text-[var(--muted)]">Загрузка...</div>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<div className="text-3xl mb-2">📁</div>
|
||||||
|
<div className="text-[var(--fg)] mb-2">Перетащите файл сюда или</div>
|
||||||
|
<div className="flex items-center justify-center space-x-4">
|
||||||
|
<input
|
||||||
|
ref={uploadDescriptionRef}
|
||||||
|
type="text"
|
||||||
|
placeholder="Описание (необязательно)"
|
||||||
|
className="px-3 py-1 bg-[var(--surface)] border border-[var(--border)] rounded text-sm text-[var(--fg)] placeholder-[var(--muted)] focus:outline-none focus:border-[var(--accent)]"
|
||||||
|
/>
|
||||||
|
<button
|
||||||
|
onClick={() => fileInputRef.current?.click()}
|
||||||
|
className="px-4 py-2 bg-[var(--accent)] text-white rounded hover:bg-[var(--accent)]/80 transition-colors"
|
||||||
|
>
|
||||||
|
Выбрать файл
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div className="text-xs text-[var(--muted)] mt-2">
|
||||||
|
Максимальный размер: 50 МБ
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
<input
|
<input
|
||||||
ref={fileInputRef}
|
ref={fileInputRef}
|
||||||
type="file"
|
type="file"
|
||||||
multiple
|
onChange={handleFileSelect}
|
||||||
className="hidden"
|
className="hidden"
|
||||||
onChange={(e) => e.target.files && handleUpload(e.target.files)}
|
|
||||||
/>
|
/>
|
||||||
<button
|
|
||||||
onClick={() => setShowUploadDesc(!showUploadDesc)}
|
|
||||||
className="text-xs text-[var(--muted)] hover:text-[var(--fg)] transition-colors"
|
|
||||||
title="Добавить описание"
|
|
||||||
>
|
|
||||||
✏️
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
onClick={() => fileInputRef.current?.click()}
|
|
||||||
disabled={uploading}
|
|
||||||
className="px-4 py-2 bg-[var(--accent)] text-white rounded-lg text-sm hover:opacity-90 disabled:opacity-50 shrink-0"
|
|
||||||
>
|
|
||||||
{uploading ? "⏳" : "📎 Загрузить"}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
{showUploadDesc && (
|
|
||||||
<input
|
|
||||||
value={uploadDesc}
|
|
||||||
onChange={(e) => setUploadDesc(e.target.value)}
|
|
||||||
placeholder="Описание для загружаемых файлов (опционально)"
|
|
||||||
className="bg-[var(--bg)] border border-[var(--border)] rounded-lg px-4 py-2 text-sm outline-none focus:border-[var(--accent)]"
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* File list */}
|
{/* Files list */}
|
||||||
<div className="flex-1 overflow-y-auto px-6 py-4">
|
<div className="flex-1 overflow-auto">
|
||||||
{loading && (
|
{files.length === 0 ? (
|
||||||
<div className="text-center text-sm text-[var(--muted)] py-8">Загрузка...</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{!loading && files.length === 0 && (
|
|
||||||
<div className="flex flex-col items-center justify-center h-full text-[var(--muted)]">
|
<div className="flex flex-col items-center justify-center h-full text-[var(--muted)]">
|
||||||
<div className="text-4xl mb-4">📁</div>
|
<div className="text-4xl mb-4">📂</div>
|
||||||
<div className="text-sm">Нет файлов</div>
|
<div className="text-sm">Файлов пока нет</div>
|
||||||
<div className="text-xs mt-1">Перетащите файлы сюда или нажмите «Загрузить»</div>
|
<div className="text-xs mt-1">Загрузите первый файл проекта</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
) : (
|
||||||
|
<div className="space-y-2">
|
||||||
{!loading && files.length > 0 && (
|
{files.map((file) => (
|
||||||
<div className="space-y-1">
|
|
||||||
{files.map((f) => {
|
|
||||||
const url = getProjectFileUrl(project.slug, f.id);
|
|
||||||
const isImage = f.mime_type?.startsWith("image/");
|
|
||||||
return (
|
|
||||||
<div
|
<div
|
||||||
key={f.id}
|
key={file.id}
|
||||||
className="flex items-center gap-3 px-3 py-2 rounded-lg hover:bg-white/5 group"
|
className="flex items-center p-3 bg-[var(--surface)] border border-[var(--border)] rounded hover:bg-[var(--surface)]/80 transition-colors"
|
||||||
>
|
>
|
||||||
{/* Icon / thumbnail */}
|
{/* File icon & preview */}
|
||||||
<div className="shrink-0 w-8 text-center">
|
<div className="w-12 h-12 flex items-center justify-center bg-[var(--bg)] rounded mr-3">
|
||||||
{isImage ? (
|
{isImage(file.mime_type) ? (
|
||||||
<img src={url} alt="" className="w-8 h-8 rounded object-cover" />
|
<img
|
||||||
) : (
|
src={getProjectFileUrl(project.slug, file.id)}
|
||||||
<span className="text-lg">{fileIcon(f.mime_type, f.filename)}</span>
|
alt={file.filename}
|
||||||
)}
|
className="w-full h-full object-cover rounded"
|
||||||
</div>
|
loading="lazy"
|
||||||
|
|
||||||
{/* Info */}
|
|
||||||
<div className="flex-1 min-w-0">
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<a
|
|
||||||
href={url}
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
className="text-sm font-medium text-[var(--fg)] hover:text-[var(--accent)] truncate"
|
|
||||||
>
|
|
||||||
{f.filename}
|
|
||||||
</a>
|
|
||||||
<span className="text-xs text-[var(--muted)]">{formatSize(f.size)}</span>
|
|
||||||
</div>
|
|
||||||
{editingId === f.id ? (
|
|
||||||
<div className="flex items-center gap-1 mt-1">
|
|
||||||
<input
|
|
||||||
value={editDesc}
|
|
||||||
onChange={(e) => setEditDesc(e.target.value)}
|
|
||||||
onKeyDown={(e) => e.key === "Enter" && handleSaveDesc(f)}
|
|
||||||
className="flex-1 bg-[var(--bg)] border border-[var(--border)] rounded px-2 py-0.5 text-xs outline-none focus:border-[var(--accent)]"
|
|
||||||
autoFocus
|
|
||||||
/>
|
/>
|
||||||
<button onClick={() => handleSaveDesc(f)} className="text-xs text-[var(--accent)]">✓</button>
|
|
||||||
<button onClick={() => setEditingId(null)} className="text-xs text-[var(--muted)]">✕</button>
|
|
||||||
</div>
|
|
||||||
) : (
|
) : (
|
||||||
f.description && (
|
<span className="text-2xl">{getFileIcon(file.mime_type)}</span>
|
||||||
<div className="text-xs text-[var(--muted)] truncate mt-0.5">{f.description}</div>
|
|
||||||
)
|
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Uploader */}
|
{/* File info */}
|
||||||
<div className="text-xs text-[var(--muted)] hidden md:block shrink-0">
|
<div className="flex-1 min-w-0">
|
||||||
{f.uploader?.name}
|
<div className="flex items-center space-x-2 mb-1">
|
||||||
|
<button
|
||||||
|
onClick={() => handleDownload(file)}
|
||||||
|
className="text-[var(--fg)] hover:text-[var(--accent)] font-medium truncate text-left"
|
||||||
|
>
|
||||||
|
{file.filename}
|
||||||
|
</button>
|
||||||
|
<span className="text-xs text-[var(--muted)] shrink-0">
|
||||||
|
{formatFileSize(file.size)}
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Date */}
|
{/* Description */}
|
||||||
<div className="text-xs text-[var(--muted)] hidden md:block shrink-0">
|
{editingDescription === file.id ? (
|
||||||
{new Date(f.created_at).toLocaleDateString("ru-RU")}
|
<div className="flex items-center space-x-2 mt-1">
|
||||||
|
<input
|
||||||
|
value={editDescription}
|
||||||
|
onChange={(e) => setEditDescription(e.target.value)}
|
||||||
|
placeholder="Описание файла..."
|
||||||
|
className="flex-1 px-2 py-1 text-sm bg-[var(--bg)] border border-[var(--border)] rounded text-[var(--fg)] placeholder-[var(--muted)] focus:outline-none focus:border-[var(--accent)]"
|
||||||
|
autoFocus
|
||||||
|
onKeyDown={(e) => {
|
||||||
|
if (e.key === "Enter") {
|
||||||
|
handleSaveDescription(file);
|
||||||
|
} else if (e.key === "Escape") {
|
||||||
|
setEditingDescription(null);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<button
|
||||||
|
onClick={() => handleSaveDescription(file)}
|
||||||
|
className="text-green-400 hover:text-green-300 text-sm"
|
||||||
|
>
|
||||||
|
✓
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => setEditingDescription(null)}
|
||||||
|
className="text-[var(--muted)] hover:text-[var(--fg)] text-sm"
|
||||||
|
>
|
||||||
|
✕
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="text-sm text-[var(--muted)]">
|
||||||
|
{file.description || "Без описания"}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="flex items-center space-x-2 mt-1 text-xs text-[var(--muted)]">
|
||||||
|
<span>Загрузил: {file.uploader?.name || "Unknown"}</span>
|
||||||
|
<span>•</span>
|
||||||
|
<span>{new Date(file.created_at).toLocaleString("ru")}</span>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Actions */}
|
{/* Actions */}
|
||||||
<div className="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity shrink-0">
|
<div className="flex items-center space-x-1 ml-2">
|
||||||
<button
|
<button
|
||||||
onClick={() => { setEditingId(f.id); setEditDesc(f.description || ""); }}
|
onClick={() => handleEditDescription(file)}
|
||||||
className="text-xs text-[var(--muted)] hover:text-[var(--fg)] p-1"
|
className="p-1 text-[var(--muted)] hover:text-[var(--fg)] transition-colors"
|
||||||
title="Описание"
|
title="Редактировать описание"
|
||||||
>
|
>
|
||||||
✏️
|
✏️
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
onClick={() => handleDelete(f)}
|
onClick={() => handleDeleteFile(file)}
|
||||||
className="text-xs text-[var(--muted)] hover:text-red-400 p-1"
|
className="p-1 text-[var(--muted)] hover:text-red-400 transition-colors"
|
||||||
title="Удалить"
|
title="Удалить файл"
|
||||||
>
|
>
|
||||||
🗑️
|
🗑️
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
))}
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Drag overlay */}
|
|
||||||
{dragOver && (
|
|
||||||
<div className="fixed inset-0 bg-black/40 flex items-center justify-center z-50 pointer-events-none">
|
|
||||||
<div className="text-white text-lg font-medium">📁 Отпустите для загрузки</div>
|
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Footer stats */}
|
|
||||||
{files.length > 0 && (
|
|
||||||
<div className="px-6 py-2 border-t border-[var(--border)] text-xs text-[var(--muted)]">
|
|
||||||
{files.length} файл{files.length === 1 ? "" : files.length < 5 ? "а" : "ов"} · {formatSize(files.reduce((s, f) => s + f.size, 0))}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
Loading…
Reference in New Issue
Block a user