import React from 'react'; import { RiArrowLeftSLine, RiClipboardLine, RiCloseLine, RiCodeLine, RiFileImageLine, RiFileTextLine, RiFileCopy2Line, RiFolder3Fill, RiFolderOpenFill, RiLoader4Line, RiRefreshLine, RiSearchLine, RiSave3Line, RiSendPlane2Line, RiTextWrap, RiMore2Fill, RiFileAddLine, RiFolderAddLine, RiDeleteBinLine, RiEditLine, RiFileCopyLine, } from '@remixicon/react'; import { toast } from '@/components/ui'; import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, } from '@/components/ui/dropdown-menu'; import { ScrollableOverlay } from '@/components/ui/ScrollableOverlay'; import { Input } from '@/components/ui/input'; import { Button } from '@/components/ui/button'; import { Textarea } from '@/components/ui/textarea'; import { CodeMirrorEditor } from '@/components/ui/CodeMirrorEditor'; import { languageByExtension } from '@/lib/codemirror/languageByExtension'; import { createFlexokiCodeMirrorTheme } from '@/lib/codemirror/flexokiTheme'; import { generateSyntaxTheme } from '@/lib/theme/syntaxThemeGenerator'; import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, } from '@/components/ui/dialog'; import { useDebouncedValue } from '@/hooks/useDebouncedValue'; import { useFileSearchStore } from '@/stores/useFileSearchStore'; import { useDeviceInfo } from '@/lib/device'; import { cn, getModifierLabel, hasModifier } from '@/lib/utils'; import { getLanguageFromExtension, getImageMimeType, isImageFile } from '@/lib/toolHelpers'; import { useRuntimeAPIs } from '@/hooks/useRuntimeAPIs'; import { EditorView } from '@codemirror/view'; import { useThemeSystem } from '@/contexts/useThemeSystem'; import { useSessionStore } from '@/stores/useSessionStore'; import { useConfigStore } from '@/stores/useConfigStore'; import { useContextStore } from '@/stores/contextStore'; import { useUIStore } from '@/stores/useUIStore'; import { useDirectoryStore } from '@/stores/useDirectoryStore'; import { opencodeClient } from '@/lib/opencode/client'; import { useDirectoryShowHidden } from '@/lib/directoryShowHidden'; import { useFilesViewShowGitignored } from '@/lib/filesViewShowGitignored'; type FileNode = { name: string; path: string; type: 'file' | 'directory'; extension?: string; relativePath?: string; }; type SelectedLineRange = { start: number; end: number; }; const sortNodes = (items: FileNode[]) => items.slice().sort((a, b) => { if (a.type !== b.type) { return a.type === 'directory' ? -1 : 1; } return a.name.localeCompare(b.name); }); const normalizePath = (value: string): string => value.replace(/\\/g, '/'); const DEFAULT_IGNORED_DIR_NAMES = new Set(['node_modules']); const shouldIgnoreEntryName = (name: string): boolean => DEFAULT_IGNORED_DIR_NAMES.has(name); const shouldIgnorePath = (path: string): boolean => { const normalized = normalizePath(path); return normalized === 'node_modules' || normalized.endsWith('/node_modules') || normalized.includes('/node_modules/'); }; const useEffectiveDirectory = () => { const { currentSessionId, sessions, worktreeMetadata: worktreeMap } = useSessionStore(); const { currentDirectory: fallbackDirectory } = useDirectoryStore(); const worktreeMetadata = currentSessionId ? worktreeMap.get(currentSessionId) ?? undefined : undefined; const currentSession = sessions.find((session) => session.id === currentSessionId); type SessionWithDirectory = { directory?: string }; const sessionDirectory = (currentSession as unknown as SessionWithDirectory | undefined)?.directory; return worktreeMetadata?.path ?? sessionDirectory ?? fallbackDirectory ?? ''; }; const MAX_VIEW_CHARS = 200_000; const CODE_EXTENSIONS = new Set([ // JavaScript/TypeScript 'js', 'jsx', 'ts', 'tsx', 'mjs', 'cjs', 'mts', 'cts', // Web 'html', 'htm', 'xhtml', 'css', 'scss', 'sass', 'less', 'styl', 'stylus', 'vue', 'svelte', 'astro', // Shell/Scripts 'sh', 'bash', 'zsh', 'fish', 'ps1', 'psm1', 'bat', 'cmd', // Python 'py', 'pyw', 'pyx', 'pxd', 'pxi', // Ruby 'rb', 'erb', 'rake', 'gemspec', // PHP 'php', 'phtml', 'php3', 'php4', 'php5', 'phps', // Java/JVM 'java', 'kt', 'kts', 'scala', 'sc', 'groovy', 'gradle', // C/C++/Objective-C 'c', 'h', 'cpp', 'cc', 'cxx', 'hpp', 'hxx', 'hh', 'm', 'mm', // C#/F#/.NET 'cs', 'fs', 'fsx', 'fsi', // Go 'go', // Rust 'rs', // Swift 'swift', // Dart 'dart', // Lua 'lua', // Perl 'pl', 'pm', 'pod', // R 'r', 'R', 'rmd', // Julia 'jl', // Haskell 'hs', 'lhs', // Elixir/Erlang 'ex', 'exs', 'erl', 'hrl', // Clojure 'clj', 'cljs', 'cljc', 'edn', // Lisp/Scheme 'lisp', 'cl', 'el', 'scm', 'ss', 'rkt', // OCaml/ReasonML 'ml', 'mli', 're', 'rei', // Nim 'nim', // Zig 'zig', // V 'v', // Crystal 'cr', // Kotlin Script 'main.kts', // SQL 'sql', 'psql', 'plsql', // GraphQL 'graphql', 'gql', // Solidity 'sol', // Assembly 'asm', 's', 'S', // Makefile variants 'mk', // Nix 'nix', // Terraform 'tf', 'tfvars', // Puppet 'pp', // Ansible 'ansible', ]); const DATA_EXTENSIONS = new Set([ // JSON variants 'json', 'jsonc', 'json5', 'jsonl', 'ndjson', 'geojson', // YAML 'yaml', 'yml', // TOML 'toml', // XML variants 'xml', 'xsl', 'xslt', 'xsd', 'dtd', 'plist', // Config files 'ini', 'cfg', 'conf', 'config', 'env', 'properties', // CSV/TSV 'csv', 'tsv', // Lock files 'lock', ]); const IMAGE_EXTENSIONS = new Set([ 'png', 'jpg', 'jpeg', 'gif', 'svg', 'webp', 'ico', 'icns', 'bmp', 'tiff', 'tif', 'psd', 'ai', 'eps', 'raw', 'cr2', 'nef', 'heic', 'heif', 'avif', 'jxl', ]); const DOCUMENT_EXTENSIONS = new Set([ // Markdown 'md', 'mdx', 'markdown', 'mdown', 'mkd', // Text 'txt', 'text', 'rtf', // Docs 'doc', 'docx', 'odt', 'pdf', // ReStructuredText 'rst', // AsciiDoc 'adoc', 'asciidoc', // Org 'org', // LaTeX 'tex', 'latex', 'bib', ]); const getFileIcon = (extension?: string): React.ReactNode => { const ext = extension?.toLowerCase(); if (ext && CODE_EXTENSIONS.has(ext)) { return ; } if (ext && DATA_EXTENSIONS.has(ext)) { return ; } if (ext && IMAGE_EXTENSIONS.has(ext)) { return ; } if (ext && DOCUMENT_EXTENSIONS.has(ext)) { return ; } return ; }; export const FilesView: React.FC = () => { const { files, runtime } = useRuntimeAPIs(); const { currentTheme } = useThemeSystem(); React.useMemo(() => generateSyntaxTheme(currentTheme), [currentTheme]); const { isMobile, screenWidth } = useDeviceInfo(); const showHidden = useDirectoryShowHidden(); const showGitignored = useFilesViewShowGitignored(); const currentDirectory = useEffectiveDirectory(); const root = normalizePath(currentDirectory); const searchFiles = useFileSearchStore((state) => state.searchFiles); const [searchQuery, setSearchQuery] = React.useState(''); const debouncedSearchQuery = useDebouncedValue(searchQuery, 200); const searchInputRef = React.useRef(null); const [showMobilePageContent, setShowMobilePageContent] = React.useState(false); const [wrapLines, setWrapLines] = React.useState(isMobile); const [expandedDirs, setExpandedDirs] = React.useState>(new Set()); const [childrenByDir, setChildrenByDir] = React.useState>({}); const loadedDirsRef = React.useRef>(new Set()); const inFlightDirsRef = React.useRef>(new Set()); const [searchResults, setSearchResults] = React.useState([]); const [searching, setSearching] = React.useState(false); const [selectedFile, setSelectedFile] = React.useState(null); const [fileContent, setFileContent] = React.useState(''); const [fileLoading, setFileLoading] = React.useState(false); const [fileError, setFileError] = React.useState(null); const [desktopImageSrc, setDesktopImageSrc] = React.useState(''); const [draftContent, setDraftContent] = React.useState(''); const [isSaving, setIsSaving] = React.useState(false); const [confirmDiscardOpen, setConfirmDiscardOpen] = React.useState(false); const pendingSelectFileRef = React.useRef(null); const pendingTabRef = React.useRef(null); const skipDirtyOnceRef = React.useRef(false); const [activeDialog, setActiveDialog] = React.useState<'createFile' | 'createFolder' | 'rename' | 'delete' | null>(null); const [dialogData, setDialogData] = React.useState<{ path: string; name?: string; type?: 'file' | 'directory' } | null>(null); const [dialogInputValue, setDialogInputValue] = React.useState(''); const [isDialogSubmitting, setIsDialogSubmitting] = React.useState(false); const [contextMenuPath, setContextMenuPath] = React.useState(null); const canCreateFile = Boolean(files.writeFile); const canCreateFolder = Boolean(files.createDirectory); const canRename = Boolean(files.rename); const canDelete = Boolean(files.delete); const handleOpenDialog = React.useCallback((type: 'createFile' | 'createFolder' | 'rename' | 'delete', data: { path: string; name?: string; type?: 'file' | 'directory' }) => { setActiveDialog(type); setDialogData(data); setDialogInputValue(type === 'rename' ? data.name || '' : ''); setIsDialogSubmitting(false); }, []); // Line selection state for commenting const [lineSelection, setLineSelection] = React.useState(null); const [commentText, setCommentText] = React.useState(''); const isSelectingRef = React.useRef(false); const selectionStartRef = React.useRef(null); // Session/config for sending comments const sendMessage = useSessionStore((state) => state.sendMessage); const currentSessionId = useSessionStore((state) => state.currentSessionId); const { currentProviderId, currentModelId, currentAgentName, currentVariant } = useConfigStore(); const getSessionAgentSelection = useContextStore((state) => state.getSessionAgentSelection); const getAgentModelForSession = useContextStore((state) => state.getAgentModelForSession); const getAgentModelVariantForSession = useContextStore((state) => state.getAgentModelVariantForSession); const setActiveMainTab = useUIStore((state) => state.setActiveMainTab); const setMainTabGuard = useUIStore((state) => state.setMainTabGuard); const { inputBarOffset, isKeyboardOpen } = useUIStore(); // Global mouseup to end drag selection React.useEffect(() => { const handleGlobalMouseUp = () => { isSelectingRef.current = false; selectionStartRef.current = null; }; document.addEventListener('mouseup', handleGlobalMouseUp); return () => document.removeEventListener('mouseup', handleGlobalMouseUp); }, []); // Clear selection when file changes React.useEffect(() => { setLineSelection(null); setCommentText(''); setMainTabGuard(null); setDraftContent(''); setIsSaving(false); }, [selectedFile?.path, setMainTabGuard]); // Click outside to dismiss selection React.useEffect(() => { if (!lineSelection) return; const handleClickOutside = (e: MouseEvent) => { const target = e.target as HTMLElement; // Check if click is inside comment UI const commentUI = document.querySelector('[data-comment-ui]'); if (commentUI?.contains(target)) return; // Check if click is on CM gutter (only gutter should not dismiss) if (target.closest('.cm-gutterElement')) return; // Check if click is inside toast (sonner) if (target.closest('[data-sonner-toast]') || target.closest('[data-sonner-toaster]')) return; // Clicking anywhere else (including code content) dismisses selection setLineSelection(null); setCommentText(''); }; const timeoutId = setTimeout(() => { document.addEventListener('click', handleClickOutside); }, 100); return () => { clearTimeout(timeoutId); document.removeEventListener('click', handleClickOutside); }; }, [lineSelection]); // Extract selected code const extractSelectedCode = React.useCallback((content: string, range: SelectedLineRange): string => { const lines = content.split('\n'); const startLine = Math.max(1, range.start); const endLine = Math.min(lines.length, range.end); if (startLine > endLine) return ''; return lines.slice(startLine - 1, endLine).join('\n'); }, []); // Send comment handler const handleSendComment = React.useCallback(async () => { if (!lineSelection || !commentText.trim() || !selectedFile) return; if (!currentSessionId) { toast.error('Select a session to send comment'); return; } // Get session-specific agent/model/variant with fallback to config values const sessionAgent = getSessionAgentSelection(currentSessionId) || currentAgentName; const sessionModel = sessionAgent ? getAgentModelForSession(currentSessionId, sessionAgent) : null; const effectiveProviderId = sessionModel?.providerId || currentProviderId; const effectiveModelId = sessionModel?.modelId || currentModelId; if (!effectiveProviderId || !effectiveModelId) { toast.error('Select a model to send comment'); return; } const effectiveVariant = sessionAgent && effectiveProviderId && effectiveModelId ? getAgentModelVariantForSession(currentSessionId, sessionAgent, effectiveProviderId, effectiveModelId) ?? currentVariant : currentVariant; const code = extractSelectedCode(fileContent, lineSelection); const language = getLanguageFromExtension(selectedFile.path) || 'text'; const fileName = selectedFile.name; const startLine = lineSelection.start; const endLine = lineSelection.end; const message = `Comment on \`${fileName}\` lines ${startLine}-${endLine}:\n\`\`\`${language}\n${code}\n\`\`\`\n\n${commentText}`; // Clear state and switch to chat immediately setCommentText(''); setLineSelection(null); setActiveMainTab('chat'); void sendMessage( message, effectiveProviderId, effectiveModelId, sessionAgent, undefined, undefined, undefined, effectiveVariant ).catch((e) => { console.error('Failed to send comment', e); }); }, [lineSelection, commentText, selectedFile, fileContent, currentSessionId, currentProviderId, currentModelId, currentAgentName, currentVariant, extractSelectedCode, sendMessage, setActiveMainTab, getSessionAgentSelection, getAgentModelForSession, getAgentModelVariantForSession]); const mapDirectoryEntries = React.useCallback((dirPath: string, entries: Array<{ name: string; path: string; isDirectory: boolean }>): FileNode[] => { const nodes = entries .filter((entry) => entry && typeof entry.name === 'string' && entry.name.length > 0) .filter((entry) => showHidden || !entry.name.startsWith('.')) .filter((entry) => showGitignored || !shouldIgnoreEntryName(entry.name)) .map((entry) => { const name = entry.name; const path = normalizePath(entry.path || `${dirPath}/${name}`); const type = entry.isDirectory ? 'directory' : 'file'; const extension = type === 'file' && name.includes('.') ? name.split('.').pop()?.toLowerCase() : undefined; return { name, path, type, extension, }; }); return sortNodes(nodes); }, [showGitignored, showHidden]); const loadDirectory = React.useCallback(async (dirPath: string) => { const normalizedDir = normalizePath(dirPath.trim()); if (!normalizedDir) { return; } if (loadedDirsRef.current.has(normalizedDir) || inFlightDirsRef.current.has(normalizedDir)) { return; } inFlightDirsRef.current = new Set(inFlightDirsRef.current); inFlightDirsRef.current.add(normalizedDir); try { const respectGitignore = !showGitignored; let entries: Array<{ name: string; path: string; isDirectory: boolean }>; if (runtime.isDesktop) { const result = await files.listDirectory(normalizedDir, { respectGitignore }); entries = result.entries.map((entry) => ({ name: entry.name, path: entry.path, isDirectory: entry.isDirectory, })); } else { const result = await opencodeClient.listLocalDirectory(normalizedDir, { respectGitignore }); entries = result.map((entry) => ({ name: entry.name, path: entry.path, isDirectory: entry.isDirectory, })); } const mapped = mapDirectoryEntries(normalizedDir, entries); loadedDirsRef.current = new Set(loadedDirsRef.current); loadedDirsRef.current.add(normalizedDir); setChildrenByDir((prev) => ({ ...prev, [normalizedDir]: mapped })); } catch { setChildrenByDir((prev) => ({ ...prev, [normalizedDir]: prev[normalizedDir] ?? [], })); } finally { inFlightDirsRef.current = new Set(inFlightDirsRef.current); inFlightDirsRef.current.delete(normalizedDir); } }, [files, mapDirectoryEntries, runtime.isDesktop, showGitignored]); const refreshRoot = React.useCallback(async () => { const normalizedRoot = normalizePath(currentDirectory.trim()); if (!normalizedRoot) { return; } loadedDirsRef.current = new Set(); inFlightDirsRef.current = new Set(); setExpandedDirs(new Set()); setChildrenByDir({}); await loadDirectory(normalizedRoot); }, [currentDirectory, loadDirectory]); React.useEffect(() => { if (!currentDirectory) { return; } void refreshRoot(); setSelectedFile(null); setFileContent(''); setFileError(null); setDesktopImageSrc(''); setShowMobilePageContent(false); }, [currentDirectory, refreshRoot]); React.useEffect(() => { if (!currentDirectory) { return; } void refreshRoot(); }, [currentDirectory, refreshRoot, showGitignored]); const handleDialogSubmit = React.useCallback(async (e?: React.FormEvent) => { e?.preventDefault(); if (!dialogData || !activeDialog) return; setIsDialogSubmitting(true); try { if (activeDialog === 'createFile') { if (!dialogInputValue.trim()) throw new Error('Filename is required'); const parentPath = dialogData.path; // Handle root path or empty path const prefix = parentPath ? `${parentPath}/` : ''; const newPath = normalizePath(`${prefix}${dialogInputValue.trim()}`); if (!files.writeFile) throw new Error('Write not supported'); const result = await files.writeFile(newPath, ''); if (result.success) { toast.success('File created'); await refreshRoot(); } } else if (activeDialog === 'createFolder') { if (!dialogInputValue.trim()) throw new Error('Folder name is required'); const parentPath = dialogData.path; const prefix = parentPath ? `${parentPath}/` : ''; const newPath = normalizePath(`${prefix}${dialogInputValue.trim()}`); const result = await files.createDirectory(newPath); if (result.success) { toast.success('Folder created'); await refreshRoot(); } } else if (activeDialog === 'rename') { if (!dialogInputValue.trim()) throw new Error('Name is required'); const oldPath = dialogData.path; const parentDir = oldPath.split('/').slice(0, -1).join('/'); const prefix = parentDir ? `${parentDir}/` : ''; const newPath = normalizePath(`${prefix}${dialogInputValue.trim()}`); if (files.rename) { const result = await files.rename(oldPath, newPath); if (result.success) { toast.success('Renamed successfully'); await refreshRoot(); if (selectedFile?.path === oldPath) { setSelectedFile(null); } } } else { toast.error("Rename not supported"); } } else if (activeDialog === 'delete') { if (files.delete) { const result = await files.delete(dialogData.path); if (result.success) { toast.success('Deleted successfully'); await refreshRoot(); if (selectedFile?.path === dialogData.path || selectedFile?.path.startsWith(dialogData.path + '/')) { setSelectedFile(null); setFileContent(''); } } } else { toast.error("Delete not supported"); } } setActiveDialog(null); } catch (error) { toast.error(error instanceof Error ? error.message : 'Operation failed'); } finally { setIsDialogSubmitting(false); } }, [activeDialog, dialogData, dialogInputValue, files, refreshRoot, selectedFile]); const fuzzyScore = React.useCallback((query: string, candidate: string): number | null => { const q = query.trim().toLowerCase(); if (!q) { return 0; } const c = candidate.toLowerCase(); let score = 0; let lastIndex = -1; let consecutive = 0; for (let i = 0; i < q.length; i += 1) { const ch = q[i]; if (!ch || ch === ' ') { continue; } const idx = c.indexOf(ch, lastIndex + 1); if (idx === -1) { return null; } const gap = idx - lastIndex - 1; if (gap === 0) { consecutive += 1; } else { consecutive = 0; } score += 10; score += Math.max(0, 18 - idx); score -= Math.max(0, gap); if (idx === 0) { score += 12; } else { const prev = c[idx - 1]; if (prev === '/' || prev === '_' || prev === '-' || prev === '.' || prev === ' ') { score += 10; } } score += consecutive > 0 ? 12 : 0; lastIndex = idx; } score += Math.max(0, 24 - Math.round(c.length / 3)); return score; }, []); React.useEffect(() => { if (!currentDirectory) { return; } void refreshRoot(); }, [currentDirectory, refreshRoot, showGitignored]); React.useEffect(() => { if (!currentDirectory) { setSearchResults([]); setSearching(false); return; } const trimmedQuery = debouncedSearchQuery.trim(); if (!trimmedQuery) { setSearchResults([]); setSearching(false); return; } const normalizedQueryLower = trimmedQuery.toLowerCase(); let cancelled = false; setSearching(true); searchFiles(currentDirectory, trimmedQuery, 150, { includeHidden: showHidden, respectGitignore: !showGitignored, }) .then((hits) => { if (cancelled) { return; } const filtered = hits.filter((hit) => showGitignored || !shouldIgnorePath(hit.path)); // Apply fuzzy scoring and sort by score const ranked = filtered .map((hit) => { const label = hit.relativePath || hit.name || hit.path; const score = fuzzyScore(normalizedQueryLower, label); return score === null ? null : { hit, score, labelLength: label.length }; }) .filter(Boolean) as Array<{ hit: typeof hits[0]; score: number; labelLength: number }>; ranked.sort((a, b) => ( b.score - a.score || a.labelLength - b.labelLength || a.hit.path.localeCompare(b.hit.path) )); const mapped: FileNode[] = ranked.map(({ hit }) => ({ name: hit.name, path: normalizePath(hit.path), type: 'file', extension: hit.extension, relativePath: hit.relativePath, })); setSearchResults(mapped); }) .catch(() => { if (!cancelled) { setSearchResults([]); } }) .finally(() => { if (!cancelled) { setSearching(false); } }); return () => { cancelled = true; }; }, [currentDirectory, debouncedSearchQuery, fuzzyScore, searchFiles, showHidden, showGitignored]); const readFile = React.useCallback(async (path: string): Promise => { if (files.readFile) { const result = await files.readFile(path); return result.content ?? ''; } const response = await fetch(`/api/fs/read?path=${encodeURIComponent(path)}`); if (!response.ok) { const error = await response.json().catch(() => ({ error: response.statusText })); throw new Error((error as { error?: string }).error || 'Failed to read file'); } return response.text(); }, [files]); const displayedContent = React.useMemo(() => { return fileContent.length > MAX_VIEW_CHARS ? `${fileContent.slice(0, MAX_VIEW_CHARS)}\n\n… truncated …` : fileContent; }, [fileContent]); const isDirty = React.useMemo(() => draftContent !== displayedContent, [draftContent, displayedContent]); const saveDraft = React.useCallback(async () => { if (!selectedFile || !files.writeFile) { toast.error('Saving not supported'); return; } if (!isDirty) { return; } setIsSaving(true); try { const result = await files.writeFile(selectedFile.path, draftContent); if (!result?.success) { throw new Error('Failed to write file'); } setFileContent(draftContent); } catch (error) { toast.error(error instanceof Error ? error.message : 'Save failed'); } finally { setIsSaving(false); } }, [draftContent, files, isDirty, selectedFile]); React.useEffect(() => { if (!isDirty) { setMainTabGuard(null); return; } const guard = (_nextTab: import('@/stores/useUIStore').MainTab) => { if (skipDirtyOnceRef.current) { skipDirtyOnceRef.current = false; return true; } setConfirmDiscardOpen(true); pendingTabRef.current = _nextTab; return false; }; setMainTabGuard(guard); return () => { const currentGuard = useUIStore.getState().mainTabGuard; if (currentGuard === guard) { setMainTabGuard(null); } }; }, [isDirty, setMainTabGuard]); React.useEffect(() => { const handleKeyDown = (e: KeyboardEvent) => { if (!hasModifier(e)) { return; } if (e.key.toLowerCase() !== 's') { return; } e.preventDefault(); if (!isSaving) { void saveDraft(); } }; window.addEventListener('keydown', handleKeyDown); return () => window.removeEventListener('keydown', handleKeyDown); }, [isSaving, saveDraft]); const handleSelectFile = React.useCallback(async (node: FileNode) => { if (skipDirtyOnceRef.current) { skipDirtyOnceRef.current = false; } else if (isDirty) { setConfirmDiscardOpen(true); pendingSelectFileRef.current = node; return; } setSelectedFile(node); setFileError(null); setDesktopImageSrc(''); const selectedIsImage = isImageFile(node.path); if (isMobile) { setShowMobilePageContent(true); } const isSvg = node.path.toLowerCase().endsWith('.svg'); // Desktop: binary images are loaded via readFileBinary (data URL). if (runtime.isDesktop && selectedIsImage && !isSvg) { setFileContent(''); setFileLoading(true); return; } // Web: binary images should not be read as utf8. if (!runtime.isDesktop && selectedIsImage && !isSvg) { setFileContent(''); setFileLoading(false); return; } setFileLoading(true); try { const content = await readFile(node.path); setFileContent(content); setDraftContent(content.length > MAX_VIEW_CHARS ? `${content.slice(0, MAX_VIEW_CHARS)}\n\n… truncated …` : content); } catch (error) { setFileContent(''); setDraftContent(''); setFileError(error instanceof Error ? error.message : 'Failed to read file'); } finally { setFileLoading(false); } }, [isDirty, isMobile, readFile, runtime.isDesktop]); const discardAndContinue = React.useCallback(() => { const nextFile = pendingSelectFileRef.current; const nextTab = pendingTabRef.current; pendingSelectFileRef.current = null; pendingTabRef.current = null; // Allow one guarded navigation (tab/file) without re-opening dialog. skipDirtyOnceRef.current = true; setConfirmDiscardOpen(false); // Discard draft by reverting back to last loaded content setDraftContent(displayedContent); if (nextFile) { void handleSelectFile(nextFile); return; } if (nextTab) { setMainTabGuard(null); useUIStore.getState().setActiveMainTab(nextTab); } }, [displayedContent, handleSelectFile, setMainTabGuard]); const saveAndContinue = React.useCallback(async () => { const nextFile = pendingSelectFileRef.current; const nextTab = pendingTabRef.current; pendingSelectFileRef.current = null; pendingTabRef.current = null; // We'll proceed after saving; suppress guard reopening. skipDirtyOnceRef.current = true; setConfirmDiscardOpen(false); await saveDraft(); if (nextFile) { await handleSelectFile(nextFile); return; } if (nextTab) { setMainTabGuard(null); useUIStore.getState().setActiveMainTab(nextTab); } }, [handleSelectFile, saveDraft, setMainTabGuard]); const toggleDirectory = React.useCallback(async (dirPath: string) => { const normalized = normalizePath(dirPath); setExpandedDirs((prev) => { const next = new Set(prev); if (next.has(normalized)) { next.delete(normalized); } else { next.add(normalized); } return next; }); if (!loadedDirsRef.current.has(normalized)) { await loadDirectory(normalized); } }, [loadDirectory]); const renderTree = React.useCallback((dirPath: string, depth: number): React.ReactNode => { const nodes = childrenByDir[dirPath] ?? []; return nodes.map((node, index) => { const isDir = node.type === 'directory'; const isExpanded = isDir && expandedDirs.has(node.path); const isActive = selectedFile?.path === node.path; const isLoading = isDir && inFlightDirsRef.current.has(node.path); const isLast = index === nodes.length - 1; return (
  • {depth > 0 && ( <> {isLast && ( )} )}
    { if (!canRename && !canCreateFile && !canCreateFolder && !canDelete) { return; } event.preventDefault(); setContextMenuPath(node.path); }} > {(canRename || canCreateFile || canCreateFolder || canDelete) && (
    setContextMenuPath(open ? node.path : null)} > setContextMenuPath(null)}> {canRename && ( { e.stopPropagation(); handleOpenDialog('rename', node); }}> Rename )} { e.stopPropagation(); void navigator.clipboard.writeText(node.path); toast.success('Path copied'); }}> Copy Path {isDir && (canCreateFile || canCreateFolder) && ( <> {canCreateFile && ( { e.stopPropagation(); handleOpenDialog('createFile', node); }}> New File )} {canCreateFolder && ( { e.stopPropagation(); handleOpenDialog('createFolder', node); }}> New Folder )} )} {canDelete && ( <> { e.stopPropagation(); handleOpenDialog('delete', node); }} className="text-destructive focus:text-destructive" > Delete )}
    )}
    {isDir && isExpanded && (
      {renderTree(node.path, depth + 1)}
    )}
    • ); }); }, [childrenByDir, expandedDirs, handleSelectFile, selectedFile?.path, toggleDirectory, handleOpenDialog, canCreateFile, canCreateFolder, canRename, canDelete, contextMenuPath, setContextMenuPath]); const isSelectedImage = Boolean(selectedFile?.path && isImageFile(selectedFile.path)); const isSelectedSvg = Boolean(selectedFile?.path && selectedFile.path.toLowerCase().endsWith('.svg')); const displaySelectedPath = React.useMemo(() => { if (!selectedFile?.path) return ''; const normalizedFilePath = normalizePath(selectedFile.path); if (root && normalizedFilePath.startsWith(root)) { const relative = normalizedFilePath.slice(root.length); return relative.startsWith('/') ? relative.slice(1) : relative; } return normalizedFilePath; }, [selectedFile?.path, root]); const canCopy = Boolean(selectedFile && (!isSelectedImage || isSelectedSvg) && fileContent.length > 0); const canCopyPath = Boolean(selectedFile && displaySelectedPath.length > 0); const canEdit = Boolean(selectedFile && !isSelectedImage && files.writeFile && fileContent.length <= MAX_VIEW_CHARS); const editorExtensions = React.useMemo(() => { if (!selectedFile?.path) { return [createFlexokiCodeMirrorTheme(currentTheme)]; } const extensions = [createFlexokiCodeMirrorTheme(currentTheme)]; const language = languageByExtension(selectedFile.path); if (language) { extensions.push(language); } if (wrapLines) { extensions.push(EditorView.lineWrapping); } return extensions; }, [currentTheme, selectedFile?.path, wrapLines]); const imageSrc = selectedFile?.path && isSelectedImage ? (runtime.isDesktop ? (isSelectedSvg ? `data:${getImageMimeType(selectedFile.path)};utf8,${encodeURIComponent(fileContent)}` : desktopImageSrc) : (isSelectedSvg ? `data:${getImageMimeType(selectedFile.path)};utf8,${encodeURIComponent(fileContent)}` : `/api/fs/raw?path=${encodeURIComponent(selectedFile.path)}`)) : ''; React.useEffect(() => { let cancelled = false; const resolveDesktopImage = async () => { if (!runtime.isDesktop || !selectedFile?.path || !isSelectedImage || isSelectedSvg) { setDesktopImageSrc(''); return; } setFileError(null); try { if (files.readFileBinary) { const result = await files.readFileBinary(selectedFile.path); if (!cancelled) { setDesktopImageSrc(result.dataUrl); } return; } const core = await import('@tauri-apps/api/core'); const convertFileSrc = (core as { convertFileSrc?: (path: string, protocol?: string) => string }).convertFileSrc; if (!convertFileSrc) { return; } const src = convertFileSrc(selectedFile.path, 'asset'); if (!cancelled) { setDesktopImageSrc(src); } } catch (error) { if (!cancelled) { setDesktopImageSrc(''); setFileError(error instanceof Error ? error.message : 'Failed to read file'); } } finally { if (!cancelled) { setFileLoading(false); } } }; void resolveDesktopImage(); return () => { cancelled = true; }; }, [files, isSelectedImage, isSelectedSvg, runtime.isDesktop, selectedFile?.path]); const renderDialogs = () => ( !open && setActiveDialog(null)}> {activeDialog === 'createFile' && 'Create File'} {activeDialog === 'createFolder' && 'Create Folder'} {activeDialog === 'rename' && 'Rename'} {activeDialog === 'delete' && 'Delete'} {activeDialog === 'createFile' && `Create a new file in ${dialogData?.path ?? 'root'}`} {activeDialog === 'createFolder' && `Create a new folder in ${dialogData?.path ?? 'root'}`} {activeDialog === 'rename' && `Rename ${dialogData?.name}`} {activeDialog === 'delete' && `Are you sure you want to delete ${dialogData?.name}? This action cannot be undone.`} {activeDialog !== 'delete' && (
    setDialogInputValue(e.target.value)} placeholder={activeDialog === 'rename' ? 'New name' : 'Name'} onKeyDown={(e) => { if (e.key === 'Enter') { void handleDialogSubmit(); } }} autoFocus />
    )}     ); // Comment UI component const renderCommentUI = () => { if (!lineSelection || !selectedFile) return null; return (