Merge pull request #2 from ishikawa-pro/improve-diff-view

ishikawa-pro · web-flow · commit d998fc10ccb9 · 2025-07-10T23:10:12.000+09:00
feat: パフォーマンス最適化と未追跡ファイルのサポート
diff --git a/electron/main.js b/electron/main.js
@@ -588,11 +588,21 @@ ipcMain.handle('get-local-diff', async (event) => {
     // Get diff summary for staged changes
     const stagedDiffSummary = await windowData.git.diffSummary(['--cached']);
     
+    // Get untracked files
+    const statusSummary = await windowData.git.status();
+    const untrackedFiles = (statusSummary.not_added || []).map(file => ({
+      file,
+      changes: 0,
+      insertions: 0,
+      deletions: 0
+    }));
+    
     return {
       workingDiff,
       stagedDiff,
       workingFiles: workingDiffSummary.files,
       stagedFiles: stagedDiffSummary.files,
+      untrackedFiles,
       workingSummary: {
         insertions: workingDiffSummary.insertions,
         deletions: workingDiffSummary.deletions,
@@ -609,6 +619,31 @@ ipcMain.handle('get-local-diff', async (event) => {
   }
 });
 
+// Add handler for untracked file content
+ipcMain.handle('get-untracked-file-content', async (event, filePath) => {
+  const senderWindow = BrowserWindow.fromWebContents(event.sender);
+  const windowId = senderWindow.id;
+  const windowData = windows.get(windowId);
+  
+  if (!windowData || !windowData.repoPath) {
+    throw new Error('No repository selected');
+  }
+  
+  try {
+    const fullPath = path.join(windowData.repoPath, filePath);
+    const content = await fs.promises.readFile(fullPath, 'utf8');
+    
+    // Create a diff-like format for untracked files
+    const lines = content.split('\n');
+    const diffLines = lines.map((line, index) => `+${line}`).join('\n');
+    const diff = `--- /dev/null\n+++ b/${filePath}\n@@ -0,0 +1,${lines.length} @@\n${diffLines}`;
+    
+    return { diff };
+  } catch (error) {
+    throw new Error(`Failed to read untracked file: ${error.message}`);
+  }
+});
+
 ipcMain.handle('get-local-file-diff', async (event, filePath, isStaged = false) => {
   const senderWindow = BrowserWindow.fromWebContents(event.sender);
   const windowId = senderWindow.id;
diff --git a/electron/preload.js b/electron/preload.js
@@ -14,6 +14,7 @@ contextBridge.exposeInMainWorld('electronAPI', {
   getBranchHistory: (repoPath) => ipcRenderer.invoke('get-branch-history', repoPath),
   getLocalDiff: () => ipcRenderer.invoke('get-local-diff'),
   getLocalFileDiff: (filePath, isStaged) => ipcRenderer.invoke('get-local-file-diff', filePath, isStaged),
+  getUntrackedFileContent: (filePath) => ipcRenderer.invoke('get-untracked-file-content', filePath),
   
   // Event listener for CLI initialization
   onInitializeWithRepo: (callback) => ipcRenderer.on('initialize-with-repo', callback),
diff --git a/src/App.tsx b/src/App.tsx
@@ -24,6 +24,7 @@ function App() {
   const fileRefs = useRef<Record<string, HTMLDivElement | null>>({});
   const [localDiffData, setLocalDiffData] = useState<LocalDiffData | null>(null);
   const [localFileDiffs, setLocalFileDiffs] = useState<Record<string, { working: string; staged: string }>>({});
+  const [loadingFiles, setLoadingFiles] = useState<Record<string, boolean>>({});
   const [currentView, setCurrentView] = useState<ViewMode>('repository-select');
   const [showGlobalSearch, setShowGlobalSearch] = useState(false);
   const [globalSearchTerm, setGlobalSearchTerm] = useState('');
@@ -285,32 +286,57 @@ function App() {
       const data = await window.electronAPI.getLocalDiff();
       setLocalDiffData(data);
       setSelectedFile(null);
+      // Clear previous diffs when refreshing
+      setLocalFileDiffs({});
+      setLoadingFiles({});
+    } catch (error) {
+      console.error('Failed to fetch local diff:', error);
+      alert(`Failed to fetch local diff: ${error}`);
+    } finally {
+      setLoading(false);
+    }
+  };
 
-      // 各ファイルの個別ローカル差分を取得
-      const diffs: Record<string, { working: string; staged: string }> = {};
-      const allFiles = new Set([...data.workingFiles.map(f => f.file), ...data.stagedFiles.map(f => f.file)]);
-
-      for (const file of allFiles) {
-        try {
-          const [workingResult, stagedResult] = await Promise.all([
-            window.electronAPI.getLocalFileDiff(file, false),
-            window.electronAPI.getLocalFileDiff(file, true)
-          ]);
-          diffs[file] = {
+  const fetchLocalFileDiff = async (file: string) => {
+    // Skip if already loaded or loading
+    if (localFileDiffs[file] || loadingFiles[file]) return;
+    
+    setLoadingFiles(prev => ({ ...prev, [file]: true }));
+    try {
+      const isUntracked = localDiffData?.untrackedFiles.some(f => f.file === file);
+      
+      if (isUntracked) {
+        // For untracked files, get the content as a diff
+        const untrackedResult = await window.electronAPI.getUntrackedFileContent(file);
+        setLocalFileDiffs(prev => ({
+          ...prev,
+          [file]: {
+            working: untrackedResult.diff,
+            staged: ''
+          }
+        }));
+      } else {
+        // For tracked files, get normal diffs
+        const [workingResult, stagedResult] = await Promise.all([
+          window.electronAPI.getLocalFileDiff(file, false),
+          window.electronAPI.getLocalFileDiff(file, true)
+        ]);
+        setLocalFileDiffs(prev => ({
+          ...prev,
+          [file]: {
             working: workingResult.diff,
             staged: stagedResult.diff
-          };
-        } catch (error) {
-          console.error(`Failed to fetch local diff for ${file}:`, error);
-          diffs[file] = { working: '', staged: '' };
-        }
+          }
+        }));
       }
-      setLocalFileDiffs(diffs);
     } catch (error) {
-      console.error('Failed to fetch local diff:', error);
-      alert(`Failed to fetch local diff: ${error}`);
+      console.error(`Failed to fetch local diff for ${file}:`, error);
+      setLocalFileDiffs(prev => ({
+        ...prev,
+        [file]: { working: '', staged: '' }
+      }));
     } finally {
-      setLoading(false);
+      setLoadingFiles(prev => ({ ...prev, [file]: false }));
     }
   };
 
@@ -581,11 +607,13 @@ function App() {
           <LocalChangesView
             localDiffData={localDiffData}
             localFileDiffs={localFileDiffs}
+            loadingFiles={loadingFiles}
             selectedFile={selectedFile}
             loading={loading}
             isRefreshing={isRefreshing}
             isGlobalRefreshing={isGlobalRefreshing}
             onFetchLocalDiff={fetchLocalDiff}
+            onFetchFileDiff={fetchLocalFileDiff}
             onFileSelect={handleFileSelectWithScroll}
             onRefresh={handleRefresh}
             onGlobalRefresh={handleGlobalRefresh}
diff --git a/src/components/DiffViewer.tsx b/src/components/DiffViewer.tsx
@@ -19,6 +19,7 @@ interface DiffViewerProps {
   onToggleCollapse?: () => void;
   isViewed?: boolean;
   onViewedChange?: (viewed: boolean) => void;
+  isLoading?: boolean;
 }
 
 interface DiffLine {
@@ -40,7 +41,7 @@ export interface Comment {
   fileName?: string;
 }
 
-const DiffViewer: React.FC<DiffViewerProps> = ({ diff, selectedFile, fromBranch, toBranch, isSelected = false, onRefresh, isRefreshing = false, searchTerm = '', currentSearchLineIndex = -1, currentSearchGlobalIndex = -1, onCommentsChange, isCollapsed = false, onToggleCollapse, isViewed = false, onViewedChange }) => {
+const DiffViewer: React.FC<DiffViewerProps> = ({ diff, selectedFile, fromBranch, toBranch, isSelected = false, onRefresh, isRefreshing = false, searchTerm = '', currentSearchLineIndex = -1, currentSearchGlobalIndex = -1, onCommentsChange, isCollapsed = false, onToggleCollapse, isViewed = false, onViewedChange, isLoading = false }) => {
   const diffContainerRef = useRef<HTMLDivElement>(null);
   const [copied, setCopied] = useState(false);
   const [comments, setComments] = useState<Comment[]>([]);
@@ -535,16 +536,63 @@ const DiffViewer: React.FC<DiffViewerProps> = ({ diff, selectedFile, fromBranch,
       </div>
       
       {!isCollapsed && (
-        <div className="overflow-x-auto overflow-y-auto" ref={diffContainerRef}>
-          <div className="font-mono text-sm">
-            {parsedDiff.length > 0 ? (
-              parsedDiff.map((line, index) => renderDiffLine(line, index))
-            ) : (
-              <div className="px-4 py-8 text-center text-gray-500">
-                No changes found for this file
+        <div className="overflow-x-auto overflow-y-auto max-h-[600px]" ref={diffContainerRef}>
+          {isLoading ? (
+            <div className="p-4">
+              <div className="space-y-1 font-mono text-sm">
+                {/* Skeleton loader that mimics diff appearance */}
+                <div className="animate-pulse space-y-1">
+                  {/* Hunk header */}
+                  <div className="flex">
+                    <div className="w-16 h-4 bg-blue-100 rounded mr-2"></div>
+                    <div className="h-4 bg-blue-100 rounded w-48"></div>
+                  </div>
+                  {/* Context lines */}
+                  <div className="flex">
+                    <div className="w-16 h-4 bg-gray-100 rounded mr-2"></div>
+                    <div className="h-4 bg-gray-200 rounded w-full"></div>
+                  </div>
+                  <div className="flex">
+                    <div className="w-16 h-4 bg-gray-100 rounded mr-2"></div>
+                    <div className="h-4 bg-gray-200 rounded w-5/6"></div>
+                  </div>
+                  {/* Removed line */}
+                  <div className="flex">
+                    <div className="w-16 h-4 bg-red-100 rounded mr-2"></div>
+                    <div className="h-4 bg-red-100 rounded w-4/6"></div>
+                  </div>
+                  {/* Added lines */}
+                  <div className="flex">
+                    <div className="w-16 h-4 bg-green-100 rounded mr-2"></div>
+                    <div className="h-4 bg-green-100 rounded w-3/4"></div>
+                  </div>
+                  <div className="flex">
+                    <div className="w-16 h-4 bg-green-100 rounded mr-2"></div>
+                    <div className="h-4 bg-green-100 rounded w-5/6"></div>
+                  </div>
+                  {/* More context */}
+                  <div className="flex">
+                    <div className="w-16 h-4 bg-gray-100 rounded mr-2"></div>
+                    <div className="h-4 bg-gray-200 rounded w-4/5"></div>
+                  </div>
+                  <div className="flex">
+                    <div className="w-16 h-4 bg-gray-100 rounded mr-2"></div>
+                    <div className="h-4 bg-gray-200 rounded w-3/5"></div>
+                  </div>
+                </div>
               </div>
-            )}
-          </div>
+            </div>
+          ) : (
+            <div className="font-mono text-sm">
+              {parsedDiff.length > 0 ? (
+                parsedDiff.map((line, index) => renderDiffLine(line, index))
+              ) : (
+                <div className="px-4 py-8 text-center text-gray-500">
+                  No changes found for this file
+                </div>
+              )}
+            </div>
+          )}
         </div>
       )}
       
diff --git a/src/components/LocalChangesView.tsx b/src/components/LocalChangesView.tsx
@@ -8,11 +8,13 @@ import { LocalDiffData } from '../types';
 interface LocalChangesViewProps {
   localDiffData: LocalDiffData | null;
   localFileDiffs: Record<string, { working: string; staged: string }>;
+  loadingFiles: Record<string, boolean>;
   selectedFile: string | null;
   loading: boolean;
   isRefreshing: boolean;
   isGlobalRefreshing: boolean;
   onFetchLocalDiff: () => Promise<void>;
+  onFetchFileDiff: (file: string) => Promise<void>;
   onFileSelect: (file: string) => void;
   onRefresh: () => Promise<void>;
   onGlobalRefresh: () => Promise<void>;
@@ -26,11 +28,13 @@ interface LocalChangesViewProps {
 const LocalChangesView: React.FC<LocalChangesViewProps> = ({
   localDiffData,
   localFileDiffs,
+  loadingFiles,
   selectedFile,
   loading,
   isRefreshing,
   isGlobalRefreshing,
   onFetchLocalDiff,
+  onFetchFileDiff,
   onFileSelect,
   onRefresh,
   onGlobalRefresh,
@@ -46,15 +50,55 @@ const LocalChangesView: React.FC<LocalChangesViewProps> = ({
   const [collapsedFiles, setCollapsedFiles] = useState<Record<string, boolean>>({});
   const [viewedFiles, setViewedFiles] = useState<Record<string, boolean>>({});
   const [previousDiffs, setPreviousDiffs] = useState<Record<string, { working: string; staged: string }>>({});
+  const observerRef = useRef<IntersectionObserver | null>(null);
 
   useEffect(() => {
     if (!localDiffData && !loading) {
       onFetchLocalDiff();
     }
   }, [localDiffData, loading, onFetchLocalDiff]);
 
+  // Set up Intersection Observer for auto-loading visible files
+  useEffect(() => {
+    if (!localDiffData) return;
+
+    // Create observer to detect when file elements come into view
+    observerRef.current = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            const file = entry.target.getAttribute('data-file');
+            if (file && !localFileDiffs[file] && !loadingFiles[file]) {
+              onFetchFileDiff(file);
+            }
+          }
+        });
+      },
+      {
+        rootMargin: '100px', // Start loading 100px before element is visible
+        threshold: 0.1
+      }
+    );
+
+    // Observe all file elements
+    Object.entries(fileRefs.current).forEach(([file, element]) => {
+      if (element && observerRef.current) {
+        element.setAttribute('data-file', file);
+        observerRef.current.observe(element);
+      }
+    });
+
+    return () => {
+      if (observerRef.current) {
+        observerRef.current.disconnect();
+      }
+    };
+  }, [localDiffData, localFileDiffs, loadingFiles, onFetchFileDiff]);
+
   const handleFileSelect = (file: string) => {
     onFileSelect(file);
+    // Load file diff when selected
+    onFetchFileDiff(file);
     // Note: Scrolling is now handled by the parent component when needed
   };
 
@@ -182,7 +226,7 @@ const LocalChangesView: React.FC<LocalChangesViewProps> = ({
         <div className="flex-1 grid grid-cols-1 lg:grid-cols-5 gap-6 p-6">
           <div className="lg:col-span-1">
             <FileTree
-              files={showOnlyStaged ? localDiffData.stagedFiles : [...localDiffData.workingFiles, ...localDiffData.stagedFiles]}
+              files={showOnlyStaged ? localDiffData.stagedFiles : [...localDiffData.workingFiles, ...localDiffData.stagedFiles, ...localDiffData.untrackedFiles]}
               onFileSelect={handleFileSelect}
               selectedFile={selectedFile}
             />
@@ -192,7 +236,7 @@ const LocalChangesView: React.FC<LocalChangesViewProps> = ({
               {(() => {
                 const allFiles = showOnlyStaged 
                   ? localDiffData.stagedFiles.map(f => f.file)
-                  : Array.from(new Set([...localDiffData.workingFiles.map(f => f.file), ...localDiffData.stagedFiles.map(f => f.file)]));
+                  : Array.from(new Set([...localDiffData.workingFiles.map(f => f.file), ...localDiffData.stagedFiles.map(f => f.file), ...localDiffData.untrackedFiles.map(f => f.file)]));
                 
                 return allFiles.map((file) => (
                   <div
@@ -207,14 +251,21 @@ const LocalChangesView: React.FC<LocalChangesViewProps> = ({
                     }`}
                   >
                     <div className="space-y-4">
-                      {!showOnlyStaged && localFileDiffs[file]?.working && (
+                      {/* Working Directory Changes */}
+                      {!showOnlyStaged && (
+                        localDiffData.workingFiles.some(f => f.file === file) || 
+                        localDiffData.untrackedFiles.some(f => f.file === file)
+                      ) && (
                         <div>
-                          <h3 className="text-lg font-semibold text-gray-900 mb-2">Working Directory Changes</h3>
+                          <h3 className="text-lg font-semibold text-gray-900 mb-2">
+                            {localDiffData.untrackedFiles.some(f => f.file === file) ? 'Untracked File' : 'Working Directory Changes'}
+                          </h3>
                           <DiffViewer
-                            diff={localFileDiffs[file].working}
+                            diff={localFileDiffs[file]?.working || ''}
+                            isLoading={!localFileDiffs[file]}
                             selectedFile={file}
-                            fromBranch="HEAD"
-                            toBranch="Working Directory"
+                            fromBranch={localDiffData.untrackedFiles.some(f => f.file === file) ? "/dev/null" : "HEAD"}
+                            toBranch={localDiffData.untrackedFiles.some(f => f.file === file) ? "Untracked" : "Working Directory"}
                             isSelected={selectedFile === file}
                             onRefresh={onRefresh}
                             isRefreshing={isRefreshing}
@@ -229,11 +280,14 @@ const LocalChangesView: React.FC<LocalChangesViewProps> = ({
                           />
                         </div>
                       )}
-                      {localFileDiffs[file]?.staged && (
+                      
+                      {/* Staged Changes */}
+                      {localDiffData.stagedFiles.some(f => f.file === file) && (
                         <div>
                           <h3 className="text-lg font-semibold text-gray-900 mb-2">Staged Changes</h3>
                           <DiffViewer
-                            diff={localFileDiffs[file].staged}
+                            diff={localFileDiffs[file]?.staged || ''}
+                            isLoading={!localFileDiffs[file]}
                             selectedFile={file}
                             fromBranch="HEAD"
                             toBranch="Staged"
diff --git a/src/components/RepositorySelector.tsx b/src/components/RepositorySelector.tsx
diff --git a/src/types.ts b/src/types.ts
