GoogleAIBuilder/WebFTP
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Enhance UX with editable paths, settings refinement, and disconnected state visuals

Browse Source
This commit is contained in:
backuppc
2026-01-19 14:03:21 +09:00
parent 5fd84a7ff1
commit 253f6c4fd5
4 changed files with 195 additions and 227 deletions
Download Patch File Download Diff File Expand all files Collapse all files

145
components/FilePane.tsx
View File

@@ -15,28 +15,45 @@ interface FilePaneProps {
onSelectionChange: (ids: Set<string>) => void;
selectedIds: Set<string>;
connected?: boolean;
refreshKey?: number;
onCreateFolder?: () => void;
onDelete?: () => void;
onRename?: () => void;
}
const FilePane: React.FC<FilePaneProps> = ({
title,
icon,
path,
files,
isLoading,
onNavigate,
onNavigateUp,
onSelectionChange,
const FilePane: React.FC<FilePaneProps> = ({
title,
icon,
path,
files,
isLoading,
onNavigate,
onNavigateUp,
onSelectionChange,
selectedIds,
connected = true,
refreshKey,
onCreateFolder,
onDelete,
onRename
}) => {
const [searchTerm, setSearchTerm] = useState('');
const [lastClickedId, setLastClickedId] = useState<string | null>(null);
const [pathInput, setPathInput] = useState(path);
// Sync path input when prop changes OR refreshKey updates
React.useEffect(() => {
setPathInput(path);
}, [path, refreshKey]);
const handlePathKeyDown = (e: React.KeyboardEvent) => {
if (e.key === 'Enter') {
onNavigate(pathInput);
} else if (e.key === 'Escape') {
setPathInput(path); // Revert
(e.target as HTMLInputElement).blur();
}
};
// Filter files based on search term
const displayFiles = useMemo(() => {
@@ -46,7 +63,7 @@ const FilePane: React.FC<FilePaneProps> = ({
const handleRowClick = (e: React.MouseEvent, file: FileItem) => {
e.preventDefault(); // Prevent text selection
let newSelected = new Set(selectedIds);
if (e.ctrlKey || e.metaKey) {
@@ -61,15 +78,15 @@ const FilePane: React.FC<FilePaneProps> = ({
// Range selection
const lastIndex = displayFiles.findIndex(f => f.id === lastClickedId);
const currentIndex = displayFiles.findIndex(f => f.id === file.id);
if (lastIndex !== -1 && currentIndex !== -1) {
const start = Math.min(lastIndex, currentIndex);
const end = Math.max(lastIndex, currentIndex);
newSelected = new Set();
newSelected = new Set();
for (let i = start; i <= end; i++) {
newSelected.add(displayFiles[i].id);
newSelected.add(displayFiles[i].id);
}
}
} else {
@@ -82,22 +99,29 @@ const FilePane: React.FC<FilePaneProps> = ({
};
return (
<div className="flex flex-col h-full bg-white border border-slate-300 rounded-lg overflow-hidden shadow-sm">
<div className={`flex flex-col h-full bg-white border border-slate-300 rounded-lg overflow-hidden shadow-sm transition-all duration-300 ${!connected ? 'opacity-60 grayscale-[0.5] pointer-events-none' : ''}`}>
{/* Header */}
<div className="bg-slate-50 p-2 border-b border-slate-200 flex items-center justify-between">
<div className="flex items-center gap-2 text-slate-700 font-semibold text-sm">
<div className="flex items-center gap-2 text-slate-700 font-semibold text-sm shrink-0">
{icon === 'local' ? <Monitor size={16} /> : <Server size={16} />}
<span>{title}</span>
</div>
<div className="flex items-center gap-2 bg-white px-2 py-1 rounded border border-slate-200 text-xs text-slate-500 flex-1 ml-4 truncate shadow-sm">
<span className="text-slate-400">경로:</span>
<span className="font-mono text-slate-700 select-all">{path}</span>
<div className="flex items-center gap-2 bg-white px-2 py-0.5 rounded border border-slate-200 text-xs text-slate-500 flex-1 ml-4 shadow-sm focus-within:border-blue-500 focus-within:ring-1 focus-within:ring-blue-500 transition-all">
<span className="text-slate-400 shrink-0">경로:</span>
<input
type="text"
value={pathInput}
onChange={(e) => setPathInput(e.target.value)}
onKeyDown={handlePathKeyDown}
className="font-mono text-slate-700 w-full outline-none text-xs py-1"
spellCheck={false}
/>
</div>
</div>
{/* Toolbar */}
<div className="bg-white p-1 border-b border-slate-200 flex gap-1 items-center">
<button
<button
onClick={onNavigateUp}
disabled={path === '/'}
className="p-1.5 hover:bg-slate-100 rounded text-slate-600 disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
@@ -106,7 +130,7 @@ const FilePane: React.FC<FilePaneProps> = ({
<ArrowUp size={16} />
</button>
<div className="w-px h-4 bg-slate-200 mx-1"></div>
<button
<button
onClick={onCreateFolder}
disabled={!connected || isLoading}
className="p-1.5 hover:bg-slate-100 rounded text-slate-600 disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
@@ -114,7 +138,7 @@ const FilePane: React.FC<FilePaneProps> = ({
>
<FolderPlus size={16} />
</button>
<button
<button
onClick={onRename}
disabled={selectedIds.size !== 1 || !connected || isLoading}
className="p-1.5 hover:bg-slate-100 rounded text-slate-600 disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
@@ -122,7 +146,7 @@ const FilePane: React.FC<FilePaneProps> = ({
>
<FilePenLine size={16} />
</button>
<button
<button
onClick={onDelete}
disabled={selectedIds.size === 0 || !connected || isLoading}
className="p-1.5 hover:bg-slate-100 rounded text-slate-600 hover:text-red-500 disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
@@ -130,27 +154,27 @@ const FilePane: React.FC<FilePaneProps> = ({
>
<Trash2 size={16} />
</button>
<button
className="p-1.5 hover:bg-slate-100 rounded text-slate-600 disabled:opacity-30 transition-colors"
title="새로고침"
onClick={() => onNavigate(path)} // Simple refresh
disabled={!connected || isLoading}
<button
className="p-1.5 hover:bg-slate-100 rounded text-slate-600 disabled:opacity-30 transition-colors"
title="새로고침"
onClick={() => onNavigate(path)} // Simple refresh
disabled={!connected || isLoading}
>
<RefreshCw size={16} className={isLoading ? 'animate-spin' : ''} />
</button>
<div className="flex-1"></div>
{/* Search Input */}
<div className="relative group">
<Search size={14} className="absolute left-2 top-1/2 -translate-y-1/2 text-slate-400 group-focus-within:text-blue-500" />
<input
type="text"
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
placeholder="검색..."
className="w-32 focus:w-48 transition-all bg-slate-50 border border-slate-200 rounded-full py-1 pl-7 pr-3 text-xs text-slate-700 focus:outline-none focus:border-blue-500 focus:bg-white placeholder:text-slate-400"
/>
<Search size={14} className="absolute left-2 top-1/2 -translate-y-1/2 text-slate-400 group-focus-within:text-blue-500" />
<input
type="text"
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
placeholder="검색..."
className="w-32 focus:w-48 transition-all bg-slate-50 border border-slate-200 rounded-full py-1 pl-7 pr-3 text-xs text-slate-700 focus:outline-none focus:border-blue-500 focus:bg-white placeholder:text-slate-400"
/>
</div>
</div>
@@ -179,7 +203,7 @@ const FilePane: React.FC<FilePaneProps> = ({
<tbody>
{/* Back Button Row */}
{path !== '/' && !searchTerm && (
<tr
<tr
className="hover:bg-slate-50 cursor-pointer text-slate-500"
onClick={onNavigateUp}
>
@@ -193,52 +217,51 @@ const FilePane: React.FC<FilePaneProps> = ({
{displayFiles.map((file) => {
const isSelected = selectedIds.has(file.id);
return (
<tr
<tr
key={file.id}
onClick={(e) => handleRowClick(e, file)}
onDoubleClick={() => {
if (file.type === FileType.FOLDER) {
if (file.type === FileType.FOLDER) {
onNavigate(path === '/' ? `/${file.name}` : `${path}/${file.name}`);
onSelectionChange(new Set()); // Clear selection on navigate
setSearchTerm(''); // Clear search on navigate
}
}
}}
className={`cursor-pointer border-b border-slate-50 group select-none ${
isSelected
? 'bg-blue-100 text-blue-900 border-blue-200'
: 'text-slate-700 hover:bg-slate-50'
}`}
>
className={`cursor-pointer border-b border-slate-50 group select-none ${isSelected
? 'bg-blue-100 text-blue-900 border-blue-200'
: 'text-slate-700 hover:bg-slate-50'
}`}
>
<td className="p-2 text-center">
<FileIcon name={file.name} type={file.type} className="w-4 h-4" />
<FileIcon name={file.name} type={file.type} className="w-4 h-4" />
</td>
<td className="p-2 font-medium group-hover:text-blue-600 truncate max-w-[150px]">
{file.name}
{file.name}
</td>
<td className="p-2 text-right font-mono text-slate-500">
{file.type === FileType.FILE ? formatBytes(file.size) : ''}
{file.type === FileType.FILE ? formatBytes(file.size) : ''}
</td>
<td className="p-2 text-right text-slate-400 hidden lg:table-cell">
{file.type === FileType.FOLDER ? '폴더' : file.name.split('.').pop()?.toUpperCase() || '파일'}
{file.type === FileType.FOLDER ? '폴더' : file.name.split('.').pop()?.toUpperCase() || '파일'}
</td>
<td className="p-2 text-right text-slate-400 hidden md:table-cell whitespace-nowrap">
{formatDate(file.date).split(',')[0]}
{formatDate(file.date).split(',')[0]}
</td>
</tr>
</tr>
);
})}
{displayFiles.length === 0 && (
<tr>
<td colSpan={5} className="p-8 text-center text-slate-400">
{searchTerm ? `"${searchTerm}" 검색 결과 없음` : '항목 없음'}
</td>
</tr>
<tr>
<td colSpan={5} className="p-8 text-center text-slate-400">
{searchTerm ? `"${searchTerm}" 검색 결과 없음` : '항목 없음'}
</td>
</tr>
)}
</tbody>
</table>
)}
</div>
{/* Footer Status */}
<div className="bg-slate-50 p-1 px-3 text-xs text-slate-500 border-t border-slate-200 flex justify-between">
<span>{files.length} 개 항목 {selectedIds.size > 0 && `(${selectedIds.size}개 선택됨)`}</span>