mirror of
https://github.com/siteboon/claudecodeui.git
synced 2026-03-03 21:17:50 +00:00
refactor(file-tree): make file tree a feature based component
This commit is contained in:
Haileyesus
@@ -1,729 +0,0 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { ScrollArea } from './ui/scroll-area';
|
||||
import { Button } from './ui/button';
|
||||
import { Input } from './ui/input';
|
||||
import {
|
||||
Folder, FolderOpen, File, FileText, FileCode, List, TableProperties, Eye, Search, X,
|
||||
ChevronRight,
|
||||
FileJson, FileType, FileSpreadsheet, FileArchive,
|
||||
Hash, Braces, Terminal, Database, Globe, Palette, Music2, Video, Archive,
|
||||
Lock, Shield, Settings, Image, BookOpen, Cpu, Box, Gem, Coffee,
|
||||
Flame, Hexagon, FileCode2, Code2, Cog, FileWarning, Binary, SquareFunction,
|
||||
Scroll, FlaskConical, NotebookPen, FileCheck, Workflow, Blocks
|
||||
} from 'lucide-react';
|
||||
import { cn } from '../lib/utils';
|
||||
import ImageViewer from './ImageViewer';
|
||||
import { api } from '../utils/api';
|
||||
|
||||
// ─── File Icon Registry ──────────────────────────────────────────────
|
||||
// Maps file extensions (and special filenames) to { icon, colorClass } pairs.
|
||||
// Uses lucide-react icons mapped semantically to file types.
|
||||
|
||||
const ICON_SIZE = 'w-4 h-4 flex-shrink-0';
|
||||
|
||||
const FILE_ICON_MAP = {
|
||||
// ── JavaScript / TypeScript ──
|
||||
js: { icon: FileCode, color: 'text-yellow-500' },
|
||||
jsx: { icon: FileCode, color: 'text-yellow-500' },
|
||||
mjs: { icon: FileCode, color: 'text-yellow-500' },
|
||||
cjs: { icon: FileCode, color: 'text-yellow-500' },
|
||||
ts: { icon: FileCode2, color: 'text-blue-500' },
|
||||
tsx: { icon: FileCode2, color: 'text-blue-500' },
|
||||
mts: { icon: FileCode2, color: 'text-blue-500' },
|
||||
|
||||
// ── Python ──
|
||||
py: { icon: Code2, color: 'text-emerald-500' },
|
||||
pyw: { icon: Code2, color: 'text-emerald-500' },
|
||||
pyi: { icon: Code2, color: 'text-emerald-400' },
|
||||
ipynb:{ icon: NotebookPen, color: 'text-orange-500' },
|
||||
|
||||
// ── Rust ──
|
||||
rs: { icon: Cog, color: 'text-orange-600' },
|
||||
toml: { icon: Settings, color: 'text-gray-500' },
|
||||
|
||||
// ── Go ──
|
||||
go: { icon: Hexagon, color: 'text-cyan-500' },
|
||||
|
||||
// ── Ruby ──
|
||||
rb: { icon: Gem, color: 'text-red-500' },
|
||||
erb: { icon: Gem, color: 'text-red-400' },
|
||||
|
||||
// ── PHP ──
|
||||
php: { icon: Blocks, color: 'text-violet-500' },
|
||||
|
||||
// ── Java / Kotlin ──
|
||||
java: { icon: Coffee, color: 'text-red-600' },
|
||||
jar: { icon: Coffee, color: 'text-red-500' },
|
||||
kt: { icon: Hexagon, color: 'text-violet-500' },
|
||||
kts: { icon: Hexagon, color: 'text-violet-400' },
|
||||
|
||||
// ── C / C++ ──
|
||||
c: { icon: Cpu, color: 'text-blue-600' },
|
||||
h: { icon: Cpu, color: 'text-blue-400' },
|
||||
cpp: { icon: Cpu, color: 'text-blue-700' },
|
||||
hpp: { icon: Cpu, color: 'text-blue-500' },
|
||||
cc: { icon: Cpu, color: 'text-blue-700' },
|
||||
|
||||
// ── C# ──
|
||||
cs: { icon: Hexagon, color: 'text-purple-600' },
|
||||
|
||||
// ── Swift ──
|
||||
swift:{ icon: Flame, color: 'text-orange-500' },
|
||||
|
||||
// ── Lua ──
|
||||
lua: { icon: SquareFunction, color: 'text-blue-500' },
|
||||
|
||||
// ── R ──
|
||||
r: { icon: FlaskConical, color: 'text-blue-600' },
|
||||
|
||||
// ── Web ──
|
||||
html: { icon: Globe, color: 'text-orange-600' },
|
||||
htm: { icon: Globe, color: 'text-orange-600' },
|
||||
css: { icon: Hash, color: 'text-blue-500' },
|
||||
scss: { icon: Hash, color: 'text-pink-500' },
|
||||
sass: { icon: Hash, color: 'text-pink-400' },
|
||||
less: { icon: Hash, color: 'text-indigo-500' },
|
||||
vue: { icon: FileCode2, color: 'text-emerald-500' },
|
||||
svelte:{ icon: FileCode2, color: 'text-orange-500' },
|
||||
|
||||
// ── Data / Config ──
|
||||
json: { icon: Braces, color: 'text-yellow-600' },
|
||||
jsonc:{ icon: Braces, color: 'text-yellow-500' },
|
||||
json5:{ icon: Braces, color: 'text-yellow-500' },
|
||||
yaml: { icon: Settings, color: 'text-purple-400' },
|
||||
yml: { icon: Settings, color: 'text-purple-400' },
|
||||
xml: { icon: FileCode, color: 'text-orange-500' },
|
||||
csv: { icon: FileSpreadsheet, color: 'text-green-600' },
|
||||
tsv: { icon: FileSpreadsheet, color: 'text-green-500' },
|
||||
sql: { icon: Database, color: 'text-blue-500' },
|
||||
graphql:{ icon: Workflow, color: 'text-pink-500' },
|
||||
gql: { icon: Workflow, color: 'text-pink-500' },
|
||||
proto:{ icon: Box, color: 'text-green-500' },
|
||||
env: { icon: Shield, color: 'text-yellow-600' },
|
||||
|
||||
// ── Documents ──
|
||||
md: { icon: BookOpen, color: 'text-blue-500' },
|
||||
mdx: { icon: BookOpen, color: 'text-blue-400' },
|
||||
txt: { icon: FileText, color: 'text-gray-500' },
|
||||
doc: { icon: FileText, color: 'text-blue-600' },
|
||||
docx: { icon: FileText, color: 'text-blue-600' },
|
||||
pdf: { icon: FileCheck, color: 'text-red-600' },
|
||||
rtf: { icon: FileText, color: 'text-gray-500' },
|
||||
tex: { icon: Scroll, color: 'text-teal-600' },
|
||||
rst: { icon: FileText, color: 'text-gray-400' },
|
||||
|
||||
// ── Shell / Scripts ──
|
||||
sh: { icon: Terminal, color: 'text-green-500' },
|
||||
bash: { icon: Terminal, color: 'text-green-500' },
|
||||
zsh: { icon: Terminal, color: 'text-green-400' },
|
||||
fish: { icon: Terminal, color: 'text-green-400' },
|
||||
ps1: { icon: Terminal, color: 'text-blue-400' },
|
||||
bat: { icon: Terminal, color: 'text-gray-500' },
|
||||
cmd: { icon: Terminal, color: 'text-gray-500' },
|
||||
|
||||
// ── Images ──
|
||||
png: { icon: Image, color: 'text-purple-500' },
|
||||
jpg: { icon: Image, color: 'text-purple-500' },
|
||||
jpeg: { icon: Image, color: 'text-purple-500' },
|
||||
gif: { icon: Image, color: 'text-purple-400' },
|
||||
webp: { icon: Image, color: 'text-purple-400' },
|
||||
ico: { icon: Image, color: 'text-purple-400' },
|
||||
bmp: { icon: Image, color: 'text-purple-400' },
|
||||
tiff: { icon: Image, color: 'text-purple-400' },
|
||||
svg: { icon: Palette, color: 'text-amber-500' },
|
||||
|
||||
// ── Audio ──
|
||||
mp3: { icon: Music2, color: 'text-pink-500' },
|
||||
wav: { icon: Music2, color: 'text-pink-500' },
|
||||
ogg: { icon: Music2, color: 'text-pink-400' },
|
||||
flac: { icon: Music2, color: 'text-pink-400' },
|
||||
aac: { icon: Music2, color: 'text-pink-400' },
|
||||
m4a: { icon: Music2, color: 'text-pink-400' },
|
||||
|
||||
// ── Video ──
|
||||
mp4: { icon: Video, color: 'text-rose-500' },
|
||||
mov: { icon: Video, color: 'text-rose-500' },
|
||||
avi: { icon: Video, color: 'text-rose-500' },
|
||||
webm: { icon: Video, color: 'text-rose-400' },
|
||||
mkv: { icon: Video, color: 'text-rose-400' },
|
||||
|
||||
// ── Fonts ──
|
||||
ttf: { icon: FileType, color: 'text-red-500' },
|
||||
otf: { icon: FileType, color: 'text-red-500' },
|
||||
woff: { icon: FileType, color: 'text-red-400' },
|
||||
woff2:{ icon: FileType, color: 'text-red-400' },
|
||||
eot: { icon: FileType, color: 'text-red-400' },
|
||||
|
||||
// ── Archives ──
|
||||
zip: { icon: Archive, color: 'text-amber-600' },
|
||||
tar: { icon: Archive, color: 'text-amber-600' },
|
||||
gz: { icon: Archive, color: 'text-amber-600' },
|
||||
bz2: { icon: Archive, color: 'text-amber-600' },
|
||||
rar: { icon: Archive, color: 'text-amber-500' },
|
||||
'7z': { icon: Archive, color: 'text-amber-500' },
|
||||
|
||||
// ── Lock files ──
|
||||
lock: { icon: Lock, color: 'text-gray-500' },
|
||||
|
||||
// ── Binary / Executable ──
|
||||
exe: { icon: Binary, color: 'text-gray-500' },
|
||||
bin: { icon: Binary, color: 'text-gray-500' },
|
||||
dll: { icon: Binary, color: 'text-gray-400' },
|
||||
so: { icon: Binary, color: 'text-gray-400' },
|
||||
dylib:{ icon: Binary, color: 'text-gray-400' },
|
||||
wasm: { icon: Binary, color: 'text-purple-500' },
|
||||
|
||||
// ── Misc config ──
|
||||
ini: { icon: Settings, color: 'text-gray-500' },
|
||||
cfg: { icon: Settings, color: 'text-gray-500' },
|
||||
conf: { icon: Settings, color: 'text-gray-500' },
|
||||
log: { icon: Scroll, color: 'text-gray-400' },
|
||||
map: { icon: File, color: 'text-gray-400' },
|
||||
};
|
||||
|
||||
// Special full-filename matches (highest priority)
|
||||
const FILENAME_ICON_MAP = {
|
||||
'Dockerfile': { icon: Box, color: 'text-blue-500' },
|
||||
'docker-compose.yml': { icon: Box, color: 'text-blue-500' },
|
||||
'docker-compose.yaml': { icon: Box, color: 'text-blue-500' },
|
||||
'.dockerignore': { icon: Box, color: 'text-gray-500' },
|
||||
'.gitignore': { icon: Settings, color: 'text-gray-500' },
|
||||
'.gitmodules': { icon: Settings, color: 'text-gray-500' },
|
||||
'.gitattributes': { icon: Settings, color: 'text-gray-500' },
|
||||
'.editorconfig': { icon: Settings, color: 'text-gray-500' },
|
||||
'.prettierrc': { icon: Settings, color: 'text-pink-400' },
|
||||
'.prettierignore': { icon: Settings, color: 'text-gray-500' },
|
||||
'.eslintrc': { icon: Settings, color: 'text-violet-500' },
|
||||
'.eslintrc.js': { icon: Settings, color: 'text-violet-500' },
|
||||
'.eslintrc.json': { icon: Settings, color: 'text-violet-500' },
|
||||
'.eslintrc.cjs': { icon: Settings, color: 'text-violet-500' },
|
||||
'eslint.config.js': { icon: Settings, color: 'text-violet-500' },
|
||||
'eslint.config.mjs':{ icon: Settings, color: 'text-violet-500' },
|
||||
'.env': { icon: Shield, color: 'text-yellow-600' },
|
||||
'.env.local': { icon: Shield, color: 'text-yellow-600' },
|
||||
'.env.development': { icon: Shield, color: 'text-yellow-500' },
|
||||
'.env.production': { icon: Shield, color: 'text-yellow-600' },
|
||||
'.env.example': { icon: Shield, color: 'text-yellow-400' },
|
||||
'package.json': { icon: Braces, color: 'text-green-500' },
|
||||
'package-lock.json':{ icon: Lock, color: 'text-gray-500' },
|
||||
'yarn.lock': { icon: Lock, color: 'text-blue-400' },
|
||||
'pnpm-lock.yaml': { icon: Lock, color: 'text-orange-400' },
|
||||
'bun.lockb': { icon: Lock, color: 'text-gray-400' },
|
||||
'Cargo.toml': { icon: Cog, color: 'text-orange-600' },
|
||||
'Cargo.lock': { icon: Lock, color: 'text-orange-400' },
|
||||
'Gemfile': { icon: Gem, color: 'text-red-500' },
|
||||
'Gemfile.lock': { icon: Lock, color: 'text-red-400' },
|
||||
'Makefile': { icon: Terminal, color: 'text-gray-500' },
|
||||
'CMakeLists.txt': { icon: Cog, color: 'text-blue-500' },
|
||||
'tsconfig.json': { icon: Braces, color: 'text-blue-500' },
|
||||
'jsconfig.json': { icon: Braces, color: 'text-yellow-500' },
|
||||
'vite.config.ts': { icon: Flame, color: 'text-purple-500' },
|
||||
'vite.config.js': { icon: Flame, color: 'text-purple-500' },
|
||||
'webpack.config.js':{ icon: Cog, color: 'text-blue-500' },
|
||||
'tailwind.config.js':{ icon: Hash, color: 'text-cyan-500' },
|
||||
'tailwind.config.ts':{ icon: Hash, color: 'text-cyan-500' },
|
||||
'postcss.config.js':{ icon: Cog, color: 'text-red-400' },
|
||||
'babel.config.js': { icon: Settings, color: 'text-yellow-500' },
|
||||
'.babelrc': { icon: Settings, color: 'text-yellow-500' },
|
||||
'README.md': { icon: BookOpen, color: 'text-blue-500' },
|
||||
'LICENSE': { icon: FileCheck, color: 'text-gray-500' },
|
||||
'LICENSE.md': { icon: FileCheck, color: 'text-gray-500' },
|
||||
'CHANGELOG.md': { icon: Scroll, color: 'text-blue-400' },
|
||||
'requirements.txt': { icon: FileText, color: 'text-emerald-400' },
|
||||
'go.mod': { icon: Hexagon, color: 'text-cyan-500' },
|
||||
'go.sum': { icon: Lock, color: 'text-cyan-400' },
|
||||
};
|
||||
|
||||
function getFileIconData(filename) {
|
||||
// 1. Exact filename match
|
||||
if (FILENAME_ICON_MAP[filename]) {
|
||||
return FILENAME_ICON_MAP[filename];
|
||||
}
|
||||
|
||||
// 2. Check for .env prefix pattern
|
||||
if (filename.startsWith('.env')) {
|
||||
return { icon: Shield, color: 'text-yellow-600' };
|
||||
}
|
||||
|
||||
// 3. Extension-based lookup
|
||||
const ext = filename.split('.').pop()?.toLowerCase();
|
||||
if (ext && FILE_ICON_MAP[ext]) {
|
||||
return FILE_ICON_MAP[ext];
|
||||
}
|
||||
|
||||
// 4. Fallback
|
||||
return { icon: File, color: 'text-muted-foreground' };
|
||||
}
|
||||
|
||||
|
||||
// ─── Component ───────────────────────────────────────────────────────
|
||||
|
||||
function FileTree({ selectedProject, onFileOpen }) {
|
||||
const { t } = useTranslation();
|
||||
const [files, setFiles] = useState([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [expandedDirs, setExpandedDirs] = useState(new Set());
|
||||
const [selectedImage, setSelectedImage] = useState(null);
|
||||
const [viewMode, setViewMode] = useState('detailed');
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
const [filteredFiles, setFilteredFiles] = useState([]);
|
||||
|
||||
useEffect(() => {
|
||||
if (selectedProject) {
|
||||
fetchFiles();
|
||||
}
|
||||
}, [selectedProject]);
|
||||
|
||||
useEffect(() => {
|
||||
const savedViewMode = localStorage.getItem('file-tree-view-mode');
|
||||
if (savedViewMode && ['simple', 'detailed', 'compact'].includes(savedViewMode)) {
|
||||
setViewMode(savedViewMode);
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (!searchQuery.trim()) {
|
||||
setFilteredFiles(files);
|
||||
} else {
|
||||
const filtered = filterFiles(files, searchQuery.toLowerCase());
|
||||
setFilteredFiles(filtered);
|
||||
|
||||
const expandMatches = (items) => {
|
||||
items.forEach(item => {
|
||||
if (item.type === 'directory' && item.children && item.children.length > 0) {
|
||||
setExpandedDirs(prev => new Set(prev.add(item.path)));
|
||||
expandMatches(item.children);
|
||||
}
|
||||
});
|
||||
};
|
||||
expandMatches(filtered);
|
||||
}
|
||||
}, [files, searchQuery]);
|
||||
|
||||
const filterFiles = (items, query) => {
|
||||
return items.reduce((filtered, item) => {
|
||||
const matchesName = item.name.toLowerCase().includes(query);
|
||||
let filteredChildren = [];
|
||||
|
||||
if (item.type === 'directory' && item.children) {
|
||||
filteredChildren = filterFiles(item.children, query);
|
||||
}
|
||||
|
||||
if (matchesName || filteredChildren.length > 0) {
|
||||
filtered.push({
|
||||
...item,
|
||||
children: filteredChildren
|
||||
});
|
||||
}
|
||||
|
||||
return filtered;
|
||||
}, []);
|
||||
};
|
||||
|
||||
const fetchFiles = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const response = await api.getFiles(selectedProject.name);
|
||||
|
||||
if (!response.ok) {
|
||||
const errorText = await response.text();
|
||||
console.error('❌ File fetch failed:', response.status, errorText);
|
||||
setFiles([]);
|
||||
return;
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
setFiles(data);
|
||||
} catch (error) {
|
||||
console.error('❌ Error fetching files:', error);
|
||||
setFiles([]);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const toggleDirectory = (path) => {
|
||||
const newExpanded = new Set(expandedDirs);
|
||||
if (newExpanded.has(path)) {
|
||||
newExpanded.delete(path);
|
||||
} else {
|
||||
newExpanded.add(path);
|
||||
}
|
||||
setExpandedDirs(newExpanded);
|
||||
};
|
||||
|
||||
const changeViewMode = (mode) => {
|
||||
setViewMode(mode);
|
||||
localStorage.setItem('file-tree-view-mode', mode);
|
||||
};
|
||||
|
||||
const formatFileSize = (bytes) => {
|
||||
if (!bytes || bytes === 0) return '0 B';
|
||||
const k = 1024;
|
||||
const sizes = ['B', 'KB', 'MB', 'GB'];
|
||||
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
||||
return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];
|
||||
};
|
||||
|
||||
const formatRelativeTime = (date) => {
|
||||
if (!date) return '-';
|
||||
const now = new Date();
|
||||
const past = new Date(date);
|
||||
const diffInSeconds = Math.floor((now - past) / 1000);
|
||||
|
||||
if (diffInSeconds < 60) return t('fileTree.justNow');
|
||||
if (diffInSeconds < 3600) return t('fileTree.minAgo', { count: Math.floor(diffInSeconds / 60) });
|
||||
if (diffInSeconds < 86400) return t('fileTree.hoursAgo', { count: Math.floor(diffInSeconds / 3600) });
|
||||
if (diffInSeconds < 2592000) return t('fileTree.daysAgo', { count: Math.floor(diffInSeconds / 86400) });
|
||||
return past.toLocaleDateString();
|
||||
};
|
||||
|
||||
const isImageFile = (filename) => {
|
||||
const ext = filename.split('.').pop()?.toLowerCase();
|
||||
const imageExtensions = ['png', 'jpg', 'jpeg', 'gif', 'svg', 'webp', 'ico', 'bmp'];
|
||||
return imageExtensions.includes(ext);
|
||||
};
|
||||
|
||||
const getFileIcon = (filename) => {
|
||||
const { icon: Icon, color } = getFileIconData(filename);
|
||||
return <Icon className={cn(ICON_SIZE, color)} />;
|
||||
};
|
||||
|
||||
// ── Click handler shared across all view modes ──
|
||||
const handleItemClick = (item) => {
|
||||
if (item.type === 'directory') {
|
||||
toggleDirectory(item.path);
|
||||
} else if (isImageFile(item.name)) {
|
||||
setSelectedImage({
|
||||
name: item.name,
|
||||
path: item.path,
|
||||
projectPath: selectedProject.path,
|
||||
projectName: selectedProject.name
|
||||
});
|
||||
} else if (onFileOpen) {
|
||||
onFileOpen(item.path);
|
||||
}
|
||||
};
|
||||
|
||||
// ── Indent guide + folder/file icon rendering ──
|
||||
const renderIndentGuides = (level) => {
|
||||
if (level === 0) return null;
|
||||
return (
|
||||
<span className="flex items-center flex-shrink-0" aria-hidden="true">
|
||||
{Array.from({ length: level }).map((_, i) => (
|
||||
<span
|
||||
key={i}
|
||||
className="inline-block w-4 h-full border-l border-border/50"
|
||||
/>
|
||||
))}
|
||||
</span>
|
||||
);
|
||||
};
|
||||
|
||||
const renderItemIcons = (item) => {
|
||||
const isDir = item.type === 'directory';
|
||||
const isOpen = expandedDirs.has(item.path);
|
||||
|
||||
if (isDir) {
|
||||
return (
|
||||
<span className="flex items-center gap-0.5 flex-shrink-0">
|
||||
<ChevronRight
|
||||
className={cn(
|
||||
'w-3.5 h-3.5 text-muted-foreground/70 transition-transform duration-150',
|
||||
isOpen && 'rotate-90'
|
||||
)}
|
||||
/>
|
||||
{isOpen ? (
|
||||
<FolderOpen className="w-4 h-4 text-blue-500 flex-shrink-0" />
|
||||
) : (
|
||||
<Folder className="w-4 h-4 text-muted-foreground flex-shrink-0" />
|
||||
)}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<span className="flex items-center flex-shrink-0 ml-[18px]">
|
||||
{getFileIcon(item.name)}
|
||||
</span>
|
||||
);
|
||||
};
|
||||
|
||||
// ─── Simple (Tree) View ────────────────────────────────────────────
|
||||
const renderFileTree = (items, level = 0) => {
|
||||
return items.map((item) => {
|
||||
const isDir = item.type === 'directory';
|
||||
const isOpen = isDir && expandedDirs.has(item.path);
|
||||
|
||||
return (
|
||||
<div key={item.path} className="select-none">
|
||||
<div
|
||||
className={cn(
|
||||
'group flex items-center gap-1.5 py-[3px] pr-2 cursor-pointer rounded-sm',
|
||||
'hover:bg-accent/60 transition-colors duration-100',
|
||||
isDir && isOpen && 'border-l-2 border-primary/30',
|
||||
isDir && !isOpen && 'border-l-2 border-transparent',
|
||||
!isDir && 'border-l-2 border-transparent',
|
||||
)}
|
||||
style={{ paddingLeft: `${level * 16 + 4}px` }}
|
||||
onClick={() => handleItemClick(item)}
|
||||
>
|
||||
{renderItemIcons(item)}
|
||||
<span className={cn(
|
||||
'text-[13px] leading-tight truncate',
|
||||
isDir ? 'font-medium text-foreground' : 'text-foreground/90'
|
||||
)}>
|
||||
{item.name}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{isDir && isOpen && item.children && item.children.length > 0 && (
|
||||
<div className="relative">
|
||||
<span
|
||||
className="absolute top-0 bottom-0 border-l border-border/40"
|
||||
style={{ left: `${level * 16 + 14}px` }}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
{renderFileTree(item.children, level + 1)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
// ─── Detailed View ────────────────────────────────────────────────
|
||||
const renderDetailedView = (items, level = 0) => {
|
||||
return items.map((item) => {
|
||||
const isDir = item.type === 'directory';
|
||||
const isOpen = isDir && expandedDirs.has(item.path);
|
||||
|
||||
return (
|
||||
<div key={item.path} className="select-none">
|
||||
<div
|
||||
className={cn(
|
||||
'group grid grid-cols-12 gap-2 py-[3px] pr-2 hover:bg-accent/60 cursor-pointer items-center rounded-sm transition-colors duration-100',
|
||||
isDir && isOpen && 'border-l-2 border-primary/30',
|
||||
isDir && !isOpen && 'border-l-2 border-transparent',
|
||||
!isDir && 'border-l-2 border-transparent',
|
||||
)}
|
||||
style={{ paddingLeft: `${level * 16 + 4}px` }}
|
||||
onClick={() => handleItemClick(item)}
|
||||
>
|
||||
<div className="col-span-5 flex items-center gap-1.5 min-w-0">
|
||||
{renderItemIcons(item)}
|
||||
<span className={cn(
|
||||
'text-[13px] leading-tight truncate',
|
||||
isDir ? 'font-medium text-foreground' : 'text-foreground/90'
|
||||
)}>
|
||||
{item.name}
|
||||
</span>
|
||||
</div>
|
||||
<div className="col-span-2 text-sm text-muted-foreground tabular-nums">
|
||||
{item.type === 'file' ? formatFileSize(item.size) : ''}
|
||||
</div>
|
||||
<div className="col-span-3 text-sm text-muted-foreground">
|
||||
{formatRelativeTime(item.modified)}
|
||||
</div>
|
||||
<div className="col-span-2 text-sm text-muted-foreground font-mono">
|
||||
{item.permissionsRwx || ''}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{isDir && isOpen && item.children && (
|
||||
<div className="relative">
|
||||
<span
|
||||
className="absolute top-0 bottom-0 border-l border-border/40"
|
||||
style={{ left: `${level * 16 + 14}px` }}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
{renderDetailedView(item.children, level + 1)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
// ─── Compact View ──────────────────────────────────────────────────
|
||||
const renderCompactView = (items, level = 0) => {
|
||||
return items.map((item) => {
|
||||
const isDir = item.type === 'directory';
|
||||
const isOpen = isDir && expandedDirs.has(item.path);
|
||||
|
||||
return (
|
||||
<div key={item.path} className="select-none">
|
||||
<div
|
||||
className={cn(
|
||||
'group flex items-center justify-between py-[3px] pr-2 hover:bg-accent/60 cursor-pointer rounded-sm transition-colors duration-100',
|
||||
isDir && isOpen && 'border-l-2 border-primary/30',
|
||||
isDir && !isOpen && 'border-l-2 border-transparent',
|
||||
!isDir && 'border-l-2 border-transparent',
|
||||
)}
|
||||
style={{ paddingLeft: `${level * 16 + 4}px` }}
|
||||
onClick={() => handleItemClick(item)}
|
||||
>
|
||||
<div className="flex items-center gap-1.5 min-w-0">
|
||||
{renderItemIcons(item)}
|
||||
<span className={cn(
|
||||
'text-[13px] leading-tight truncate',
|
||||
isDir ? 'font-medium text-foreground' : 'text-foreground/90'
|
||||
)}>
|
||||
{item.name}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3 text-sm text-muted-foreground flex-shrink-0 ml-2">
|
||||
{item.type === 'file' && (
|
||||
<>
|
||||
<span className="tabular-nums">{formatFileSize(item.size)}</span>
|
||||
<span className="font-mono">{item.permissionsRwx}</span>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{isDir && isOpen && item.children && (
|
||||
<div className="relative">
|
||||
<span
|
||||
className="absolute top-0 bottom-0 border-l border-border/40"
|
||||
style={{ left: `${level * 16 + 14}px` }}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
{renderCompactView(item.children, level + 1)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
// ─── Loading state ─────────────────────────────────────────────────
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="h-full flex items-center justify-center">
|
||||
<div className="text-muted-foreground text-sm">
|
||||
{t('fileTree.loading')}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ─── Main render ───────────────────────────────────────────────────
|
||||
return (
|
||||
<div className="h-full flex flex-col bg-background">
|
||||
{/* Header */}
|
||||
<div className="px-3 pt-3 pb-2 border-b border-border space-y-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<h3 className="text-sm font-medium text-foreground">
|
||||
{t('fileTree.files')}
|
||||
</h3>
|
||||
<div className="flex gap-0.5">
|
||||
<Button
|
||||
variant={viewMode === 'simple' ? 'default' : 'ghost'}
|
||||
size="sm"
|
||||
className="h-7 w-7 p-0"
|
||||
onClick={() => changeViewMode('simple')}
|
||||
title={t('fileTree.simpleView')}
|
||||
>
|
||||
<List className="w-3.5 h-3.5" />
|
||||
</Button>
|
||||
<Button
|
||||
variant={viewMode === 'compact' ? 'default' : 'ghost'}
|
||||
size="sm"
|
||||
className="h-7 w-7 p-0"
|
||||
onClick={() => changeViewMode('compact')}
|
||||
title={t('fileTree.compactView')}
|
||||
>
|
||||
<Eye className="w-3.5 h-3.5" />
|
||||
</Button>
|
||||
<Button
|
||||
variant={viewMode === 'detailed' ? 'default' : 'ghost'}
|
||||
size="sm"
|
||||
className="h-7 w-7 p-0"
|
||||
onClick={() => changeViewMode('detailed')}
|
||||
title={t('fileTree.detailedView')}
|
||||
>
|
||||
<TableProperties className="w-3.5 h-3.5" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Search Bar */}
|
||||
<div className="relative">
|
||||
<Search className="absolute left-2 top-1/2 transform -translate-y-1/2 w-3.5 h-3.5 text-muted-foreground" />
|
||||
<Input
|
||||
type="text"
|
||||
placeholder={t('fileTree.searchPlaceholder')}
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
className="pl-8 pr-8 h-8 text-sm"
|
||||
/>
|
||||
{searchQuery && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="absolute right-0.5 top-1/2 transform -translate-y-1/2 h-5 w-5 p-0 hover:bg-accent"
|
||||
onClick={() => setSearchQuery('')}
|
||||
title={t('fileTree.clearSearch')}
|
||||
>
|
||||
<X className="w-3 h-3" />
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Column Headers for Detailed View */}
|
||||
{viewMode === 'detailed' && filteredFiles.length > 0 && (
|
||||
<div className="px-3 pt-1.5 pb-1 border-b border-border">
|
||||
<div className="grid grid-cols-12 gap-2 px-1 text-[10px] font-semibold uppercase tracking-wider text-muted-foreground/70">
|
||||
<div className="col-span-5">{t('fileTree.name')}</div>
|
||||
<div className="col-span-2">{t('fileTree.size')}</div>
|
||||
<div className="col-span-3">{t('fileTree.modified')}</div>
|
||||
<div className="col-span-2">{t('fileTree.permissions')}</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<ScrollArea className="flex-1 px-2 py-1">
|
||||
{files.length === 0 ? (
|
||||
<div className="text-center py-8">
|
||||
<div className="w-12 h-12 bg-muted rounded-lg flex items-center justify-center mx-auto mb-3">
|
||||
<Folder className="w-6 h-6 text-muted-foreground" />
|
||||
</div>
|
||||
<h4 className="font-medium text-foreground mb-1">{t('fileTree.noFilesFound')}</h4>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{t('fileTree.checkProjectPath')}
|
||||
</p>
|
||||
</div>
|
||||
) : filteredFiles.length === 0 && searchQuery ? (
|
||||
<div className="text-center py-8">
|
||||
<div className="w-12 h-12 bg-muted rounded-lg flex items-center justify-center mx-auto mb-3">
|
||||
<Search className="w-6 h-6 text-muted-foreground" />
|
||||
</div>
|
||||
<h4 className="font-medium text-foreground mb-1">{t('fileTree.noMatchesFound')}</h4>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{t('fileTree.tryDifferentSearch')}
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<div>
|
||||
{viewMode === 'simple' && renderFileTree(filteredFiles)}
|
||||
{viewMode === 'compact' && renderCompactView(filteredFiles)}
|
||||
{viewMode === 'detailed' && renderDetailedView(filteredFiles)}
|
||||
</div>
|
||||
)}
|
||||
</ScrollArea>
|
||||
|
||||
{/* Image Viewer Modal */}
|
||||
{selectedImage && (
|
||||
<ImageViewer
|
||||
file={selectedImage}
|
||||
onClose={() => setSelectedImage(null)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default FileTree;
|
||||
1
src/components/FileTree.tsx
Normal file
1
src/components/FileTree.tsx
Normal file
@@ -0,0 +1 @@
|
||||
export { default } from './file-tree/FileTree';
|
||||
110
src/components/file-tree/FileTree.tsx
Normal file
110
src/components/file-tree/FileTree.tsx
Normal file
@@ -0,0 +1,110 @@
|
||||
import { useCallback, useState } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { cn } from '../../lib/utils';
|
||||
import ImageViewer from '../ImageViewer';
|
||||
import { ICON_SIZE_CLASS, getFileIconData } from './constants/fileIcons';
|
||||
import { useExpandedDirectories } from './hooks/useExpandedDirectories';
|
||||
import { useFileTreeData } from './hooks/useFileTreeData';
|
||||
import { useFileTreeSearch } from './hooks/useFileTreeSearch';
|
||||
import { useFileTreeViewMode } from './hooks/useFileTreeViewMode';
|
||||
import type { FileTreeImageSelection, FileTreeNode } from './types/types';
|
||||
import { formatFileSize, formatRelativeTime, isImageFile } from './utils/fileTreeUtils';
|
||||
import FileTreeBody from './view/FileTreeBody';
|
||||
import FileTreeDetailedColumns from './view/FileTreeDetailedColumns';
|
||||
import FileTreeHeader from './view/FileTreeHeader';
|
||||
import FileTreeLoadingState from './view/FileTreeLoadingState';
|
||||
import { Project } from '../../types/app';
|
||||
|
||||
type ImageViewerProps = {
|
||||
file: FileTreeImageSelection;
|
||||
onClose: () => void;
|
||||
};
|
||||
|
||||
const ImageViewerComponent = ImageViewer as unknown as (props: ImageViewerProps) => JSX.Element;
|
||||
|
||||
type FileTreeProps = {
|
||||
selectedProject: Project | null;
|
||||
onFileOpen?: (filePath: string) => void;
|
||||
}
|
||||
|
||||
export default function FileTree({ selectedProject, onFileOpen }: FileTreeProps) {
|
||||
const { t } = useTranslation();
|
||||
const [selectedImage, setSelectedImage] = useState<FileTreeImageSelection | null>(null);
|
||||
|
||||
const { files, loading } = useFileTreeData(selectedProject);
|
||||
const { viewMode, changeViewMode } = useFileTreeViewMode();
|
||||
const { expandedDirs, toggleDirectory, expandDirectories } = useExpandedDirectories();
|
||||
const { searchQuery, setSearchQuery, filteredFiles } = useFileTreeSearch({
|
||||
files,
|
||||
expandDirectories,
|
||||
});
|
||||
|
||||
const renderFileIcon = useCallback((filename: string) => {
|
||||
const { icon: Icon, color } = getFileIconData(filename);
|
||||
return <Icon className={cn(ICON_SIZE_CLASS, color)} />;
|
||||
}, []);
|
||||
|
||||
// Centralized click behavior keeps file actions identical across all presentation modes.
|
||||
const handleItemClick = useCallback(
|
||||
(item: FileTreeNode) => {
|
||||
if (item.type === 'directory') {
|
||||
toggleDirectory(item.path);
|
||||
return;
|
||||
}
|
||||
|
||||
if (isImageFile(item.name) && selectedProject) {
|
||||
setSelectedImage({
|
||||
name: item.name,
|
||||
path: item.path,
|
||||
projectPath: selectedProject.path,
|
||||
projectName: selectedProject.name,
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
onFileOpen?.(item.path);
|
||||
},
|
||||
[onFileOpen, selectedProject, toggleDirectory],
|
||||
);
|
||||
|
||||
const formatRelativeTimeLabel = useCallback(
|
||||
(date?: string) => formatRelativeTime(date, t),
|
||||
[t],
|
||||
);
|
||||
|
||||
if (loading) {
|
||||
return <FileTreeLoadingState />;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="h-full flex flex-col bg-background">
|
||||
<FileTreeHeader
|
||||
viewMode={viewMode}
|
||||
onViewModeChange={changeViewMode}
|
||||
searchQuery={searchQuery}
|
||||
onSearchQueryChange={setSearchQuery}
|
||||
/>
|
||||
|
||||
{viewMode === 'detailed' && filteredFiles.length > 0 && <FileTreeDetailedColumns />}
|
||||
|
||||
<FileTreeBody
|
||||
files={files}
|
||||
filteredFiles={filteredFiles}
|
||||
searchQuery={searchQuery}
|
||||
viewMode={viewMode}
|
||||
expandedDirs={expandedDirs}
|
||||
onItemClick={handleItemClick}
|
||||
renderFileIcon={renderFileIcon}
|
||||
formatFileSize={formatFileSize}
|
||||
formatRelativeTime={formatRelativeTimeLabel}
|
||||
/>
|
||||
|
||||
{selectedImage && (
|
||||
<ImageViewerComponent
|
||||
file={selectedImage}
|
||||
onClose={() => setSelectedImage(null)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
18
src/components/file-tree/constants/constants.ts
Normal file
18
src/components/file-tree/constants/constants.ts
Normal file
@@ -0,0 +1,18 @@
|
||||
import type { FileTreeViewMode } from '../types/types';
|
||||
|
||||
export const FILE_TREE_VIEW_MODE_STORAGE_KEY = 'file-tree-view-mode';
|
||||
|
||||
export const FILE_TREE_DEFAULT_VIEW_MODE: FileTreeViewMode = 'detailed';
|
||||
|
||||
export const FILE_TREE_VIEW_MODES: FileTreeViewMode[] = ['simple', 'compact', 'detailed'];
|
||||
|
||||
export const IMAGE_FILE_EXTENSIONS = new Set([
|
||||
'png',
|
||||
'jpg',
|
||||
'jpeg',
|
||||
'gif',
|
||||
'svg',
|
||||
'webp',
|
||||
'ico',
|
||||
'bmp',
|
||||
]);
|
||||
224
src/components/file-tree/constants/fileIcons.ts
Normal file
224
src/components/file-tree/constants/fileIcons.ts
Normal file
@@ -0,0 +1,224 @@
|
||||
import {
|
||||
Archive,
|
||||
Binary,
|
||||
Blocks,
|
||||
BookOpen,
|
||||
Box,
|
||||
Braces,
|
||||
Code2,
|
||||
Cog,
|
||||
Coffee,
|
||||
Cpu,
|
||||
Database,
|
||||
File,
|
||||
FileCheck,
|
||||
FileCode,
|
||||
FileCode2,
|
||||
FileSpreadsheet,
|
||||
FileText,
|
||||
FileType,
|
||||
Flame,
|
||||
FlaskConical,
|
||||
Gem,
|
||||
Globe,
|
||||
Hash,
|
||||
Hexagon,
|
||||
Image,
|
||||
Lock,
|
||||
Music2,
|
||||
NotebookPen,
|
||||
Palette,
|
||||
Scroll,
|
||||
Settings,
|
||||
Shield,
|
||||
SquareFunction,
|
||||
Terminal,
|
||||
Video,
|
||||
Workflow,
|
||||
} from 'lucide-react';
|
||||
import type { FileIconData, FileIconMap } from '../types/types';
|
||||
|
||||
export const ICON_SIZE_CLASS = 'w-4 h-4 flex-shrink-0';
|
||||
|
||||
const FILE_ICON_MAP: FileIconMap = {
|
||||
js: { icon: FileCode, color: 'text-yellow-500' },
|
||||
jsx: { icon: FileCode, color: 'text-yellow-500' },
|
||||
mjs: { icon: FileCode, color: 'text-yellow-500' },
|
||||
cjs: { icon: FileCode, color: 'text-yellow-500' },
|
||||
ts: { icon: FileCode2, color: 'text-blue-500' },
|
||||
tsx: { icon: FileCode2, color: 'text-blue-500' },
|
||||
mts: { icon: FileCode2, color: 'text-blue-500' },
|
||||
py: { icon: Code2, color: 'text-emerald-500' },
|
||||
pyw: { icon: Code2, color: 'text-emerald-500' },
|
||||
pyi: { icon: Code2, color: 'text-emerald-400' },
|
||||
ipynb: { icon: NotebookPen, color: 'text-orange-500' },
|
||||
rs: { icon: Cog, color: 'text-orange-600' },
|
||||
toml: { icon: Settings, color: 'text-gray-500' },
|
||||
go: { icon: Hexagon, color: 'text-cyan-500' },
|
||||
rb: { icon: Gem, color: 'text-red-500' },
|
||||
erb: { icon: Gem, color: 'text-red-400' },
|
||||
php: { icon: Blocks, color: 'text-violet-500' },
|
||||
java: { icon: Coffee, color: 'text-red-600' },
|
||||
jar: { icon: Coffee, color: 'text-red-500' },
|
||||
kt: { icon: Hexagon, color: 'text-violet-500' },
|
||||
kts: { icon: Hexagon, color: 'text-violet-400' },
|
||||
c: { icon: Cpu, color: 'text-blue-600' },
|
||||
h: { icon: Cpu, color: 'text-blue-400' },
|
||||
cpp: { icon: Cpu, color: 'text-blue-700' },
|
||||
hpp: { icon: Cpu, color: 'text-blue-500' },
|
||||
cc: { icon: Cpu, color: 'text-blue-700' },
|
||||
cs: { icon: Hexagon, color: 'text-purple-600' },
|
||||
swift: { icon: Flame, color: 'text-orange-500' },
|
||||
lua: { icon: SquareFunction, color: 'text-blue-500' },
|
||||
r: { icon: FlaskConical, color: 'text-blue-600' },
|
||||
html: { icon: Globe, color: 'text-orange-600' },
|
||||
htm: { icon: Globe, color: 'text-orange-600' },
|
||||
css: { icon: Hash, color: 'text-blue-500' },
|
||||
scss: { icon: Hash, color: 'text-pink-500' },
|
||||
sass: { icon: Hash, color: 'text-pink-400' },
|
||||
less: { icon: Hash, color: 'text-indigo-500' },
|
||||
vue: { icon: FileCode2, color: 'text-emerald-500' },
|
||||
svelte: { icon: FileCode2, color: 'text-orange-500' },
|
||||
json: { icon: Braces, color: 'text-yellow-600' },
|
||||
jsonc: { icon: Braces, color: 'text-yellow-500' },
|
||||
json5: { icon: Braces, color: 'text-yellow-500' },
|
||||
yaml: { icon: Settings, color: 'text-purple-400' },
|
||||
yml: { icon: Settings, color: 'text-purple-400' },
|
||||
xml: { icon: FileCode, color: 'text-orange-500' },
|
||||
csv: { icon: FileSpreadsheet, color: 'text-green-600' },
|
||||
tsv: { icon: FileSpreadsheet, color: 'text-green-500' },
|
||||
sql: { icon: Database, color: 'text-blue-500' },
|
||||
graphql: { icon: Workflow, color: 'text-pink-500' },
|
||||
gql: { icon: Workflow, color: 'text-pink-500' },
|
||||
proto: { icon: Box, color: 'text-green-500' },
|
||||
env: { icon: Shield, color: 'text-yellow-600' },
|
||||
md: { icon: BookOpen, color: 'text-blue-500' },
|
||||
mdx: { icon: BookOpen, color: 'text-blue-400' },
|
||||
txt: { icon: FileText, color: 'text-gray-500' },
|
||||
doc: { icon: FileText, color: 'text-blue-600' },
|
||||
docx: { icon: FileText, color: 'text-blue-600' },
|
||||
pdf: { icon: FileCheck, color: 'text-red-600' },
|
||||
rtf: { icon: FileText, color: 'text-gray-500' },
|
||||
tex: { icon: Scroll, color: 'text-teal-600' },
|
||||
rst: { icon: FileText, color: 'text-gray-400' },
|
||||
sh: { icon: Terminal, color: 'text-green-500' },
|
||||
bash: { icon: Terminal, color: 'text-green-500' },
|
||||
zsh: { icon: Terminal, color: 'text-green-400' },
|
||||
fish: { icon: Terminal, color: 'text-green-400' },
|
||||
ps1: { icon: Terminal, color: 'text-blue-400' },
|
||||
bat: { icon: Terminal, color: 'text-gray-500' },
|
||||
cmd: { icon: Terminal, color: 'text-gray-500' },
|
||||
png: { icon: Image, color: 'text-purple-500' },
|
||||
jpg: { icon: Image, color: 'text-purple-500' },
|
||||
jpeg: { icon: Image, color: 'text-purple-500' },
|
||||
gif: { icon: Image, color: 'text-purple-400' },
|
||||
webp: { icon: Image, color: 'text-purple-400' },
|
||||
ico: { icon: Image, color: 'text-purple-400' },
|
||||
bmp: { icon: Image, color: 'text-purple-400' },
|
||||
tiff: { icon: Image, color: 'text-purple-400' },
|
||||
svg: { icon: Palette, color: 'text-amber-500' },
|
||||
mp3: { icon: Music2, color: 'text-pink-500' },
|
||||
wav: { icon: Music2, color: 'text-pink-500' },
|
||||
ogg: { icon: Music2, color: 'text-pink-400' },
|
||||
flac: { icon: Music2, color: 'text-pink-400' },
|
||||
aac: { icon: Music2, color: 'text-pink-400' },
|
||||
m4a: { icon: Music2, color: 'text-pink-400' },
|
||||
mp4: { icon: Video, color: 'text-rose-500' },
|
||||
mov: { icon: Video, color: 'text-rose-500' },
|
||||
avi: { icon: Video, color: 'text-rose-500' },
|
||||
webm: { icon: Video, color: 'text-rose-400' },
|
||||
mkv: { icon: Video, color: 'text-rose-400' },
|
||||
ttf: { icon: FileType, color: 'text-red-500' },
|
||||
otf: { icon: FileType, color: 'text-red-500' },
|
||||
woff: { icon: FileType, color: 'text-red-400' },
|
||||
woff2: { icon: FileType, color: 'text-red-400' },
|
||||
eot: { icon: FileType, color: 'text-red-400' },
|
||||
zip: { icon: Archive, color: 'text-amber-600' },
|
||||
tar: { icon: Archive, color: 'text-amber-600' },
|
||||
gz: { icon: Archive, color: 'text-amber-600' },
|
||||
bz2: { icon: Archive, color: 'text-amber-600' },
|
||||
rar: { icon: Archive, color: 'text-amber-500' },
|
||||
'7z': { icon: Archive, color: 'text-amber-500' },
|
||||
lock: { icon: Lock, color: 'text-gray-500' },
|
||||
exe: { icon: Binary, color: 'text-gray-500' },
|
||||
bin: { icon: Binary, color: 'text-gray-500' },
|
||||
dll: { icon: Binary, color: 'text-gray-400' },
|
||||
so: { icon: Binary, color: 'text-gray-400' },
|
||||
dylib: { icon: Binary, color: 'text-gray-400' },
|
||||
wasm: { icon: Binary, color: 'text-purple-500' },
|
||||
ini: { icon: Settings, color: 'text-gray-500' },
|
||||
cfg: { icon: Settings, color: 'text-gray-500' },
|
||||
conf: { icon: Settings, color: 'text-gray-500' },
|
||||
log: { icon: Scroll, color: 'text-gray-400' },
|
||||
map: { icon: File, color: 'text-gray-400' },
|
||||
};
|
||||
|
||||
const FILENAME_ICON_MAP: FileIconMap = {
|
||||
Dockerfile: { icon: Box, color: 'text-blue-500' },
|
||||
'docker-compose.yml': { icon: Box, color: 'text-blue-500' },
|
||||
'docker-compose.yaml': { icon: Box, color: 'text-blue-500' },
|
||||
'.dockerignore': { icon: Box, color: 'text-gray-500' },
|
||||
'.gitignore': { icon: Settings, color: 'text-gray-500' },
|
||||
'.gitmodules': { icon: Settings, color: 'text-gray-500' },
|
||||
'.gitattributes': { icon: Settings, color: 'text-gray-500' },
|
||||
'.editorconfig': { icon: Settings, color: 'text-gray-500' },
|
||||
'.prettierrc': { icon: Settings, color: 'text-pink-400' },
|
||||
'.prettierignore': { icon: Settings, color: 'text-gray-500' },
|
||||
'.eslintrc': { icon: Settings, color: 'text-violet-500' },
|
||||
'.eslintrc.js': { icon: Settings, color: 'text-violet-500' },
|
||||
'.eslintrc.json': { icon: Settings, color: 'text-violet-500' },
|
||||
'.eslintrc.cjs': { icon: Settings, color: 'text-violet-500' },
|
||||
'eslint.config.js': { icon: Settings, color: 'text-violet-500' },
|
||||
'eslint.config.mjs': { icon: Settings, color: 'text-violet-500' },
|
||||
'.env': { icon: Shield, color: 'text-yellow-600' },
|
||||
'.env.local': { icon: Shield, color: 'text-yellow-600' },
|
||||
'.env.development': { icon: Shield, color: 'text-yellow-500' },
|
||||
'.env.production': { icon: Shield, color: 'text-yellow-600' },
|
||||
'.env.example': { icon: Shield, color: 'text-yellow-400' },
|
||||
'package.json': { icon: Braces, color: 'text-green-500' },
|
||||
'package-lock.json': { icon: Lock, color: 'text-gray-500' },
|
||||
'yarn.lock': { icon: Lock, color: 'text-blue-400' },
|
||||
'pnpm-lock.yaml': { icon: Lock, color: 'text-orange-400' },
|
||||
'bun.lockb': { icon: Lock, color: 'text-gray-400' },
|
||||
'Cargo.toml': { icon: Cog, color: 'text-orange-600' },
|
||||
'Cargo.lock': { icon: Lock, color: 'text-orange-400' },
|
||||
Gemfile: { icon: Gem, color: 'text-red-500' },
|
||||
'Gemfile.lock': { icon: Lock, color: 'text-red-400' },
|
||||
Makefile: { icon: Terminal, color: 'text-gray-500' },
|
||||
'CMakeLists.txt': { icon: Cog, color: 'text-blue-500' },
|
||||
'tsconfig.json': { icon: Braces, color: 'text-blue-500' },
|
||||
'jsconfig.json': { icon: Braces, color: 'text-yellow-500' },
|
||||
'vite.config.ts': { icon: Flame, color: 'text-purple-500' },
|
||||
'vite.config.js': { icon: Flame, color: 'text-purple-500' },
|
||||
'webpack.config.js': { icon: Cog, color: 'text-blue-500' },
|
||||
'tailwind.config.js': { icon: Hash, color: 'text-cyan-500' },
|
||||
'tailwind.config.ts': { icon: Hash, color: 'text-cyan-500' },
|
||||
'postcss.config.js': { icon: Cog, color: 'text-red-400' },
|
||||
'babel.config.js': { icon: Settings, color: 'text-yellow-500' },
|
||||
'.babelrc': { icon: Settings, color: 'text-yellow-500' },
|
||||
'README.md': { icon: BookOpen, color: 'text-blue-500' },
|
||||
LICENSE: { icon: FileCheck, color: 'text-gray-500' },
|
||||
'LICENSE.md': { icon: FileCheck, color: 'text-gray-500' },
|
||||
'CHANGELOG.md': { icon: Scroll, color: 'text-blue-400' },
|
||||
'requirements.txt': { icon: FileText, color: 'text-emerald-400' },
|
||||
'go.mod': { icon: Hexagon, color: 'text-cyan-500' },
|
||||
'go.sum': { icon: Lock, color: 'text-cyan-400' },
|
||||
};
|
||||
|
||||
// Icon resolution is deterministic: exact filename, then .env prefixes, then extension, then fallback.
|
||||
export function getFileIconData(filename: string): FileIconData {
|
||||
if (FILENAME_ICON_MAP[filename]) {
|
||||
return FILENAME_ICON_MAP[filename];
|
||||
}
|
||||
|
||||
if (filename.startsWith('.env')) {
|
||||
return { icon: Shield, color: 'text-yellow-600' };
|
||||
}
|
||||
|
||||
const extension = filename.split('.').pop()?.toLowerCase();
|
||||
if (extension && FILE_ICON_MAP[extension]) {
|
||||
return FILE_ICON_MAP[extension];
|
||||
}
|
||||
|
||||
return { icon: File, color: 'text-muted-foreground' };
|
||||
}
|
||||
44
src/components/file-tree/hooks/useExpandedDirectories.ts
Normal file
44
src/components/file-tree/hooks/useExpandedDirectories.ts
Normal file
@@ -0,0 +1,44 @@
|
||||
import { useCallback, useState } from 'react';
|
||||
|
||||
type UseExpandedDirectoriesResult = {
|
||||
expandedDirs: Set<string>;
|
||||
toggleDirectory: (path: string) => void;
|
||||
expandDirectories: (paths: string[]) => void;
|
||||
};
|
||||
|
||||
export function useExpandedDirectories(): UseExpandedDirectoriesResult {
|
||||
const [expandedDirs, setExpandedDirs] = useState<Set<string>>(() => new Set());
|
||||
|
||||
const toggleDirectory = useCallback((path: string) => {
|
||||
setExpandedDirs((previous) => {
|
||||
const next = new Set(previous);
|
||||
|
||||
if (next.has(path)) {
|
||||
next.delete(path);
|
||||
} else {
|
||||
next.add(path);
|
||||
}
|
||||
|
||||
return next;
|
||||
});
|
||||
}, []);
|
||||
|
||||
const expandDirectories = useCallback((paths: string[]) => {
|
||||
if (paths.length === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
setExpandedDirs((previous) => {
|
||||
const next = new Set(previous);
|
||||
paths.forEach((path) => next.add(path));
|
||||
return next;
|
||||
});
|
||||
}, []);
|
||||
|
||||
return {
|
||||
expandedDirs,
|
||||
toggleDirectory,
|
||||
expandDirectories,
|
||||
};
|
||||
}
|
||||
|
||||
75
src/components/file-tree/hooks/useFileTreeData.ts
Normal file
75
src/components/file-tree/hooks/useFileTreeData.ts
Normal file
@@ -0,0 +1,75 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { api } from '../../../utils/api';
|
||||
import type { Project } from '../../../types/app';
|
||||
import type { FileTreeNode } from '../types/types';
|
||||
|
||||
type UseFileTreeDataResult = {
|
||||
files: FileTreeNode[];
|
||||
loading: boolean;
|
||||
};
|
||||
|
||||
export function useFileTreeData(selectedProject: Project | null): UseFileTreeDataResult {
|
||||
const [files, setFiles] = useState<FileTreeNode[]>([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const projectName = selectedProject?.name;
|
||||
|
||||
if (!projectName) {
|
||||
setFiles([]);
|
||||
return;
|
||||
}
|
||||
|
||||
const abortController = new AbortController();
|
||||
// Track mount state so aborted or late responses do not enqueue stale state updates.
|
||||
let isActive = true;
|
||||
|
||||
const fetchFiles = async () => {
|
||||
if (isActive) {
|
||||
setLoading(true);
|
||||
}
|
||||
try {
|
||||
const response = await api.getFiles(projectName, { signal: abortController.signal });
|
||||
|
||||
if (!response.ok) {
|
||||
const errorText = await response.text();
|
||||
console.error('File fetch failed:', response.status, errorText);
|
||||
if (isActive) {
|
||||
setFiles([]);
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
const data = (await response.json()) as FileTreeNode[];
|
||||
if (isActive) {
|
||||
setFiles(data);
|
||||
}
|
||||
} catch (error) {
|
||||
if ((error as { name?: string }).name === 'AbortError') {
|
||||
return;
|
||||
}
|
||||
|
||||
console.error('Error fetching files:', error);
|
||||
if (isActive) {
|
||||
setFiles([]);
|
||||
}
|
||||
} finally {
|
||||
if (isActive) {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
void fetchFiles();
|
||||
|
||||
return () => {
|
||||
isActive = false;
|
||||
abortController.abort();
|
||||
};
|
||||
}, [selectedProject?.name]);
|
||||
|
||||
return {
|
||||
files,
|
||||
loading,
|
||||
};
|
||||
}
|
||||
42
src/components/file-tree/hooks/useFileTreeSearch.ts
Normal file
42
src/components/file-tree/hooks/useFileTreeSearch.ts
Normal file
@@ -0,0 +1,42 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { collectExpandedDirectoryPaths, filterFileTree } from '../utils/fileTreeUtils';
|
||||
import type { FileTreeNode } from '../types/types';
|
||||
|
||||
type UseFileTreeSearchArgs = {
|
||||
files: FileTreeNode[];
|
||||
expandDirectories: (paths: string[]) => void;
|
||||
};
|
||||
|
||||
type UseFileTreeSearchResult = {
|
||||
searchQuery: string;
|
||||
setSearchQuery: (query: string) => void;
|
||||
filteredFiles: FileTreeNode[];
|
||||
};
|
||||
|
||||
export function useFileTreeSearch({
|
||||
files,
|
||||
expandDirectories,
|
||||
}: UseFileTreeSearchArgs): UseFileTreeSearchResult {
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
const [filteredFiles, setFilteredFiles] = useState<FileTreeNode[]>(files);
|
||||
|
||||
useEffect(() => {
|
||||
const query = searchQuery.trim().toLowerCase();
|
||||
|
||||
if (!query) {
|
||||
setFilteredFiles(files);
|
||||
return;
|
||||
}
|
||||
|
||||
const filtered = filterFileTree(files, query);
|
||||
setFilteredFiles(filtered);
|
||||
// Keep search results visible by opening every matching ancestor directory once per query update.
|
||||
expandDirectories(collectExpandedDirectoryPaths(filtered));
|
||||
}, [files, searchQuery, expandDirectories]);
|
||||
|
||||
return {
|
||||
searchQuery,
|
||||
setSearchQuery,
|
||||
filteredFiles,
|
||||
};
|
||||
}
|
||||
43
src/components/file-tree/hooks/useFileTreeViewMode.ts
Normal file
43
src/components/file-tree/hooks/useFileTreeViewMode.ts
Normal file
@@ -0,0 +1,43 @@
|
||||
import { useCallback, useEffect, useState } from 'react';
|
||||
import {
|
||||
FILE_TREE_DEFAULT_VIEW_MODE,
|
||||
FILE_TREE_VIEW_MODES,
|
||||
FILE_TREE_VIEW_MODE_STORAGE_KEY,
|
||||
} from '../constants/constants';
|
||||
import type { FileTreeViewMode } from '../types/types';
|
||||
|
||||
type UseFileTreeViewModeResult = {
|
||||
viewMode: FileTreeViewMode;
|
||||
changeViewMode: (mode: FileTreeViewMode) => void;
|
||||
};
|
||||
|
||||
export function useFileTreeViewMode(): UseFileTreeViewModeResult {
|
||||
const [viewMode, setViewMode] = useState<FileTreeViewMode>(FILE_TREE_DEFAULT_VIEW_MODE);
|
||||
|
||||
useEffect(() => {
|
||||
try {
|
||||
const savedViewMode = localStorage.getItem(FILE_TREE_VIEW_MODE_STORAGE_KEY);
|
||||
if (savedViewMode && FILE_TREE_VIEW_MODES.includes(savedViewMode as FileTreeViewMode)) {
|
||||
setViewMode(savedViewMode as FileTreeViewMode);
|
||||
}
|
||||
} catch {
|
||||
// Keep default view mode when storage is unavailable.
|
||||
}
|
||||
}, []);
|
||||
|
||||
const changeViewMode = useCallback((mode: FileTreeViewMode) => {
|
||||
setViewMode(mode);
|
||||
|
||||
try {
|
||||
localStorage.setItem(FILE_TREE_VIEW_MODE_STORAGE_KEY, mode);
|
||||
} catch {
|
||||
// Keep runtime state even when persistence fails.
|
||||
}
|
||||
}, []);
|
||||
|
||||
return {
|
||||
viewMode,
|
||||
changeViewMode,
|
||||
};
|
||||
}
|
||||
|
||||
30
src/components/file-tree/types/types.ts
Normal file
30
src/components/file-tree/types/types.ts
Normal file
@@ -0,0 +1,30 @@
|
||||
import type { LucideIcon } from 'lucide-react';
|
||||
|
||||
export type FileTreeViewMode = 'simple' | 'compact' | 'detailed';
|
||||
|
||||
export type FileTreeItemType = 'file' | 'directory';
|
||||
|
||||
export interface FileTreeNode {
|
||||
name: string;
|
||||
type: FileTreeItemType;
|
||||
path: string;
|
||||
size?: number;
|
||||
modified?: string;
|
||||
permissionsRwx?: string;
|
||||
children?: FileTreeNode[];
|
||||
[key: string]: unknown;
|
||||
}
|
||||
|
||||
export interface FileTreeImageSelection {
|
||||
name: string;
|
||||
path: string;
|
||||
projectPath?: string;
|
||||
projectName: string;
|
||||
}
|
||||
|
||||
export interface FileIconData {
|
||||
icon: LucideIcon;
|
||||
color: string;
|
||||
}
|
||||
|
||||
export type FileIconMap = Record<string, FileIconData>;
|
||||
83
src/components/file-tree/utils/fileTreeUtils.ts
Normal file
83
src/components/file-tree/utils/fileTreeUtils.ts
Normal file
@@ -0,0 +1,83 @@
|
||||
import type { TFunction } from 'i18next';
|
||||
import { IMAGE_FILE_EXTENSIONS } from '../constants/constants';
|
||||
import type { FileTreeNode } from '../types/types';
|
||||
|
||||
export function filterFileTree(items: FileTreeNode[], query: string): FileTreeNode[] {
|
||||
return items.reduce<FileTreeNode[]>((filteredItems, item) => {
|
||||
const matchesName = item.name.toLowerCase().includes(query);
|
||||
const filteredChildren =
|
||||
item.type === 'directory' && item.children ? filterFileTree(item.children, query) : [];
|
||||
|
||||
if (matchesName || filteredChildren.length > 0) {
|
||||
filteredItems.push({
|
||||
...item,
|
||||
children: filteredChildren,
|
||||
});
|
||||
}
|
||||
|
||||
return filteredItems;
|
||||
}, []);
|
||||
}
|
||||
|
||||
// During search we auto-expand every directory present in the filtered subtree.
|
||||
export function collectExpandedDirectoryPaths(items: FileTreeNode[]): string[] {
|
||||
const paths: string[] = [];
|
||||
|
||||
const visit = (nodes: FileTreeNode[]) => {
|
||||
nodes.forEach((node) => {
|
||||
if (node.type === 'directory' && node.children && node.children.length > 0) {
|
||||
paths.push(node.path);
|
||||
visit(node.children);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
visit(items);
|
||||
return paths;
|
||||
}
|
||||
|
||||
export function formatFileSize(bytes?: number): string {
|
||||
if (!bytes || bytes === 0) {
|
||||
return '0 B';
|
||||
}
|
||||
|
||||
const base = 1024;
|
||||
const sizes = ['B', 'KB', 'MB', 'GB'];
|
||||
const index = Math.floor(Math.log(bytes) / Math.log(base));
|
||||
|
||||
return `${(bytes / Math.pow(base, index)).toFixed(1).replace(/\.0$/, '')} ${sizes[index]}`;
|
||||
}
|
||||
|
||||
export function formatRelativeTime(date: string | undefined, t: TFunction): string {
|
||||
if (!date) {
|
||||
return '-';
|
||||
}
|
||||
|
||||
const now = new Date();
|
||||
const past = new Date(date);
|
||||
const diffInSeconds = Math.floor((now.getTime() - past.getTime()) / 1000);
|
||||
|
||||
if (diffInSeconds < 60) {
|
||||
return t('fileTree.justNow');
|
||||
}
|
||||
|
||||
if (diffInSeconds < 3600) {
|
||||
return t('fileTree.minAgo', { count: Math.floor(diffInSeconds / 60) });
|
||||
}
|
||||
|
||||
if (diffInSeconds < 86400) {
|
||||
return t('fileTree.hoursAgo', { count: Math.floor(diffInSeconds / 3600) });
|
||||
}
|
||||
|
||||
if (diffInSeconds < 2592000) {
|
||||
return t('fileTree.daysAgo', { count: Math.floor(diffInSeconds / 86400) });
|
||||
}
|
||||
|
||||
return past.toLocaleDateString();
|
||||
}
|
||||
|
||||
export function isImageFile(filename: string): boolean {
|
||||
const extension = filename.split('.').pop()?.toLowerCase();
|
||||
return Boolean(extension && IMAGE_FILE_EXTENSIONS.has(extension));
|
||||
}
|
||||
|
||||
62
src/components/file-tree/view/FileTreeBody.tsx
Normal file
62
src/components/file-tree/view/FileTreeBody.tsx
Normal file
@@ -0,0 +1,62 @@
|
||||
import type { ReactNode } from 'react';
|
||||
import { Folder, Search } from 'lucide-react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { ScrollArea } from '../../ui/scroll-area';
|
||||
import type { FileTreeNode, FileTreeViewMode } from '../types/types';
|
||||
import FileTreeEmptyState from './FileTreeEmptyState';
|
||||
import FileTreeList from './FileTreeList';
|
||||
|
||||
type FileTreeBodyProps = {
|
||||
files: FileTreeNode[];
|
||||
filteredFiles: FileTreeNode[];
|
||||
searchQuery: string;
|
||||
viewMode: FileTreeViewMode;
|
||||
expandedDirs: Set<string>;
|
||||
onItemClick: (item: FileTreeNode) => void;
|
||||
renderFileIcon: (filename: string) => ReactNode;
|
||||
formatFileSize: (bytes?: number) => string;
|
||||
formatRelativeTime: (date?: string) => string;
|
||||
};
|
||||
|
||||
export default function FileTreeBody({
|
||||
files,
|
||||
filteredFiles,
|
||||
searchQuery,
|
||||
viewMode,
|
||||
expandedDirs,
|
||||
onItemClick,
|
||||
renderFileIcon,
|
||||
formatFileSize,
|
||||
formatRelativeTime,
|
||||
}: FileTreeBodyProps) {
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<ScrollArea className="flex-1 px-2 py-1">
|
||||
{files.length === 0 ? (
|
||||
<FileTreeEmptyState
|
||||
icon={Folder}
|
||||
title={t('fileTree.noFilesFound')}
|
||||
description={t('fileTree.checkProjectPath')}
|
||||
/>
|
||||
) : filteredFiles.length === 0 && searchQuery ? (
|
||||
<FileTreeEmptyState
|
||||
icon={Search}
|
||||
title={t('fileTree.noMatchesFound')}
|
||||
description={t('fileTree.tryDifferentSearch')}
|
||||
/>
|
||||
) : (
|
||||
<FileTreeList
|
||||
items={filteredFiles}
|
||||
viewMode={viewMode}
|
||||
expandedDirs={expandedDirs}
|
||||
onItemClick={onItemClick}
|
||||
renderFileIcon={renderFileIcon}
|
||||
formatFileSize={formatFileSize}
|
||||
formatRelativeTime={formatRelativeTime}
|
||||
/>
|
||||
)}
|
||||
</ScrollArea>
|
||||
);
|
||||
}
|
||||
|
||||
17
src/components/file-tree/view/FileTreeDetailedColumns.tsx
Normal file
17
src/components/file-tree/view/FileTreeDetailedColumns.tsx
Normal file
@@ -0,0 +1,17 @@
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
export default function FileTreeDetailedColumns() {
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<div className="px-3 pt-1.5 pb-1 border-b border-border">
|
||||
<div className="grid grid-cols-12 gap-2 px-1 text-[10px] font-semibold uppercase tracking-wider text-muted-foreground/70">
|
||||
<div className="col-span-5">{t('fileTree.name')}</div>
|
||||
<div className="col-span-2">{t('fileTree.size')}</div>
|
||||
<div className="col-span-3">{t('fileTree.modified')}</div>
|
||||
<div className="col-span-2">{t('fileTree.permissions')}</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
20
src/components/file-tree/view/FileTreeEmptyState.tsx
Normal file
20
src/components/file-tree/view/FileTreeEmptyState.tsx
Normal file
@@ -0,0 +1,20 @@
|
||||
import type { LucideIcon } from 'lucide-react';
|
||||
|
||||
type FileTreeEmptyStateProps = {
|
||||
icon: LucideIcon;
|
||||
title: string;
|
||||
description: string;
|
||||
};
|
||||
|
||||
export default function FileTreeEmptyState({ icon: Icon, title, description }: FileTreeEmptyStateProps) {
|
||||
return (
|
||||
<div className="text-center py-8">
|
||||
<div className="w-12 h-12 bg-muted rounded-lg flex items-center justify-center mx-auto mb-3">
|
||||
<Icon className="w-6 h-6 text-muted-foreground" />
|
||||
</div>
|
||||
<h4 className="font-medium text-foreground mb-1">{title}</h4>
|
||||
<p className="text-sm text-muted-foreground">{description}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
81
src/components/file-tree/view/FileTreeHeader.tsx
Normal file
81
src/components/file-tree/view/FileTreeHeader.tsx
Normal file
@@ -0,0 +1,81 @@
|
||||
import { Eye, List, Search, TableProperties, X } from 'lucide-react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Button } from '../../ui/button';
|
||||
import { Input } from '../../ui/input';
|
||||
import type { FileTreeViewMode } from '../types/types';
|
||||
|
||||
type FileTreeHeaderProps = {
|
||||
viewMode: FileTreeViewMode;
|
||||
onViewModeChange: (mode: FileTreeViewMode) => void;
|
||||
searchQuery: string;
|
||||
onSearchQueryChange: (query: string) => void;
|
||||
};
|
||||
|
||||
export default function FileTreeHeader({
|
||||
viewMode,
|
||||
onViewModeChange,
|
||||
searchQuery,
|
||||
onSearchQueryChange,
|
||||
}: FileTreeHeaderProps) {
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<div className="px-3 pt-3 pb-2 border-b border-border space-y-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<h3 className="text-sm font-medium text-foreground">{t('fileTree.files')}</h3>
|
||||
<div className="flex gap-0.5">
|
||||
<Button
|
||||
variant={viewMode === 'simple' ? 'default' : 'ghost'}
|
||||
size="sm"
|
||||
className="h-7 w-7 p-0"
|
||||
onClick={() => onViewModeChange('simple')}
|
||||
title={t('fileTree.simpleView')}
|
||||
>
|
||||
<List className="w-3.5 h-3.5" />
|
||||
</Button>
|
||||
<Button
|
||||
variant={viewMode === 'compact' ? 'default' : 'ghost'}
|
||||
size="sm"
|
||||
className="h-7 w-7 p-0"
|
||||
onClick={() => onViewModeChange('compact')}
|
||||
title={t('fileTree.compactView')}
|
||||
>
|
||||
<Eye className="w-3.5 h-3.5" />
|
||||
</Button>
|
||||
<Button
|
||||
variant={viewMode === 'detailed' ? 'default' : 'ghost'}
|
||||
size="sm"
|
||||
className="h-7 w-7 p-0"
|
||||
onClick={() => onViewModeChange('detailed')}
|
||||
title={t('fileTree.detailedView')}
|
||||
>
|
||||
<TableProperties className="w-3.5 h-3.5" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="relative">
|
||||
<Search className="absolute left-2 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-muted-foreground" />
|
||||
<Input
|
||||
type="text"
|
||||
placeholder={t('fileTree.searchPlaceholder')}
|
||||
value={searchQuery}
|
||||
onChange={(event) => onSearchQueryChange(event.target.value)}
|
||||
className="pl-8 pr-8 h-8 text-sm"
|
||||
/>
|
||||
{searchQuery && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="absolute right-0.5 top-1/2 -translate-y-1/2 h-5 w-5 p-0 hover:bg-accent"
|
||||
onClick={() => onSearchQueryChange('')}
|
||||
title={t('fileTree.clearSearch')}
|
||||
>
|
||||
<X className="w-3 h-3" />
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
42
src/components/file-tree/view/FileTreeList.tsx
Normal file
42
src/components/file-tree/view/FileTreeList.tsx
Normal file
@@ -0,0 +1,42 @@
|
||||
import type { ReactNode } from 'react';
|
||||
import type { FileTreeNode as FileTreeNodeType, FileTreeViewMode } from '../types/types';
|
||||
import FileTreeNode from './FileTreeNode';
|
||||
|
||||
type FileTreeListProps = {
|
||||
items: FileTreeNodeType[];
|
||||
viewMode: FileTreeViewMode;
|
||||
expandedDirs: Set<string>;
|
||||
onItemClick: (item: FileTreeNodeType) => void;
|
||||
renderFileIcon: (filename: string) => ReactNode;
|
||||
formatFileSize: (bytes?: number) => string;
|
||||
formatRelativeTime: (date?: string) => string;
|
||||
};
|
||||
|
||||
export default function FileTreeList({
|
||||
items,
|
||||
viewMode,
|
||||
expandedDirs,
|
||||
onItemClick,
|
||||
renderFileIcon,
|
||||
formatFileSize,
|
||||
formatRelativeTime,
|
||||
}: FileTreeListProps) {
|
||||
return (
|
||||
<div>
|
||||
{items.map((item) => (
|
||||
<FileTreeNode
|
||||
key={item.path}
|
||||
item={item}
|
||||
level={0}
|
||||
viewMode={viewMode}
|
||||
expandedDirs={expandedDirs}
|
||||
onItemClick={onItemClick}
|
||||
renderFileIcon={renderFileIcon}
|
||||
formatFileSize={formatFileSize}
|
||||
formatRelativeTime={formatRelativeTime}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
12
src/components/file-tree/view/FileTreeLoadingState.tsx
Normal file
12
src/components/file-tree/view/FileTreeLoadingState.tsx
Normal file
@@ -0,0 +1,12 @@
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
export default function FileTreeLoadingState() {
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<div className="h-full flex items-center justify-center">
|
||||
<div className="text-muted-foreground text-sm">{t('fileTree.loading')}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
141
src/components/file-tree/view/FileTreeNode.tsx
Normal file
141
src/components/file-tree/view/FileTreeNode.tsx
Normal file
@@ -0,0 +1,141 @@
|
||||
import type { ReactNode } from 'react';
|
||||
import { ChevronRight, Folder, FolderOpen } from 'lucide-react';
|
||||
import { cn } from '../../../lib/utils';
|
||||
import type { FileTreeNode as FileTreeNodeType, FileTreeViewMode } from '../types/types';
|
||||
|
||||
type FileTreeNodeProps = {
|
||||
item: FileTreeNodeType;
|
||||
level: number;
|
||||
viewMode: FileTreeViewMode;
|
||||
expandedDirs: Set<string>;
|
||||
onItemClick: (item: FileTreeNodeType) => void;
|
||||
renderFileIcon: (filename: string) => ReactNode;
|
||||
formatFileSize: (bytes?: number) => string;
|
||||
formatRelativeTime: (date?: string) => string;
|
||||
};
|
||||
|
||||
type TreeItemIconProps = {
|
||||
item: FileTreeNodeType;
|
||||
isOpen: boolean;
|
||||
renderFileIcon: (filename: string) => ReactNode;
|
||||
};
|
||||
|
||||
function TreeItemIcon({ item, isOpen, renderFileIcon }: TreeItemIconProps) {
|
||||
if (item.type === 'directory') {
|
||||
return (
|
||||
<span className="flex items-center gap-0.5 flex-shrink-0">
|
||||
<ChevronRight
|
||||
className={cn(
|
||||
'w-3.5 h-3.5 text-muted-foreground/70 transition-transform duration-150',
|
||||
isOpen && 'rotate-90',
|
||||
)}
|
||||
/>
|
||||
{isOpen ? (
|
||||
<FolderOpen className="w-4 h-4 text-blue-500 flex-shrink-0" />
|
||||
) : (
|
||||
<Folder className="w-4 h-4 text-muted-foreground flex-shrink-0" />
|
||||
)}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
return <span className="flex items-center flex-shrink-0 ml-[18px]">{renderFileIcon(item.name)}</span>;
|
||||
}
|
||||
|
||||
export default function FileTreeNode({
|
||||
item,
|
||||
level,
|
||||
viewMode,
|
||||
expandedDirs,
|
||||
onItemClick,
|
||||
renderFileIcon,
|
||||
formatFileSize,
|
||||
formatRelativeTime,
|
||||
}: FileTreeNodeProps) {
|
||||
const isDirectory = item.type === 'directory';
|
||||
const isOpen = isDirectory && expandedDirs.has(item.path);
|
||||
const hasChildren = Boolean(isDirectory && item.children && item.children.length > 0);
|
||||
|
||||
const nameClassName = cn(
|
||||
'text-[13px] leading-tight truncate',
|
||||
isDirectory ? 'font-medium text-foreground' : 'text-foreground/90',
|
||||
);
|
||||
|
||||
// View mode only changes the row layout; selection, expansion, and recursion stay shared.
|
||||
const rowClassName = cn(
|
||||
viewMode === 'detailed'
|
||||
? 'group grid grid-cols-12 gap-2 py-[3px] pr-2 hover:bg-accent/60 cursor-pointer items-center rounded-sm transition-colors duration-100'
|
||||
: viewMode === 'compact'
|
||||
? 'group flex items-center justify-between py-[3px] pr-2 hover:bg-accent/60 cursor-pointer rounded-sm transition-colors duration-100'
|
||||
: 'group flex items-center gap-1.5 py-[3px] pr-2 cursor-pointer rounded-sm hover:bg-accent/60 transition-colors duration-100',
|
||||
isDirectory && isOpen && 'border-l-2 border-primary/30',
|
||||
(isDirectory && !isOpen) || !isDirectory ? 'border-l-2 border-transparent' : '',
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="select-none">
|
||||
<div
|
||||
className={rowClassName}
|
||||
style={{ paddingLeft: `${level * 16 + 4}px` }}
|
||||
onClick={() => onItemClick(item)}
|
||||
>
|
||||
{viewMode === 'detailed' ? (
|
||||
<>
|
||||
<div className="col-span-5 flex items-center gap-1.5 min-w-0">
|
||||
<TreeItemIcon item={item} isOpen={isOpen} renderFileIcon={renderFileIcon} />
|
||||
<span className={nameClassName}>{item.name}</span>
|
||||
</div>
|
||||
<div className="col-span-2 text-sm text-muted-foreground tabular-nums">
|
||||
{item.type === 'file' ? formatFileSize(item.size) : ''}
|
||||
</div>
|
||||
<div className="col-span-3 text-sm text-muted-foreground">{formatRelativeTime(item.modified)}</div>
|
||||
<div className="col-span-2 text-sm text-muted-foreground font-mono">{item.permissionsRwx || ''}</div>
|
||||
</>
|
||||
) : viewMode === 'compact' ? (
|
||||
<>
|
||||
<div className="flex items-center gap-1.5 min-w-0">
|
||||
<TreeItemIcon item={item} isOpen={isOpen} renderFileIcon={renderFileIcon} />
|
||||
<span className={nameClassName}>{item.name}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3 text-sm text-muted-foreground flex-shrink-0 ml-2">
|
||||
{item.type === 'file' && (
|
||||
<>
|
||||
<span className="tabular-nums">{formatFileSize(item.size)}</span>
|
||||
<span className="font-mono">{item.permissionsRwx}</span>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<TreeItemIcon item={item} isOpen={isOpen} renderFileIcon={renderFileIcon} />
|
||||
<span className={nameClassName}>{item.name}</span>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{isDirectory && isOpen && hasChildren && (
|
||||
<div className="relative">
|
||||
<span
|
||||
className="absolute top-0 bottom-0 border-l border-border/40"
|
||||
style={{ left: `${level * 16 + 14}px` }}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
{item.children?.map((child) => (
|
||||
<FileTreeNode
|
||||
key={child.path}
|
||||
item={child}
|
||||
level={level + 1}
|
||||
viewMode={viewMode}
|
||||
expandedDirs={expandedDirs}
|
||||
onItemClick={onItemClick}
|
||||
renderFileIcon={renderFileIcon}
|
||||
formatFileSize={formatFileSize}
|
||||
formatRelativeTime={formatRelativeTime}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user