@assistkick/create 1.7.0 → 1.9.0

package/templates/assistkick-product-system/packages/frontend/src/components/FilesView.tsx

@@ -0,0 +1,404 @@
+import React, { useState, useEffect, useCallback, useRef } from 'react';
+import Editor, { type OnMount } from '@monaco-editor/react';
+import { FileTree } from './FileTree';
+import { EditorTabBar } from './EditorTabBar';
+import { useTheme } from '../hooks/useTheme';
+import { useAutoSave } from '../hooks/useAutoSave';
+import { apiClient } from '../api/client';
+import { getLanguageFromPath, getFileName, buildNewPath, updatePathPrefix } from '../utils/file_utils';
+import type { TreeEntry, FileTreeCallbacks } from './FileTree';
+import type { EditorTab } from './EditorTabBar';
+
+const MIN_TREE_WIDTH = 180;
+const MAX_TREE_WIDTH = 600;
+const DEFAULT_TREE_WIDTH = 260;
+
+interface FilesViewProps {
+  projectId: string | null;
+}
+
+const collectExpandedPaths = (tree: TreeEntry[], depth: number): Set<string> => {
+  const paths = new Set<string>();
+  for (const entry of tree) {
+    if (entry.type === 'directory' && depth === 0) {
+      paths.add(entry.path);
+    }
+    if (entry.children) {
+      for (const p of collectExpandedPaths(entry.children, depth + 1)) {
+        paths.add(p);
+      }
+    }
+  }
+  return paths;
+};
+
+export const FilesView = ({ projectId }: FilesViewProps) => {
+  const { theme } = useTheme();
+  const autoSave = useAutoSave({ projectId });
+  const autoSaveRef = useRef(autoSave);
+  autoSaveRef.current = autoSave;
+  const [tree, setTree] = useState<TreeEntry[]>([]);
+  const [tabs, setTabs] = useState<EditorTab[]>([]);
+  const [activeTabPath, setActiveTabPath] = useState<string | null>(null);
+  const [fileContents, setFileContents] = useState<Record<string, string>>({});
+  const [loading, setLoading] = useState(false);
+  const [treeError, setTreeError] = useState<string | null>(null);
+  const [treeWidth, setTreeWidth] = useState(DEFAULT_TREE_WIDTH);
+  const [expandedPaths, setExpandedPaths] = useState<Set<string>>(new Set());
+  const resizingRef = useRef(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const initialExpandDone = useRef(false);
+
+  const loadTree = useCallback(async () => {
+    if (!projectId) {
+      setTree([]);
+      return;
+    }
+    try {
+      const data = await apiClient.fetchFileTree(projectId);
+      const newTree = data.tree || [];
+      setTree(newTree);
+      // On first load, expand root-level directories
+      if (!initialExpandDone.current) {
+        setExpandedPaths(collectExpandedPaths(newTree, 0));
+        initialExpandDone.current = true;
+      }
+      setTreeError(null);
+    } catch (err: any) {
+      if (err.message?.includes('404')) {
+        setTreeError('No workspace found. Connect a git repository first.');
+      } else {
+        setTreeError(err.message || 'Failed to load file tree');
+      }
+    }
+  }, [projectId]);
+
+  // Fetch file tree when project changes
+  useEffect(() => {
+    initialExpandDone.current = false;
+    loadTree();
+  }, [loadTree]);
+
+  const handleToggleExpand = useCallback((path: string) => {
+    setExpandedPaths((prev) => {
+      const next = new Set(prev);
+      if (next.has(path)) {
+        next.delete(path);
+      } else {
+        next.add(path);
+      }
+      return next;
+    });
+  }, []);
+
+  // Open a file in a new tab or switch to existing tab
+  const handleFileSelect = useCallback(async (path: string, name: string) => {
+    if (!projectId) return;
+
+    // If already open, just switch to it
+    const existing = tabs.find((t) => t.path === path);
+    if (existing) {
+      setActiveTabPath(path);
+      return;
+    }
+
+    // Load the file content
+    setLoading(true);
+    try {
+      const data = await apiClient.fetchFileContent(projectId, path);
+
+      if (data.binary) {
+        setFileContents((prev) => ({ ...prev, [path]: `[Binary file — ${data.size} bytes]` }));
+      } else {
+        setFileContents((prev) => ({ ...prev, [path]: data.content }));
+      }
+
+      const language = getLanguageFromPath(path);
+      const newTab: EditorTab = { path, name, language };
+      setTabs((prev) => [...prev, newTab]);
+      setActiveTabPath(path);
+    } catch (err: any) {
+      console.error('Failed to load file:', err);
+    } finally {
+      setLoading(false);
+    }
+  }, [projectId, tabs]);
+
+  const handleSelectTab = useCallback((path: string) => {
+    setActiveTabPath(path);
+  }, []);
+
+  const handleCloseTab = useCallback((path: string) => {
+    // Fire-and-forget save for unsaved changes before closing
+    autoSaveRef.current.saveAndDiscard(path);
+
+    setTabs((prev) => {
+      const idx = prev.findIndex((t) => t.path === path);
+      const next = prev.filter((t) => t.path !== path);
+
+      if (path === activeTabPath) {
+        if (next.length === 0) {
+          setActiveTabPath(null);
+        } else {
+          const newIdx = Math.min(idx, next.length - 1);
+          setActiveTabPath(next[newIdx].path);
+        }
+      }
+
+      return next;
+    });
+
+    setFileContents((prev) => {
+      const copy = { ...prev };
+      delete copy[path];
+      return copy;
+    });
+  }, [activeTabPath]);
+
+  // CRUD operations
+  const handleCreateFile = useCallback(async (parentPath: string, name: string, type: 'file' | 'directory') => {
+    if (!projectId) return;
+    const fullPath = parentPath ? `${parentPath}/${name}` : name;
+    try {
+      await apiClient.createFile(projectId, fullPath, type);
+      await loadTree();
+      // If it's a file, open it in the editor
+      if (type === 'file') {
+        handleFileSelect(fullPath, name);
+      }
+    } catch (err: any) {
+      console.error(`Failed to create ${type}:`, err);
+    }
+  }, [projectId, loadTree, handleFileSelect]);
+
+  const handleRename = useCallback(async (oldPath: string, newName: string) => {
+    if (!projectId) return;
+    const newPath = buildNewPath(oldPath, newName);
+    if (newPath === oldPath) return;
+
+    try {
+      await apiClient.renameFile(projectId, oldPath, newPath);
+      await loadTree();
+
+      // Update any open tabs that reference the old path
+      setTabs((prev) => prev.map((tab) => {
+        const updatedPath = updatePathPrefix(tab.path, oldPath, newPath);
+        if (updatedPath !== tab.path) {
+          return { ...tab, path: updatedPath, name: getFileName(updatedPath), language: getLanguageFromPath(updatedPath) };
+        }
+        return tab;
+      }));
+
+      // Update active tab path
+      if (activeTabPath) {
+        const updatedActive = updatePathPrefix(activeTabPath, oldPath, newPath);
+        if (updatedActive !== activeTabPath) {
+          setActiveTabPath(updatedActive);
+        }
+      }
+
+      // Update file contents cache
+      setFileContents((prev) => {
+        const next: Record<string, string> = {};
+        for (const [key, val] of Object.entries(prev)) {
+          next[updatePathPrefix(key, oldPath, newPath)] = val;
+        }
+        return next;
+      });
+
+      // Update expanded paths
+      setExpandedPaths((prev) => {
+        const next = new Set<string>();
+        for (const p of prev) {
+          next.add(updatePathPrefix(p, oldPath, newPath));
+        }
+        return next;
+      });
+    } catch (err: any) {
+      console.error('Failed to rename:', err);
+    }
+  }, [projectId, loadTree, activeTabPath]);
+
+  const handleDelete = useCallback(async (path: string, type: 'file' | 'directory') => {
+    if (!projectId) return;
+    try {
+      await apiClient.deleteFile(projectId, path);
+      await loadTree();
+
+      // Close any tabs for deleted files
+      setTabs((prev) => {
+        const next = prev.filter((tab) => tab.path !== path && !tab.path.startsWith(path + '/'));
+        if (activeTabPath === path || activeTabPath?.startsWith(path + '/')) {
+          if (next.length === 0) {
+            setActiveTabPath(null);
+          } else {
+            setActiveTabPath(next[next.length - 1].path);
+          }
+        }
+        return next;
+      });
+
+      // Clean up content cache
+      setFileContents((prev) => {
+        const copy = { ...prev };
+        for (const key of Object.keys(copy)) {
+          if (key === path || key.startsWith(path + '/')) {
+            delete copy[key];
+          }
+        }
+        return copy;
+      });
+    } catch (err: any) {
+      console.error('Failed to delete:', err);
+    }
+  }, [projectId, loadTree, activeTabPath]);
+
+  const treeCallbacks: FileTreeCallbacks = {
+    onFileSelect: handleFileSelect,
+    onCreateFile: handleCreateFile,
+    onRename: handleRename,
+    onDelete: handleDelete,
+  };
+
+  // Resizable split pane drag handling
+  const handleResizeStart = useCallback((e: React.MouseEvent) => {
+    e.preventDefault();
+    resizingRef.current = true;
+    const startX = e.clientX;
+    const startWidth = treeWidth;
+
+    const onMouseMove = (ev: MouseEvent) => {
+      if (!resizingRef.current) return;
+      const delta = ev.clientX - startX;
+      const newWidth = Math.min(MAX_TREE_WIDTH, Math.max(MIN_TREE_WIDTH, startWidth + delta));
+      setTreeWidth(newWidth);
+    };
+
+    const onMouseUp = () => {
+      resizingRef.current = false;
+      document.removeEventListener('mousemove', onMouseMove);
+      document.removeEventListener('mouseup', onMouseUp);
+      document.body.style.cursor = '';
+      document.body.style.userSelect = '';
+    };
+
+    document.body.style.cursor = 'col-resize';
+    document.body.style.userSelect = 'none';
+    document.addEventListener('mousemove', onMouseMove);
+    document.addEventListener('mouseup', onMouseUp);
+  }, [treeWidth]);
+
+  const activeTabPathRef = useRef(activeTabPath);
+  activeTabPathRef.current = activeTabPath;
+
+  const handleEditorMount: OnMount = useCallback((editor, monaco) => {
+    // Intercept Ctrl/Cmd+S to trigger immediate save
+    editor.addAction({
+      id: 'auto-save-now',
+      label: 'Save File',
+      keybindings: [monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS],
+      run: () => {
+        const path = activeTabPathRef.current;
+        if (path) {
+          autoSaveRef.current.saveNow(path);
+        }
+      },
+    });
+  }, []);
+
+  const handleEditorChange = useCallback((value: string | undefined) => {
+    if (activeTabPath && value !== undefined) {
+      setFileContents((prev) => ({ ...prev, [activeTabPath]: value }));
+      autoSaveRef.current.handleChange(activeTabPath, value);
+    }
+  }, [activeTabPath]);
+
+  // No project selected
+  if (!projectId) {
+    return (
+      <div className="files-view__empty">
+        <p className="text-content-muted">Select a project to browse files</p>
+      </div>
+    );
+  }
+
+  // Workspace error (no git repo connected)
+  if (treeError) {
+    return (
+      <div className="files-view__empty">
+        <p className="text-content-muted">{treeError}</p>
+      </div>
+    );
+  }
+
+  const activeTab = tabs.find((t) => t.path === activeTabPath) || null;
+  const activeContent = activeTabPath ? (fileContents[activeTabPath] ?? '') : '';
+
+  return (
+    <div className="files-view" ref={containerRef}>
+      {/* File tree sidebar */}
+      <div className="files-view__tree" style={{ width: `${treeWidth}px`, minWidth: `${treeWidth}px` }}>
+        <div className="files-view__tree-header">
+          <span className="text-[11px] uppercase tracking-wider font-medium text-content-muted">Explorer</span>
+        </div>
+        <div className="files-view__tree-content">
+          {tree.length === 0 ? (
+            <p className="text-content-muted text-xs p-3">No files found</p>
+          ) : (
+            <FileTree
+              tree={tree}
+              callbacks={treeCallbacks}
+              selectedPath={activeTabPath}
+              expandedPaths={expandedPaths}
+              onToggleExpand={handleToggleExpand}
+            />
+          )}
+        </div>
+      </div>
+
+      {/* Resize handle */}
+      <div className="files-view__resize-handle" onMouseDown={handleResizeStart} />
+
+      {/* Editor area */}
+      <div className="files-view__editor">
+        <EditorTabBar
+          tabs={tabs}
+          activeTabPath={activeTabPath}
+          dirtyPaths={autoSave.dirtyPaths}
+          onSelectTab={handleSelectTab}
+          onCloseTab={handleCloseTab}
+        />
+        {activeTab ? (
+          <div className="files-view__editor-container">
+            {loading && (
+              <div className="files-view__loading">
+                <span className="text-content-muted text-sm">Loading...</span>
+              </div>
+            )}
+            <Editor
+              language={activeTab.language}
+              value={activeContent}
+              theme={theme === 'dark' ? 'vs-dark' : 'vs'}
+              path={activeTab.path}
+              onChange={handleEditorChange}
+              onMount={handleEditorMount}
+              options={{
+                minimap: { enabled: true },
+                fontSize: 13,
+                lineNumbers: 'on',
+                scrollBeyondLastLine: false,
+                automaticLayout: true,
+                tabSize: 2,
+                wordWrap: 'off',
+              }}
+            />
+          </div>
+        ) : (
+          <div className="files-view__empty-editor">
+            <p className="text-content-muted text-sm">Open a file from the explorer to start editing</p>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};