867 lines
31 KiB
TypeScript
867 lines
31 KiB
TypeScript
"use client";
|
|
import React, { useState, useMemo, useEffect } from 'react';
|
|
import {
|
|
Search, Download, Trash2, Share, Star,
|
|
MoreVertical, Home, ChevronRight, ChevronLeft,
|
|
Folder, File, Image, Video, Music, FileText, Code, Database,
|
|
Clock, Users, Eye, Edit3, Copy, Scissors,
|
|
FolderPlus, Info, Lock, Menu,
|
|
ExternalLink, History, X
|
|
} from 'lucide-react';
|
|
import { cn } from "@/lib/utils";
|
|
import Footer from '../footer';
|
|
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Separator } from '@/components/ui/separator';
|
|
import { ScrollArea } from '@/components/ui/scroll-area';
|
|
import { ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuSeparator, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger } from '@/components/ui/context-menu';
|
|
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
|
|
import {
|
|
ResizableHandle,
|
|
ResizablePanel,
|
|
ResizablePanelGroup,
|
|
} from "@/components/ui/resizable";
|
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
|
|
import { Input } from '@/components/ui/input';
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
|
import { Sheet, SheetContent, SheetTrigger } from '@/components/ui/sheet';
|
|
|
|
// Simple date formatting functions
|
|
const formatDate = (dateString: string) => {
|
|
const date = new Date(dateString);
|
|
return date.toLocaleDateString('en-US', {
|
|
month: 'short',
|
|
day: 'numeric',
|
|
year: 'numeric'
|
|
});
|
|
};
|
|
|
|
const formatDateTime = (dateString: string) => {
|
|
const date = new Date(dateString);
|
|
return date.toLocaleString('en-US', {
|
|
month: 'short',
|
|
day: 'numeric',
|
|
year: 'numeric',
|
|
hour: 'numeric',
|
|
minute: '2-digit',
|
|
hour12: true
|
|
});
|
|
};
|
|
|
|
const formatDistanceToNow = (date: string) => {
|
|
const now = new Date();
|
|
const diffMs = now.getTime() - new Date(date).getTime();
|
|
const diffMinutes = Math.floor(diffMs / (1000 * 60));
|
|
const diffHours = Math.floor(diffMs / (1000 * 60 * 60));
|
|
const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24));
|
|
|
|
if (diffMinutes < 1) return 'now';
|
|
if (diffMinutes < 60) return `${diffMinutes}m ago`;
|
|
if (diffHours < 24) return `${diffHours}h ago`;
|
|
if (diffDays < 7) return `${diffDays}d ago`;
|
|
return formatDate(date);
|
|
};
|
|
|
|
// File system data
|
|
const fileSystemData = {
|
|
"": {
|
|
id: "root",
|
|
name: "My Drive",
|
|
path: "",
|
|
is_dir: true,
|
|
children: ["projects", "documents", "media", "shared"]
|
|
},
|
|
"projects": {
|
|
id: "projects",
|
|
name: "Projects",
|
|
path: "projects",
|
|
is_dir: true,
|
|
modified: "2025-01-15T10:30:00Z",
|
|
starred: true,
|
|
shared: false,
|
|
children: ["web-apps", "mobile-apps", "ai-research"]
|
|
},
|
|
"projects/web-apps": {
|
|
id: "web-apps",
|
|
name: "Web Applications",
|
|
path: "projects/web-apps",
|
|
is_dir: true,
|
|
modified: "2025-01-14T16:45:00Z",
|
|
starred: false,
|
|
shared: true,
|
|
children: ["dashboard-pro", "package.json", "README.md"]
|
|
},
|
|
"projects/web-apps/package.json": {
|
|
id: "package-json",
|
|
name: "package.json",
|
|
path: "projects/web-apps/package.json",
|
|
is_dir: false,
|
|
size: 2048,
|
|
type: "json",
|
|
modified: "2025-01-13T14:20:00Z",
|
|
starred: false,
|
|
shared: false
|
|
},
|
|
"projects/web-apps/README.md": {
|
|
id: "readme-md",
|
|
name: "README.md",
|
|
path: "projects/web-apps/README.md",
|
|
is_dir: false,
|
|
size: 5120,
|
|
type: "markdown",
|
|
modified: "2025-01-12T09:30:00Z",
|
|
starred: false,
|
|
shared: true
|
|
},
|
|
"documents": {
|
|
id: "documents",
|
|
name: "Documents",
|
|
path: "documents",
|
|
is_dir: true,
|
|
modified: "2025-01-14T12:00:00Z",
|
|
starred: false,
|
|
shared: false,
|
|
children: ["proposals", "Q1-Strategy.pdf", "Budget-2025.xlsx"]
|
|
},
|
|
"documents/Q1-Strategy.pdf": {
|
|
id: "q1-strategy",
|
|
name: "Q1 Strategy.pdf",
|
|
path: "documents/Q1-Strategy.pdf",
|
|
is_dir: false,
|
|
size: 1048576,
|
|
type: "pdf",
|
|
modified: "2025-01-10T15:30:00Z",
|
|
starred: true,
|
|
shared: true
|
|
},
|
|
"media": {
|
|
id: "media",
|
|
name: "Media",
|
|
path: "media",
|
|
is_dir: true,
|
|
modified: "2025-01-13T18:45:00Z",
|
|
starred: false,
|
|
shared: false,
|
|
children: ["photos", "videos", "vacation-2024.jpg"]
|
|
},
|
|
"media/vacation-2024.jpg": {
|
|
id: "vacation-photo",
|
|
name: "vacation-2024.jpg",
|
|
path: "media/vacation-2024.jpg",
|
|
is_dir: false,
|
|
size: 3145728,
|
|
type: "image",
|
|
modified: "2024-12-25T20:00:00Z",
|
|
starred: true,
|
|
shared: false
|
|
},
|
|
"shared": {
|
|
id: "shared",
|
|
name: "Shared",
|
|
path: "shared",
|
|
is_dir: true,
|
|
modified: "2025-01-12T11:20:00Z",
|
|
starred: false,
|
|
shared: true,
|
|
children: ["team-resources", "client-files"]
|
|
}
|
|
};
|
|
|
|
const getFileIcon = (item: any) => {
|
|
if (item.is_dir) {
|
|
return <Folder className="w-4 h-4 text-yellow-500" />;
|
|
}
|
|
|
|
const iconMap = {
|
|
pdf: <FileText className="w-4 h-4 text-red-500" />,
|
|
xlsx: <Database className="w-4 h-4 text-green-600" />,
|
|
json: <Code className="w-4 h-4 text-yellow-600" />,
|
|
markdown: <Edit3 className="w-4 h-4 text-purple-500" />,
|
|
md: <Edit3 className="w-4 h-4 text-purple-500" />,
|
|
jpg: <Image className="w-4 h-4 text-pink-500" />,
|
|
jpeg: <Image className="w-4 h-4 text-pink-500" />,
|
|
png: <Image className="w-4 h-4 text-pink-500" />,
|
|
mp4: <Video className="w-4 h-4 text-red-600" />,
|
|
mp3: <Music className="w-4 h-4 text-green-600" />
|
|
};
|
|
|
|
return iconMap[item.type] || <File className="w-4 h-4 text-muted-foreground" />;
|
|
};
|
|
|
|
const formatFileSize = (bytes: number) => {
|
|
if (!bytes) return '';
|
|
const sizes = ['B', 'KB', 'MB', 'GB'];
|
|
const i = Math.floor(Math.log(bytes) / Math.log(1024));
|
|
return `${(bytes / Math.pow(1024, i)).toFixed(1)} ${sizes[i]}`;
|
|
};
|
|
|
|
const FileContextMenu = ({ file, children, onAction }: any) => {
|
|
const contextMenuItems = [
|
|
{ icon: Eye, label: "Open", action: "open" },
|
|
{ icon: Download, label: "Download", action: "download" },
|
|
{ separator: true },
|
|
{
|
|
icon: Share, label: "Share", action: "share", submenu: [
|
|
{ icon: Users, label: "Share with team", action: "share-team" },
|
|
{ icon: ExternalLink, label: "Get link", action: "get-link" },
|
|
{ icon: Lock, label: "Restrict access", action: "restrict" },
|
|
]
|
|
},
|
|
{ icon: Star, label: file?.starred ? "Remove from starred" : "Add to starred", action: "star" },
|
|
{ separator: true },
|
|
{ icon: Copy, label: "Copy", action: "copy" },
|
|
{ icon: Scissors, label: "Cut", action: "cut" },
|
|
{ icon: Edit3, label: "Rename", action: "rename" },
|
|
{ separator: true },
|
|
{
|
|
icon: FolderPlus, label: "Move to", action: "move", submenu: [
|
|
{ icon: Folder, label: "Documents", action: "move-documents" },
|
|
{ icon: Folder, label: "Projects", action: "move-projects" },
|
|
{ icon: Folder, label: "Choose folder...", action: "move-choose" },
|
|
]
|
|
},
|
|
{ icon: Copy, label: "Make a copy", action: "duplicate" },
|
|
{ separator: true },
|
|
{ icon: History, label: "Version history", action: "history" },
|
|
{ icon: Info, label: "Details", action: "details" },
|
|
{ separator: true },
|
|
{ icon: Trash2, label: "Move to trash", action: "trash", destructive: true },
|
|
];
|
|
|
|
const renderContextMenuItem = (item: any, index: number) => {
|
|
if (item.separator) {
|
|
return <ContextMenuSeparator key={index} />;
|
|
}
|
|
|
|
if (item.submenu) {
|
|
return (
|
|
<ContextMenuSub key={index}>
|
|
<ContextMenuSubTrigger className="flex items-center gap-2">
|
|
<item.icon className="w-4 h-4" />
|
|
{item.label}
|
|
</ContextMenuSubTrigger>
|
|
<ContextMenuSubContent className="bg-popover">
|
|
{item.submenu.map((subItem: any, subIndex: number) => (
|
|
<ContextMenuItem
|
|
key={subIndex}
|
|
onClick={() => onAction(subItem.action, file)}
|
|
className="flex items-center gap-2"
|
|
>
|
|
<subItem.icon className="w-4 h-4" />
|
|
{subItem.label}
|
|
</ContextMenuItem>
|
|
))}
|
|
</ContextMenuSubContent>
|
|
</ContextMenuSub>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<ContextMenuItem
|
|
key={index}
|
|
onClick={() => onAction(item.action, file)}
|
|
className={cn(
|
|
"flex items-center gap-2",
|
|
item.destructive && "text-destructive focus:text-destructive"
|
|
)}
|
|
>
|
|
<item.icon className="w-4 h-4" />
|
|
{item.label}
|
|
</ContextMenuItem>
|
|
);
|
|
};
|
|
|
|
return (
|
|
<ContextMenu>
|
|
<ContextMenuTrigger asChild>
|
|
{children}
|
|
</ContextMenuTrigger>
|
|
<ContextMenuContent className="w-56 bg-popover">
|
|
{contextMenuItems.map(renderContextMenuItem)}
|
|
</ContextMenuContent>
|
|
</ContextMenu>
|
|
);
|
|
};
|
|
|
|
const TreeLine = ({ depth }: { depth: number }) => {
|
|
return (
|
|
<svg width={depth * 16} height="24" viewBox={`0 0 ${depth * 16} 24`} className="inline-block">
|
|
{Array.from({ length: depth }).map((_, i) => (
|
|
<line key={i} x1={i * 16 + 8} y1="0" x2={i * 16 + 8} y2="24" stroke="#d1d5db" strokeWidth="1" />
|
|
))}
|
|
</svg>
|
|
);
|
|
};
|
|
|
|
const FolderTree = ({ onSelect, selectedPath = "", isCollapsed = false, isMobile = false }: any) => {
|
|
const [expanded, setExpanded] = useState({ "": true, "projects": true });
|
|
|
|
const toggleExpand = (path: string) => {
|
|
setExpanded(prev => ({ ...prev, [path]: !prev[path] }));
|
|
onSelect(path);
|
|
};
|
|
|
|
const navLinks = [
|
|
{ title: "My Drive", path: "", icon: Home },
|
|
{ title: "Shared", path: "shared", icon: Users },
|
|
{ title: "Starred", path: "starred", icon: Star },
|
|
{ title: "Recent", path: "recent", icon: Clock },
|
|
{ title: "Trash", path: "trash", icon: Trash2 },
|
|
];
|
|
|
|
const renderTreeItem = (path: string, level = 0) => {
|
|
const item = fileSystemData[path];
|
|
if (!item || !item.is_dir) return null;
|
|
|
|
const isExpanded = expanded[path];
|
|
const isSelected = selectedPath === path;
|
|
|
|
return (
|
|
<div key={item.id}>
|
|
<button
|
|
onClick={() => toggleExpand(path)}
|
|
className={cn(
|
|
"flex items-center w-full px-2 py-1.5 text-sm rounded-md hover:bg-accent transition-colors",
|
|
isSelected && "bg-accent",
|
|
isCollapsed ? "justify-center" : "justify-start"
|
|
)}
|
|
>
|
|
{!isCollapsed && (
|
|
<>
|
|
<TreeLine depth={level} />
|
|
<ChevronRight className={cn("w-4 h-4 mr-1 transition-transform", isExpanded && "rotate-90")} />
|
|
{getFileIcon(item)}
|
|
<span className="ml-2 truncate">{item.name}</span>
|
|
{item.starred && <Star className="w-3 h-3 ml-auto text-yellow-500 fill-current" />}
|
|
</>
|
|
)}
|
|
{isCollapsed && getFileIcon(item)}
|
|
</button>
|
|
{!isCollapsed && isExpanded && item.children && (
|
|
<div className="ml-4">
|
|
{item.children.map((childPath: string) => {
|
|
const fullPath = path ? `${path}/${childPath}` : childPath;
|
|
return renderTreeItem(fullPath, level + 1);
|
|
})}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
return (
|
|
<div className={cn("flex flex-col h-full bg-background border-r border-border", isMobile ? "w-full" : "")}>
|
|
<div className={cn("p-2", isCollapsed ? "px-1" : "")}>
|
|
<nav className="space-y-1">
|
|
{navLinks.map((link) => (
|
|
isCollapsed ? (
|
|
<Tooltip key={link.path} delayDuration={0}>
|
|
<TooltipTrigger asChild>
|
|
<Button
|
|
variant={selectedPath === link.path ? "default" : "ghost"}
|
|
size="icon"
|
|
className={cn(
|
|
"w-9 h-9 bg-background hover:bg-accent",
|
|
selectedPath === link.path ? "bg-primary text-primary-foreground hover:bg-primary/90" : "hover:bg-secondary hover:text-secondary-foreground"
|
|
)}
|
|
onClick={() => onSelect(link.path)}
|
|
>
|
|
<link.icon className="h-4 w-4" />
|
|
</Button>
|
|
</TooltipTrigger>
|
|
<TooltipContent side="right" className="bg-popover">{link.title}</TooltipContent>
|
|
</Tooltip>
|
|
) : (
|
|
<Button
|
|
key={link.path}
|
|
variant={selectedPath === link.path ? "default" : "ghost"}
|
|
className={cn(
|
|
"w-full justify-start bg-background hover:bg-accent",
|
|
selectedPath === link.path ? "bg-primary text-primary-foreground hover:bg-primary/90" : "hover:bg-secondary hover:text-secondary-foreground"
|
|
)}
|
|
onClick={() => onSelect(link.path)}
|
|
>
|
|
<link.icon className="mr-2 h-4 w-4" />
|
|
{link.title}
|
|
</Button>
|
|
)
|
|
))}
|
|
</nav>
|
|
</div>
|
|
{!isCollapsed && (
|
|
<>
|
|
<Separator className="bg-border" />
|
|
<ScrollArea className="flex-1 p-2">
|
|
{renderTreeItem("")}
|
|
</ScrollArea>
|
|
</>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const FileList = ({ path, searchTerm, filterType, selectedFile, setSelectedFile, onContextAction, isMobile }: any) => {
|
|
const files = useMemo(() => {
|
|
const currentItem = fileSystemData[path];
|
|
if (!currentItem || !currentItem.is_dir || !currentItem.children) return [];
|
|
|
|
let items = currentItem.children.map((childName: string) => {
|
|
const childPath = path ? `${path}/${childName}` : childName;
|
|
return fileSystemData[childPath];
|
|
}).filter(Boolean);
|
|
|
|
if (searchTerm) {
|
|
items = items.filter((item: any) =>
|
|
item.name.toLowerCase().includes(searchTerm.toLowerCase())
|
|
);
|
|
}
|
|
|
|
if (filterType && filterType !== 'all') {
|
|
items = items.filter((item: any) => {
|
|
if (filterType === 'folders') return item.is_dir;
|
|
if (filterType === 'files') return !item.is_dir;
|
|
if (filterType === 'starred') return item.starred;
|
|
return true;
|
|
});
|
|
}
|
|
|
|
return items.sort((a: any, b: any) => {
|
|
if (a.is_dir && !b.is_dir) return -1;
|
|
if (!a.is_dir && b.is_dir) return 1;
|
|
return a.name.localeCompare(b.name);
|
|
});
|
|
}, [path, searchTerm, filterType]);
|
|
|
|
return (
|
|
<ScrollArea className={cn("h-full bg-background", isMobile ? "w-full" : "")}>
|
|
<div className="flex flex-col">
|
|
{files.map((item: any) => (
|
|
<FileContextMenu
|
|
key={item.id}
|
|
file={item}
|
|
onAction={onContextAction}
|
|
>
|
|
<button
|
|
className={cn(
|
|
"flex items-center gap-3 p-3 text-left text-sm transition-all hover:bg-accent border-b border-border",
|
|
selectedFile?.id === item.id && "bg-accent"
|
|
)}
|
|
onClick={() => setSelectedFile(item)}
|
|
>
|
|
<div className="flex items-center gap-3 flex-1 min-w-0">
|
|
{getFileIcon(item)}
|
|
<div className="flex-1 min-w-0">
|
|
<div className="flex items-center gap-2">
|
|
<div className="font-medium truncate">{item.name}</div>
|
|
{item.starred && <Star className="w-3 h-3 text-yellow-500 fill-current" />}
|
|
{item.shared && <Users className="w-3 h-3 text-blue-500" />}
|
|
</div>
|
|
<div className="text-xs text-muted-foreground">
|
|
{item.is_dir ? 'Folder' : formatFileSize(item.size)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="text-xs text-muted-foreground">
|
|
{formatDistanceToNow(item.modified)}
|
|
</div>
|
|
</button>
|
|
</FileContextMenu>
|
|
))}
|
|
</div>
|
|
</ScrollArea>
|
|
);
|
|
};
|
|
|
|
const FileDisplay = ({ file, isMobile }: any) => {
|
|
if (!file) {
|
|
return (
|
|
<div className={cn("flex flex-col items-center justify-center h-full text-center text-muted-foreground bg-background", isMobile ? "w-full" : "")}>
|
|
<File className="w-12 h-12 mb-4" />
|
|
<div className="text-lg font-medium">No file selected</div>
|
|
<div className="text-sm">Select a file to view details</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className={cn("flex flex-col h-full bg-background", isMobile ? "w-full" : "")}>
|
|
<div className="flex items-center p-2 bg-secondary border-b border-border">
|
|
<div className="flex items-center gap-2">
|
|
<TooltipProvider>
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<Button variant="ghost" size="icon" className="hover:bg-accent">
|
|
<Download className="h-4 w-4" />
|
|
</Button>
|
|
</TooltipTrigger>
|
|
<TooltipContent className="bg-popover">Download</TooltipContent>
|
|
</Tooltip>
|
|
</TooltipProvider>
|
|
<TooltipProvider>
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<Button variant="ghost" size="icon" className="hover:bg-accent">
|
|
<Share className="h-4 w-4" />
|
|
</Button>
|
|
</TooltipTrigger>
|
|
<TooltipContent className="bg-popover">Share</TooltipContent>
|
|
</Tooltip>
|
|
</TooltipProvider>
|
|
<TooltipProvider>
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<Button variant="ghost" size="icon" className="hover:bg-accent">
|
|
<Star className="h-4 w-4" />
|
|
</Button>
|
|
</TooltipTrigger>
|
|
<TooltipContent className="bg-popover">Star</TooltipContent>
|
|
</Tooltip>
|
|
</TooltipProvider>
|
|
</div>
|
|
<div className="ml-auto">
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button variant="ghost" size="icon" className="hover:bg-accent">
|
|
<MoreVertical className="h-4 w-4" />
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="end" className="bg-popover">
|
|
<DropdownMenuItem>Rename</DropdownMenuItem>
|
|
<DropdownMenuItem>Make a copy</DropdownMenuItem>
|
|
<DropdownMenuItem className="text-destructive">Move to trash</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</div>
|
|
</div>
|
|
<Separator className="bg-border" />
|
|
<div className="flex-1 flex-col">
|
|
<div className="flex items-start gap-4 p-4">
|
|
<div className="p-2 rounded-lg bg-secondary">
|
|
{getFileIcon(file)}
|
|
</div>
|
|
<div className="flex-1 min-w-0">
|
|
<div className="font-semibold">{file.name}</div>
|
|
<div className="text-sm text-muted-foreground">
|
|
{file.is_dir ? 'Folder' : `${file.type?.toUpperCase() || 'File'} • ${formatFileSize(file.size)}`}
|
|
</div>
|
|
</div>
|
|
{file.modified && (
|
|
<div className="text-xs text-muted-foreground">
|
|
{formatDate(file.modified)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
<Separator className="bg-border" />
|
|
<div className="p-4 space-y-4">
|
|
<div>
|
|
<div className="text-sm font-medium">Location</div>
|
|
<div className="text-sm text-muted-foreground">/{file.path || ''}</div>
|
|
</div>
|
|
<div>
|
|
<div className="text-sm font-medium">Modified</div>
|
|
<div className="text-sm text-muted-foreground">
|
|
{formatDateTime(file.modified)}
|
|
</div>
|
|
</div>
|
|
{!file.is_dir && (
|
|
<div>
|
|
<div className="text-sm font-medium">Size</div>
|
|
<div className="text-sm text-muted-foreground">{formatFileSize(file.size)}</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default function FileManager() {
|
|
const [isCollapsed, setIsCollapsed] = useState(false);
|
|
const [currentPath, setCurrentPath] = useState('');
|
|
const [searchTerm, setSearchTerm] = useState('');
|
|
const [filterType, setFilterType] = useState('all');
|
|
const [selectedFile, setSelectedFile] = useState<any>(null);
|
|
const [isMobile, setIsMobile] = useState(false);
|
|
const [showMobileMenu, setShowMobileMenu] = useState(false);
|
|
const [activePanel, setActivePanel] = useState('files');
|
|
|
|
const currentItem = fileSystemData[currentPath];
|
|
|
|
const shortcuts = [
|
|
[
|
|
{ key: 'Q', label: 'Rename', action: () => console.log('Rename') },
|
|
{ key: 'W', label: 'View', action: () => console.log('View') },
|
|
{ key: 'E', label: 'Edit', action: () => console.log('Edit') },
|
|
{ key: 'R', label: 'Move', action: () => console.log('Move') },
|
|
{ key: 'T', label: 'MkDir', action: () => console.log('Make Directory') },
|
|
{ key: 'Y', label: 'Delete', action: () => console.log('Delete') },
|
|
{ key: 'U', label: 'Copy', action: () => console.log('Copy') },
|
|
{ key: 'I', label: 'Cut', action: () => console.log('Cut') },
|
|
{ key: 'O', label: 'Paste', action: () => console.log('Paste') },
|
|
{ key: 'P', label: 'Duplicate', action: () => console.log('Duplicate') },
|
|
],
|
|
[
|
|
{ key: 'A', label: 'Select', action: () => console.log('Select') },
|
|
{ key: 'S', label: 'Select All', action: () => console.log('Select All') },
|
|
{ key: 'D', label: 'Deselect', action: () => console.log('Deselect') },
|
|
{ key: 'G', label: 'Details', action: () => console.log('Details') },
|
|
{ key: 'H', label: 'History', action: () => console.log('History') },
|
|
{ key: 'J', label: 'Share', action: () => console.log('Share') },
|
|
{ key: 'K', label: 'Star', action: () => console.log('Star') },
|
|
{ key: 'L', label: 'Download', action: () => console.log('Download') },
|
|
{ key: 'Z', label: 'Upload', action: () => console.log('Upload') },
|
|
{ key: 'X', label: 'Refresh', action: () => console.log('Refresh') },
|
|
]
|
|
];
|
|
|
|
const handleContextAction = (action: string, file: any) => {
|
|
console.log(`Context action: ${action}`, file);
|
|
switch (action) {
|
|
case 'star':
|
|
console.log('Toggle star for', file.name);
|
|
break;
|
|
case 'share':
|
|
console.log('Share', file.name);
|
|
break;
|
|
case 'download':
|
|
console.log('Download', file.name);
|
|
break;
|
|
case 'trash':
|
|
console.log('Move to trash', file.name);
|
|
break;
|
|
case 'copy':
|
|
console.log('Copy', file.name);
|
|
break;
|
|
case 'cut':
|
|
console.log('Cut', file.name);
|
|
break;
|
|
case 'rename':
|
|
console.log('Rename', file.name);
|
|
break;
|
|
case 'duplicate':
|
|
console.log('Duplicate', file.name);
|
|
break;
|
|
case 'details':
|
|
console.log('Show details for', file.name);
|
|
setSelectedFile(file);
|
|
if (isMobile) setActivePanel('preview');
|
|
break;
|
|
default:
|
|
console.log('Unknown action:', action);
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
const handleResize = () => {
|
|
setIsMobile(window.innerWidth < 768);
|
|
};
|
|
|
|
handleResize();
|
|
window.addEventListener('resize', handleResize);
|
|
return () => window.removeEventListener('resize', handleResize);
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
const handleKeyDown = (e: KeyboardEvent) => {
|
|
const isCtrl = e.ctrlKey || e.metaKey;
|
|
const isShift = e.shiftKey;
|
|
|
|
if (isCtrl && e.key === 'n' && isShift) {
|
|
e.preventDefault();
|
|
console.log('New folder shortcut');
|
|
} else if (isCtrl && e.key === 'n') {
|
|
e.preventDefault();
|
|
console.log('New file shortcut');
|
|
} else if (isCtrl && e.key === 'u') {
|
|
e.preventDefault();
|
|
console.log('Upload shortcut');
|
|
} else if (isCtrl && e.key === 'f') {
|
|
e.preventDefault();
|
|
document.querySelector('input[placeholder="Search files"]')?.focus();
|
|
} else if (e.key === 'Delete' && selectedFile) {
|
|
e.preventDefault();
|
|
console.log('Delete shortcut');
|
|
} else if (e.key === 'F2' && selectedFile) {
|
|
e.preventDefault();
|
|
console.log('Rename shortcut');
|
|
}
|
|
};
|
|
|
|
document.addEventListener('keydown', handleKeyDown);
|
|
return () => document.removeEventListener('keydown', handleKeyDown);
|
|
}, [selectedFile]);
|
|
|
|
if (isMobile) {
|
|
return (
|
|
<TooltipProvider>
|
|
<div className="flex flex-col h-screen bg-background">
|
|
<div className="flex items-center justify-between p-2 bg-secondary border-b border-border">
|
|
<div className="flex items-center gap-2">
|
|
<Sheet open={showMobileMenu} onOpenChange={setShowMobileMenu}>
|
|
<SheetTrigger asChild>
|
|
<Button variant="ghost" size="icon">
|
|
<Menu className="h-5 w-5" />
|
|
</Button>
|
|
</SheetTrigger>
|
|
<SheetContent side="left" className="w-[280px] p-0 bg-background">
|
|
<FolderTree
|
|
onSelect={(path: string) => {
|
|
setCurrentPath(path);
|
|
setShowMobileMenu(false);
|
|
setActivePanel('files');
|
|
}}
|
|
selectedPath={currentPath}
|
|
isMobile={true}
|
|
/>
|
|
</SheetContent>
|
|
</Sheet>
|
|
<h1 className="text-lg font-bold truncate">{currentItem?.name || 'My Drive'}</h1>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
{activePanel !== 'preview' && (
|
|
<Button variant="ghost" size="icon" onClick={() => setActivePanel('preview')}>
|
|
<Info className="h-4 w-4" />
|
|
</Button>
|
|
)}
|
|
{activePanel === 'preview' && (
|
|
<Button variant="ghost" size="icon" onClick={() => setActivePanel('files')}>
|
|
<ChevronLeft className="h-4 w-4" />
|
|
</Button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex-1 overflow-hidden">
|
|
{activePanel === 'files' && (
|
|
<div className="flex flex-col h-full">
|
|
<div className="p-2 bg-secondary border-b border-border">
|
|
<div className="relative">
|
|
<Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
|
|
<Input
|
|
placeholder="Search files"
|
|
className="pl-8 w-full bg-background border border-border"
|
|
value={searchTerm}
|
|
onChange={(e) => setSearchTerm(e.target.value)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<FileList
|
|
path={currentPath}
|
|
searchTerm={searchTerm}
|
|
filterType={filterType}
|
|
selectedFile={selectedFile}
|
|
setSelectedFile={(file: any) => {
|
|
setSelectedFile(file);
|
|
setActivePanel('preview');
|
|
}}
|
|
onContextAction={handleContextAction}
|
|
isMobile={true}
|
|
/>
|
|
</div>
|
|
)}
|
|
|
|
{activePanel === 'preview' && (
|
|
<FileDisplay
|
|
file={selectedFile}
|
|
isMobile={true}
|
|
/>
|
|
)}
|
|
</div>
|
|
|
|
<Footer shortcuts={shortcuts} isMobile={true} />
|
|
</div>
|
|
</TooltipProvider>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<TooltipProvider>
|
|
<div className="flex flex-col h-[calc(100vh-40px)] bg-background">
|
|
<ResizablePanelGroup direction="horizontal" className="flex-1 min-h-0">
|
|
<ResizablePanel
|
|
defaultSize={20}
|
|
collapsedSize={4}
|
|
collapsible={true}
|
|
minSize={15}
|
|
maxSize={30}
|
|
onCollapse={() => setIsCollapsed(true)}
|
|
onResize={() => setIsCollapsed(false)}
|
|
className={cn(isCollapsed && "min-w-[50px] transition-all duration-300")}
|
|
>
|
|
<FolderTree
|
|
onSelect={setCurrentPath}
|
|
selectedPath={currentPath}
|
|
isCollapsed={isCollapsed}
|
|
/>
|
|
</ResizablePanel>
|
|
|
|
<ResizableHandle withHandle className="bg-border" />
|
|
|
|
<ResizablePanel defaultSize={50} minSize={30} className="bg-background border-r border-border">
|
|
<Tabs defaultValue="all" className="flex flex-col h-full">
|
|
<div className="flex items-center px-4 py-2 bg-secondary border-b border-border">
|
|
<h1 className="text-xl font-bold">{currentItem?.name || 'My Drive'}</h1>
|
|
<TabsList className="ml-auto bg-background">
|
|
<TabsTrigger value="all" className="data-[state=active]:bg-accent">All</TabsTrigger>
|
|
<TabsTrigger value="starred" className="data-[state=active]:bg-accent">Starred</TabsTrigger>
|
|
</TabsList>
|
|
</div>
|
|
<Separator className="bg-border" />
|
|
<div className="bg-secondary p-4">
|
|
<div className="flex items-center gap-2">
|
|
<div className="relative flex-1">
|
|
<Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
|
|
<Input
|
|
placeholder="Search files"
|
|
className="pl-8 bg-background border border-border"
|
|
value={searchTerm}
|
|
onChange={(e) => setSearchTerm(e.target.value)}
|
|
/>
|
|
</div>
|
|
<Select value={filterType} onValueChange={setFilterType}>
|
|
<SelectTrigger className="w-[140px] bg-background border border-border">
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<SelectContent className="bg-popover">
|
|
<SelectItem value="all">All items</SelectItem>
|
|
<SelectItem value="folders">Folders</SelectItem>
|
|
<SelectItem value="files">Files</SelectItem>
|
|
<SelectItem value="starred">Starred</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
</div>
|
|
<TabsContent value="all" className="m-0 flex-1">
|
|
<FileList
|
|
path={currentPath}
|
|
searchTerm={searchTerm}
|
|
filterType={filterType}
|
|
selectedFile={selectedFile}
|
|
setSelectedFile={setSelectedFile}
|
|
onContextAction={handleContextAction}
|
|
/>
|
|
</TabsContent>
|
|
<TabsContent value="starred" className="m-0 flex-1">
|
|
<FileList
|
|
path={currentPath}
|
|
searchTerm={searchTerm}
|
|
filterType="starred"
|
|
selectedFile={selectedFile}
|
|
setSelectedFile={setSelectedFile}
|
|
onContextAction={handleContextAction}
|
|
/>
|
|
</TabsContent>
|
|
</Tabs>
|
|
</ResizablePanel>
|
|
|
|
<ResizableHandle withHandle className="bg-border" />
|
|
|
|
<ResizablePanel defaultSize={30} minSize={25} className="bg-background">
|
|
<FileDisplay file={selectedFile} />
|
|
</ResizablePanel>
|
|
</ResizablePanelGroup>
|
|
<Footer shortcuts={shortcuts} />
|
|
</div>
|
|
</TooltipProvider>
|
|
);
|
|
}
|