Location
@@ -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') },
@@ -618,14 +596,11 @@ export default function FileManager() {
{ key: 'X', label: 'Refresh', action: () => console.log('Refresh') },
]
];
-
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 (
+
+
+
+
+
+
+
+
+
+ {
+ setCurrentPath(path);
+ setShowMobileMenu(false);
+ setActivePanel('files');
+ }}
+ selectedPath={currentPath}
+ isMobile={true}
+ />
+
+
+
{currentItem?.name || 'My Drive'}
+
+
+ {activePanel !== 'preview' && (
+
+ )}
+ {activePanel === 'preview' && (
+
+ )}
+
+
+
+
+ {activePanel === 'files' && (
+
+
+
+
+ setSearchTerm(e.target.value)}
+ />
+
+
+
{
+ setSelectedFile(file);
+ setActivePanel('preview');
+ }}
+ onContextAction={handleContextAction}
+ isMobile={true}
+ />
+
+ )}
+
+ {activePanel === 'preview' && (
+
+ )}
+
+
+
+
+ );
+ }
+
return (
-
{/* Adjust based on your nav height */}
-
+
+
- {/* Left Sidebar */}
-
+
- {/* Middle File List */}
-
+
-
+
{currentItem?.name || 'My Drive'}
-
- All
- Starred
+
+ All
+ Starred
-
-
+
+
+
);
-}
\ No newline at end of file
+}
diff --git a/app/prompt.txt b/app/prompt.txt
new file mode 100644
index 0000000..7d168bd
--- /dev/null
+++ b/app/prompt.txt
@@ -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') },
+ ]
+ ];
+
+
diff --git a/public/output.css b/public/output.css
index eadcb9b..9feadd3 100644
--- a/public/output.css
+++ b/public/output.css
@@ -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;
}
diff --git a/src/components/ui/sheet.tsx b/src/components/ui/sheet.tsx
index 272cb72..b43ac33 100644
--- a/src/components/ui/sheet.tsx
+++ b/src/components/ui/sheet.tsx
@@ -59,6 +59,7 @@ const SheetContent = React.forwardRef<
>(({ side = "right", className, children, ...props }, ref) => (
+