import React, { useState } from 'react';
import {
Stack,
Paper,
Text,
Group,
Button,
ActionIcon,
ScrollArea,
TextInput,
Divider,
SimpleGrid,
Loader
} from '@mantine/core';
import {
Star,
Folder,
File,
Trash2,
Plus,
History,
Bookmark,
Folders
} from 'lucide-react';
import { StarHoverableIcon } from './FileViewer.jsx';
function compareServers(a, b) {
if (!a && !b) return true;
if (!a || !b) return false;
if (a.isLocal && b.isLocal) return true;
return a.name === b.name && a.ip === b.ip && a.port === b.port && a.user === b.user;
}
export function HomeView({ onFileSelect, recentFiles, starredFiles, setStarredFiles, folderShortcuts, setFolderShortcuts, setFolder, setActiveTab, handleRemoveRecent, onSSHConnect, currentServer, isSSHConnecting }) {
const [newFolderPath, setNewFolderPath] = useState('');
const [activeSection, setActiveSection] = useState('recent');
const handleStarFile = (file) => {
const isStarred = starredFiles.some(f => f.path === file.path);
if (isStarred) {
setStarredFiles(starredFiles.filter(f => f.path !== file.path));
} else {
setStarredFiles([...starredFiles, file]);
}
};
const handleRemoveStarred = (file) => {
setStarredFiles(starredFiles.filter(f => f.path !== file.path));
};
const handleRemoveFolder = (folder) => {
setFolderShortcuts(folderShortcuts.filter(f => f.path !== folder.path));
};
const handleAddFolder = () => {
if (!newFolderPath) return;
setFolderShortcuts([...folderShortcuts, { path: newFolderPath, name: newFolderPath.split('/').pop(), server: currentServer }]);
setNewFolderPath('');
};
const getServerSpecificData = (data) => {
if (!currentServer) return [];
return data.filter(item => compareServers(item.server, currentServer));
};
const serverRecentFiles = getServerSpecificData(recentFiles);
const serverStarredFiles = getServerSpecificData(starredFiles);
const serverFolderShortcuts = getServerSpecificData(folderShortcuts);
const handleFileClick = async (file) => {
if (file.server && !file.server.isLocal) {
if (onSSHConnect && (!currentServer || !compareServers(currentServer, file.server))) {
const connected = await onSSHConnect(file.server);
if (!connected) {
return;
}
}
const pathParts = file.path.split('/').filter(Boolean);
const fileName = pathParts.pop() || '';
const folderPath = '/' + pathParts.join('/');
onFileSelect(fileName, folderPath, file.server, file.path);
} else {
let parentFolder;
if (navigator.platform.includes('Win') && file.path.includes(':')) {
const lastSlashIndex = file.path.lastIndexOf('/');
if (lastSlashIndex === -1) {
const driveLetter = file.path.substring(0, file.path.indexOf(':') + 1);
parentFolder = driveLetter + '/';
} else {
parentFolder = file.path.substring(0, lastSlashIndex + 1);
}
} else {
const lastSlashIndex = file.path.lastIndexOf('/');
parentFolder = lastSlashIndex === -1 ? '/' : file.path.substring(0, lastSlashIndex + 1);
}
onFileSelect(file.name, parentFolder);
}
};
const FileItem = ({ file, onStar, onRemove, showRemove }) => {
const parentFolder = file.path.substring(0, file.path.lastIndexOf('/')) || '/';
const isSSHFile = file.server;
return (
e.currentTarget.style.backgroundColor = '#4A5568'}
onMouseOut={e => e.currentTarget.style.backgroundColor = '#36414C'}
onClick={() => handleFileClick(file)}
>
{
e.stopPropagation();
onStar(file);
}}
>
{starredFiles.some(f => f.path === file.path) ? (
) : (
)}
{showRemove && (
{
e.stopPropagation();
onRemove(file);
}}
>
)}
);
};
const FolderItem = ({ folder, onRemove }) => (
e.currentTarget.style.backgroundColor = '#4A5568'}
onMouseOut={e => e.currentTarget.style.backgroundColor = '#36414C'}
onClick={() => {
setFolder(folder.path);
}}
>
{folder.name}
{folder.path}
{
e.stopPropagation();
onRemove(folder);
}}
>
);
return (
{!currentServer && (
Please select a server from the sidebar to view your files
)}
{currentServer && (
<>
Connected to: {currentServer.name} ({currentServer.user}@{currentServer.ip}:{currentServer.port})
{isSSHConnecting ? (
Connecting to SSH server...
) : (
<>
}
onClick={() => setActiveSection('recent')}
style={{ backgroundColor: activeSection === 'recent' ? '#36414C' : '#4A5568', color: 'white', borderColor: '#4A5568', transition: 'background 0.2s' }}
onMouseOver={e => e.currentTarget.style.backgroundColor = activeSection === 'recent' ? '#36414C' : '#36414C'}
onMouseOut={e => e.currentTarget.style.backgroundColor = activeSection === 'recent' ? '#36414C' : '#4A5568'}
>
Recent
}
onClick={() => setActiveSection('starred')}
style={{ backgroundColor: activeSection === 'starred' ? '#36414C' : '#4A5568', color: 'white', borderColor: '#4A5568', transition: 'background 0.2s' }}
onMouseOver={e => e.currentTarget.style.backgroundColor = activeSection === 'starred' ? '#36414C' : '#36414C'}
onMouseOut={e => e.currentTarget.style.backgroundColor = activeSection === 'starred' ? '#36414C' : '#4A5568'}
>
Starred
}
onClick={() => setActiveSection('folders')}
style={{ backgroundColor: activeSection === 'folders' ? '#36414C' : '#4A5568', color: 'white', borderColor: '#4A5568', transition: 'background 0.2s' }}
onMouseOver={e => e.currentTarget.style.backgroundColor = activeSection === 'folders' ? '#36414C' : '#36414C'}
onMouseOut={e => e.currentTarget.style.backgroundColor = activeSection === 'folders' ? '#36414C' : '#4A5568'}
>
Folder Shortcuts
{activeSection === 'recent' && (
{serverRecentFiles.length === 0 ? (
No recent files
) : (
serverRecentFiles.map(file => (
))
)}
)}
{activeSection === 'starred' && (
{serverStarredFiles.length === 0 ? (
No starred files
) : (
serverStarredFiles.map(file => (
))
)}
)}
{activeSection === 'folders' && (
setNewFolderPath(e.target.value)}
style={{ flex: 1 }}
styles={{
input: {
backgroundColor: '#36414C',
borderColor: '#4A5568',
color: 'white',
'&::placeholder': {
color: '#A0AEC0'
}
}
}}
/>
}
onClick={handleAddFolder}
variant="filled"
color="blue"
style={{
backgroundColor: '#36414C',
border: '1px solid #4A5568',
'&:hover': {
backgroundColor: '#4A5568'
}
}}
>
Add
{serverFolderShortcuts.length === 0 ? (
No folder shortcuts
) : (
serverFolderShortcuts.map(folder => (
))
)}
)}
)}
)}
);
}