feat: Enhance file manager with mobile support and UI improvements
Some checks failed
GBCI / build (push) Failing after 10m3s
Some checks failed
GBCI / build (push) Failing after 10m3s
This commit is contained in:
Rodrigo Rodriguez (Pragmatismo)
parent
21a8236516
commit
fbe6db37a6
4 changed files with 277 additions and 130 deletions
|
|
@ -1,14 +1,30 @@
|
|||
"use client";
|
||||
import React, { useState, useMemo } from 'react';
|
||||
import React, { useState, useMemo, useEffect } from 'react';
|
||||
import {
|
||||
Search, Download, Trash2, Share, Star,
|
||||
MoreVertical, Home, ChevronRight,
|
||||
MoreVertical, Home, ChevronRight, ChevronLeft,
|
||||
Folder, File, Image, Video, Music, FileText, Code, Database,
|
||||
Clock, Users, Eye, Edit3, Copy, Scissors,
|
||||
FolderPlus, Info, Lock,
|
||||
ExternalLink, History} from 'lucide-react';
|
||||
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) => {
|
||||
|
|
@ -46,46 +62,6 @@ const formatDistanceToNow = (date) => {
|
|||
return formatDate(date);
|
||||
};
|
||||
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Separator } from "@/components/ui/separator";
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuTrigger,
|
||||
} from "@/components/ui/dropdown-menu";
|
||||
import {
|
||||
ContextMenu,
|
||||
ContextMenuContent,
|
||||
ContextMenuItem,
|
||||
ContextMenuTrigger,
|
||||
ContextMenuSeparator,
|
||||
ContextMenuSub,
|
||||
ContextMenuSubContent,
|
||||
ContextMenuSubTrigger,
|
||||
} from "@/components/ui/context-menu";
|
||||
import {
|
||||
Tooltip,
|
||||
TooltipContent,
|
||||
TooltipTrigger,
|
||||
TooltipProvider,
|
||||
} from "@/components/ui/tooltip";
|
||||
import {
|
||||
ResizableHandle,
|
||||
ResizablePanel,
|
||||
ResizablePanelGroup,
|
||||
} from "@/components/ui/resizable";
|
||||
import { ScrollArea } from "@/components/ui/scroll-area";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
|
||||
// File system data
|
||||
const fileSystemData = {
|
||||
"": {
|
||||
|
|
@ -193,7 +169,7 @@ const fileSystemData = {
|
|||
|
||||
const getFileIcon = (item) => {
|
||||
if (item.is_dir) {
|
||||
return <Folder className="w-4 h-4 text-blue-600" />;
|
||||
return <Folder className="w-4 h-4 text-yellow-500" />;
|
||||
}
|
||||
|
||||
const iconMap = {
|
||||
|
|
@ -209,7 +185,7 @@ const getFileIcon = (item) => {
|
|||
mp3: <Music className="w-4 h-4 text-green-600" />
|
||||
};
|
||||
|
||||
return iconMap[item.type] || <File className="w-4 h-4 text-gray-500" />;
|
||||
return iconMap[item.type] || <File className="w-4 h-4 text-muted-foreground" />;
|
||||
};
|
||||
|
||||
const formatFileSize = (bytes) => {
|
||||
|
|
@ -264,7 +240,7 @@ const FileContextMenu = ({ file, children, onAction }) => {
|
|||
<item.icon className="w-4 h-4" />
|
||||
{item.label}
|
||||
</ContextMenuSubTrigger>
|
||||
<ContextMenuSubContent>
|
||||
<ContextMenuSubContent className="bg-popover">
|
||||
{item.submenu.map((subItem, subIndex) => (
|
||||
<ContextMenuItem
|
||||
key={subIndex}
|
||||
|
|
@ -300,14 +276,14 @@ const FileContextMenu = ({ file, children, onAction }) => {
|
|||
<ContextMenuTrigger asChild>
|
||||
{children}
|
||||
</ContextMenuTrigger>
|
||||
<ContextMenuContent className="w-56">
|
||||
<ContextMenuContent className="w-56 bg-popover">
|
||||
{contextMenuItems.map(renderContextMenuItem)}
|
||||
</ContextMenuContent>
|
||||
</ContextMenu>
|
||||
);
|
||||
};
|
||||
|
||||
const FolderTree = ({ onSelect, selectedPath, isCollapsed }) => {
|
||||
const FolderTree = ({ onSelect, selectedPath = undefined, isCollapsed = undefined, isMobile = undefined }) => {
|
||||
const [expanded, setExpanded] = useState({ "": true, "projects": true });
|
||||
|
||||
const toggleExpand = (path) => {
|
||||
|
|
@ -336,7 +312,7 @@ const FolderTree = ({ onSelect, selectedPath, isCollapsed }) => {
|
|||
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-muted",
|
||||
isSelected && "bg-accent",
|
||||
isCollapsed ? "justify-center" : "justify-start"
|
||||
)}
|
||||
>
|
||||
|
|
@ -363,7 +339,7 @@ const FolderTree = ({ onSelect, selectedPath, isCollapsed }) => {
|
|||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-full">
|
||||
<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) =>
|
||||
|
|
@ -373,19 +349,19 @@ const FolderTree = ({ onSelect, selectedPath, isCollapsed }) => {
|
|||
<Button
|
||||
variant={selectedPath === link.path ? "default" : "ghost"}
|
||||
size="icon"
|
||||
className="w-9 h-9"
|
||||
className="w-9 h-9 bg-background hover:bg-accent"
|
||||
onClick={() => onSelect(link.path)}
|
||||
>
|
||||
<link.icon className="h-4 w-4" />
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent side="right">{link.title}</TooltipContent>
|
||||
<TooltipContent side="right" className="bg-popover">{link.title}</TooltipContent>
|
||||
</Tooltip>
|
||||
) : (
|
||||
<Button
|
||||
key={link.path}
|
||||
variant={selectedPath === link.path ? "default" : "ghost"}
|
||||
className="w-full justify-start"
|
||||
className="w-full justify-start bg-background hover:bg-accent"
|
||||
onClick={() => onSelect(link.path)}
|
||||
>
|
||||
<link.icon className="mr-2 h-4 w-4" />
|
||||
|
|
@ -397,7 +373,7 @@ const FolderTree = ({ onSelect, selectedPath, isCollapsed }) => {
|
|||
</div>
|
||||
{!isCollapsed && (
|
||||
<>
|
||||
<Separator />
|
||||
<Separator className="bg-border" />
|
||||
<ScrollArea className="flex-1 p-2">
|
||||
{renderTreeItem("")}
|
||||
</ScrollArea>
|
||||
|
|
@ -407,7 +383,7 @@ const FolderTree = ({ onSelect, selectedPath, isCollapsed }) => {
|
|||
);
|
||||
};
|
||||
|
||||
const FileList = ({ path, searchTerm, filterType, selectedFile, setSelectedFile, onContextAction }) => {
|
||||
const FileList = ({ path, searchTerm, filterType, selectedFile, setSelectedFile, onContextAction, isMobile }) => {
|
||||
const files = useMemo(() => {
|
||||
const currentItem = fileSystemData[path];
|
||||
if (!currentItem || !currentItem.is_dir || !currentItem.children) return [];
|
||||
|
|
@ -440,7 +416,7 @@ const FileList = ({ path, searchTerm, filterType, selectedFile, setSelectedFile,
|
|||
}, [path, searchTerm, filterType]);
|
||||
|
||||
return (
|
||||
<ScrollArea className="h-full">
|
||||
<ScrollArea className={cn("h-full bg-background", isMobile ? "w-full" : "")}>
|
||||
<div className="flex flex-col">
|
||||
{files.map((item) => (
|
||||
<FileContextMenu
|
||||
|
|
@ -450,8 +426,8 @@ const FileList = ({ path, searchTerm, filterType, selectedFile, setSelectedFile,
|
|||
>
|
||||
<button
|
||||
className={cn(
|
||||
"flex items-center gap-3 p-3 text-left text-sm transition-all hover:bg-accent border-b",
|
||||
selectedFile?.id === item.id && "bg-muted"
|
||||
"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)}
|
||||
>
|
||||
|
|
@ -479,10 +455,10 @@ const FileList = ({ path, searchTerm, filterType, selectedFile, setSelectedFile,
|
|||
);
|
||||
};
|
||||
|
||||
const FileDisplay = ({ file }) => {
|
||||
const FileDisplay = ({ file, isMobile }) => {
|
||||
if (!file) {
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center h-full text-center text-muted-foreground">
|
||||
<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>
|
||||
|
|
@ -491,53 +467,59 @@ const FileDisplay = ({ file }) => {
|
|||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-full">
|
||||
<div className="flex items-center p-2">
|
||||
<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">
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Button variant="ghost" size="icon">
|
||||
<Download className="h-4 w-4" />
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>Download</TooltipContent>
|
||||
</Tooltip>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Button variant="ghost" size="icon">
|
||||
<Share className="h-4 w-4" />
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>Share</TooltipContent>
|
||||
</Tooltip>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Button variant="ghost" size="icon">
|
||||
<Star className="h-4 w-4" />
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>Star</TooltipContent>
|
||||
</Tooltip>
|
||||
<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">
|
||||
<Button variant="ghost" size="icon" className="hover:bg-accent">
|
||||
<MoreVertical className="h-4 w-4" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuContent align="end" className="bg-popover">
|
||||
<DropdownMenuItem>Rename</DropdownMenuItem>
|
||||
<DropdownMenuItem>Make a copy</DropdownMenuItem>
|
||||
<DropdownMenuItem>Move to trash</DropdownMenuItem>
|
||||
<DropdownMenuItem className="text-destructive">Move to trash</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
</div>
|
||||
<Separator />
|
||||
<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-accent">
|
||||
<div className="p-2 rounded-lg bg-secondary">
|
||||
{getFileIcon(file)}
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
|
|
@ -552,7 +534,7 @@ const FileDisplay = ({ file }) => {
|
|||
</div>
|
||||
)}
|
||||
</div>
|
||||
<Separator />
|
||||
<Separator className="bg-border" />
|
||||
<div className="p-4 space-y-4">
|
||||
<div>
|
||||
<div className="text-sm font-medium">Location</div>
|
||||
|
|
@ -582,16 +564,13 @@ export default function FileManager() {
|
|||
const [searchTerm, setSearchTerm] = useState('');
|
||||
const [filterType, setFilterType] = useState('all');
|
||||
const [selectedFile, setSelectedFile] = useState(null);
|
||||
const [isMobile, setIsMobile] = useState(false);
|
||||
const [showMobileMenu, setShowMobileMenu] = useState(false);
|
||||
const [activePanel, setActivePanel] = useState('files'); // 'tree', 'files', 'preview'
|
||||
|
||||
const currentItem = fileSystemData[currentPath];
|
||||
|
||||
// Drive-specific keyboard shortcuts
|
||||
// XTreeGold classic shortcut layout - two rows
|
||||
// XTree/NC-style: only unique, non-browser, non-reserved keys for file ops
|
||||
// No F1-F12, Ctrl+F, Ctrl+T, Ctrl+W, Ctrl+N, Ctrl+R, Ctrl+P, etc.
|
||||
// Use Q, W, E, R, T, Y, U, I, O, P, A, S, D, G, H, J, K, L, Z, X, C, V, B, M with Ctrl/Shift if needed
|
||||
const shortcuts = [
|
||||
// File operations row (unique qkeys)
|
||||
[
|
||||
{ key: 'Q', label: 'Rename', action: () => console.log('Rename') },
|
||||
{ key: 'W', label: 'View', action: () => console.log('View') },
|
||||
|
|
@ -604,7 +583,6 @@ export default function FileManager() {
|
|||
{ key: 'O', label: 'Paste', action: () => console.log('Paste') },
|
||||
{ key: 'P', label: 'Duplicate', action: () => console.log('Duplicate') },
|
||||
],
|
||||
// Navigation/info row (unique qkeys)
|
||||
[
|
||||
{ key: 'A', label: 'Select', action: () => console.log('Select') },
|
||||
{ key: 'S', label: 'Select All', action: () => console.log('Select All') },
|
||||
|
|
@ -619,13 +597,10 @@ export default function FileManager() {
|
|||
]
|
||||
];
|
||||
|
||||
|
||||
const handleContextAction = (action, file) => {
|
||||
console.log(`Context action: ${action}`, file);
|
||||
// Handle context menu actions here
|
||||
switch (action) {
|
||||
case 'star':
|
||||
// Toggle star status
|
||||
console.log('Toggle star for', file.name);
|
||||
break;
|
||||
case 'share':
|
||||
|
|
@ -652,14 +627,24 @@ export default function FileManager() {
|
|||
case 'details':
|
||||
console.log('Show details for', file.name);
|
||||
setSelectedFile(file);
|
||||
if (isMobile) setActivePanel('preview');
|
||||
break;
|
||||
default:
|
||||
console.log('Unknown action:', action);
|
||||
}
|
||||
};
|
||||
|
||||
// Keyboard shortcut handler
|
||||
React.useEffect(() => {
|
||||
useEffect(() => {
|
||||
const handleResize = () => {
|
||||
setIsMobile(window.innerWidth < 768);
|
||||
};
|
||||
|
||||
handleResize();
|
||||
window.addEventListener('resize', handleResize);
|
||||
return () => window.removeEventListener('resize', handleResize);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
const handleKeyDown = (e) => {
|
||||
const isCtrl = e.ctrlKey || e.metaKey;
|
||||
const isShift = e.shiftKey;
|
||||
|
|
@ -675,7 +660,7 @@ export default function FileManager() {
|
|||
console.log('Upload shortcut');
|
||||
} else if (isCtrl && e.key === 'f') {
|
||||
e.preventDefault();
|
||||
(document.querySelector('input[placeholder="Search files"]') as HTMLInputElement | null)?.focus();
|
||||
document.querySelector('input[placeholder="Search files"]').focus();
|
||||
} else if (e.key === 'Delete' && selectedFile) {
|
||||
e.preventDefault();
|
||||
console.log('Delete shortcut');
|
||||
|
|
@ -689,11 +674,93 @@ export default function FileManager() {
|
|||
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) => {
|
||||
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) => {
|
||||
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 (
|
||||
<div className="flex flex-col h-[calc(100vh-40px)]"> {/* Adjust based on your nav height */}
|
||||
<TooltipProvider delayDuration={0}>
|
||||
<TooltipProvider>
|
||||
<div className="flex flex-col h-[calc(100vh-40px)] bg-background">
|
||||
<ResizablePanelGroup direction="horizontal" className="flex-1 min-h-0">
|
||||
{/* Left Sidebar */}
|
||||
<ResizablePanel
|
||||
defaultSize={20}
|
||||
collapsedSize={4}
|
||||
|
|
@ -711,35 +778,34 @@ export default function FileManager() {
|
|||
/>
|
||||
</ResizablePanel>
|
||||
|
||||
<ResizableHandle withHandle />
|
||||
<ResizableHandle withHandle className="bg-border" />
|
||||
|
||||
{/* Middle File List */}
|
||||
<ResizablePanel defaultSize={50} minSize={30}>
|
||||
<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">
|
||||
<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">
|
||||
<TabsTrigger value="all">All</TabsTrigger>
|
||||
<TabsTrigger value="starred">Starred</TabsTrigger>
|
||||
<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 />
|
||||
<div className="bg-background/95 p-4 backdrop-blur">
|
||||
<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"
|
||||
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]">
|
||||
<SelectTrigger className="w-[140px] bg-background border border-border">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectContent className="bg-popover">
|
||||
<SelectItem value="all">All items</SelectItem>
|
||||
<SelectItem value="folders">Folders</SelectItem>
|
||||
<SelectItem value="files">Files</SelectItem>
|
||||
|
|
@ -771,17 +837,14 @@ export default function FileManager() {
|
|||
</Tabs>
|
||||
</ResizablePanel>
|
||||
|
||||
<ResizableHandle withHandle />
|
||||
<ResizableHandle withHandle className="bg-border" />
|
||||
|
||||
{/* Right File Details */}
|
||||
<ResizablePanel defaultSize={30} minSize={25}>
|
||||
<ResizablePanel defaultSize={30} minSize={25} className="bg-background">
|
||||
<FileDisplay file={selectedFile} />
|
||||
</ResizablePanel>
|
||||
</ResizablePanelGroup>
|
||||
</TooltipProvider>
|
||||
|
||||
{/* Footer with Status Bar */}
|
||||
<Footer shortcuts={shortcuts} />
|
||||
</div>
|
||||
<Footer shortcuts={shortcuts} />
|
||||
</div>
|
||||
</TooltipProvider>
|
||||
);
|
||||
}
|
||||
64
app/prompt.txt
Normal file
64
app/prompt.txt
Normal file
|
|
@ -0,0 +1,64 @@
|
|||
Pages
|
||||
=====
|
||||
|
||||
Use themes variables
|
||||
--------------------
|
||||
|
||||
background
|
||||
foreground
|
||||
card
|
||||
card
|
||||
popover
|
||||
popover
|
||||
primary
|
||||
primary
|
||||
secondary
|
||||
secondary
|
||||
muted
|
||||
muted
|
||||
accent
|
||||
accent
|
||||
destructive
|
||||
destructive
|
||||
border
|
||||
input
|
||||
ring
|
||||
radius
|
||||
chart
|
||||
chart
|
||||
chart
|
||||
chart
|
||||
chart
|
||||
|
||||
|
||||
Use resizable where is possible
|
||||
--------------------------------
|
||||
|
||||
|
||||
import {
|
||||
ResizableHandle,
|
||||
ResizablePanel,
|
||||
ResizablePanelGroup,
|
||||
} from "@/components/ui/resizable"
|
||||
|
||||
Use shortcuts on footer
|
||||
-----------------------
|
||||
|
||||
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: 'I', label: 'Cut', action: () => console.log('Cut') },
|
||||
{ key: 'O', label: 'Paste', action: () => console.log('Paste') },
|
||||
{ key: 'P', label: 'Duplicate', action: () => console.log('Duplicate') },
|
||||
],
|
||||
[
|
||||
{ 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') },
|
||||
]
|
||||
];
|
||||
<Footer shortcuts={shortcuts} />
|
||||
|
||||
|
|
@ -2197,6 +2197,11 @@ body {
|
|||
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.bg-yellow-100 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(254 249 195 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.bg-gradient-to-br {
|
||||
background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
|
||||
}
|
||||
|
|
@ -2693,6 +2698,11 @@ body {
|
|||
color: hsl(var(--sidebar-foreground) / 0.7);
|
||||
}
|
||||
|
||||
.text-teal-600 {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(13 148 136 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.text-white {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(255 255 255 / var(--tw-text-opacity));
|
||||
|
|
@ -2708,6 +2718,11 @@ body {
|
|||
color: rgb(202 138 4 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.text-yellow-800 {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(133 77 14 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.underline {
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
|
|
@ -2971,6 +2986,10 @@ body {
|
|||
animation-timing-function: linear;
|
||||
}
|
||||
|
||||
.running {
|
||||
animation-play-state: running;
|
||||
}
|
||||
|
||||
.dark .scrollbar-thin::-webkit-scrollbar-thumb {
|
||||
background: #4b5563;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -59,6 +59,7 @@ const SheetContent = React.forwardRef<
|
|||
>(({ side = "right", className, children, ...props }, ref) => (
|
||||
<SheetPortal>
|
||||
<SheetOverlay />
|
||||
<SheetPrimitive.DialogTitle></SheetPrimitive.DialogTitle>
|
||||
<SheetPrimitive.Content
|
||||
ref={ref}
|
||||
className={cn(sheetVariants({ side }), className)}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue