Improve file tree and tab activation sync

Author: vipmax

anycode/App.tsx

@@ -113,26 +113,28 @@ const App: React.FC = () => {
     }, [editors.flushAllPendingChanges]);
 
     useEffect(() => {
-        if (!editors.activeFileId) {
-            return;
-        }
-
         fileTree.setActiveNode(editors.activeFileId);
     }, [editors.activeFileId, fileTree.setActiveNode]);
 
     useEffect(() => {
         if (!editors.activeFileId) {
+            fileTree.clearFileSelection();
             return;
         }
 
         const node = fileTree.findNodeByPath(fileTree.fileTree, editors.activeFileId);
-        if (!node || node.isSelected) {
+        if (!node) {
+            fileTree.clearFileSelection();
+            return;
+        }
+
+        if (node.isSelected) {
             return;
         }
 
         fileTree.selectNode(node.id);
     }, [editors.activeFileId, fileTree.fileTree,
-        fileTree.findNodeByPath, fileTree.selectNode]);
+        fileTree.findNodeByPath, fileTree.selectNode, fileTree.clearFileSelection]);
 
     useEffect(() => {
         saveItem('terminals', terminals.terminals);

anycode/components/TreeNodeComponent.tsx

@@ -59,6 +59,9 @@ const TreeNodeComponentImpl: React.FC<TreeNodeComponentProps> = ({
 
     const handleNameClick = (e: React.MouseEvent) => {
         e.stopPropagation();
+        if (isActive) {
+            return;
+        }
         onActivate(node.id);
 
         if (node.type === 'file') {
@@ -99,7 +102,7 @@ const TreeNodeComponentImpl: React.FC<TreeNodeComponentProps> = ({
                     {hasChildren ? '▶' : ''}
                 </div>
 
-                <span className="tree-name" title={title} onClick={handleNameClick}>
+                <span className="tree-name" title={title} onClick={handleNameClick} onMouseDown={(e) => e.stopPropagation()}>
                     {node.name}
                 </span>
             </div>
@@ -159,7 +162,7 @@ const areEqual = (prev: TreeNodeComponentProps, next: TreeNodeComponentProps): b
     if (prev.node.type === 'directory') {
         const prevInside = isPathWithinNode(prev.node.path, prev.activeNodeId);
         const nextInside = isPathWithinNode(prev.node.path, next.activeNodeId);
-        if (prevInside !== nextInside) {
+        if (prevInside || nextInside) {
             return false;
         }
     }

anycode/components/toolbar/Toolbar.tsx

@@ -36,7 +36,7 @@ export const Toolbar = ({
                 <div
                     key={file.id}
                     className={`tab ${activeFileId === file.id ? 'active' : ''}`}
-                    onClick={() => onSelectFile(file.id)}
+                    onClick={() => activeFileId !== file.id && onSelectFile(file.id)}
                 >
                     <span className="tab-filename" title={file.id}> {file.name} </span>
                     <button
@@ -54,7 +54,7 @@ export const Toolbar = ({
                 <div
                     key={`toolbar-terminal-${terminal.id}`}
                     className={`tab tab-terminal ${activeTerminalIndex === index ? 'active' : ''}`}
-                    onClick={() => onSelectTerminal(index)}
+                    onClick={() => activeTerminalIndex !== index && onSelectTerminal(index)}
                 >
                     <span className="tab-filename">{`term:${terminal.name}`}</span>
                     <button
@@ -72,7 +72,7 @@ export const Toolbar = ({
                 <div
                     key={`toolbar-agent-${session.agentId}`}
                     className={`tab tab-agent ${activeAgentId === session.agentId ? 'active' : ''}`}
-                    onClick={() => onSelectAgent(session.agentId)}
+                    onClick={() => activeAgentId !== session.agentId && onSelectAgent(session.agentId)}
                 >
                     <span className="tab-filename">{`${session.agentName || session.agentId}`}</span>
                     <button

anycode/hooks/useFileTree.ts

@@ -249,7 +249,19 @@ export const useFileTree = () => {
     }, []);
 
     const clearFileSelection = useCallback(() => {
+        const hasSelection = (nodes: TreeNode[]): boolean => {
+            if (!Array.isArray(nodes)) return false;
+            for (const node of nodes) {
+                if (node.isSelected) return true;
+                if (node.children && hasSelection(node.children)) return true;
+            }
+            return false;
+        };
+
         setFileTree((prevTree) => {
+            if (!hasSelection(prevTree)) {
+                return prevTree;
+            }
             const clearSelection = (nodes: TreeNode[]): TreeNode[] => {
                 return nodes.map((node) => {
                     const updatedChildren = node.children ? clearSelection(node.children) : undefined;