trident-git 0.2.0

package/src/components/context-menu.tsx

@@ -0,0 +1,200 @@
+'use client';
+
+import { useState, useEffect, useRef } from 'react';
+import { cn } from '@/lib/utils';
+
+export interface ContextMenuItem {
+    label: string;
+    labelNode?: React.ReactNode;
+    onClick?: () => void;
+    danger?: boolean;
+    children?: ContextMenuItem[];
+    disabled?: boolean;
+}
+
+export function ContextMenu({
+    children,
+    items,
+    containerClassName = 'w-full',
+}: {
+    children: React.ReactNode,
+    items: ContextMenuItem[],
+    containerClassName?: string
+}) {
+    const [isOpen, setIsOpen] = useState(false);
+    const [position, setPosition] = useState({ x: 0, y: 0 });
+    const menuRef = useRef<HTMLUListElement>(null);
+    const containerRef = useRef<HTMLDivElement>(null);
+
+    const handleContextMenu = (e: React.MouseEvent) => {
+        e.preventDefault();
+        e.stopPropagation();
+        
+        // Calculate position relative to viewport
+        const x = e.clientX;
+        const y = e.clientY;
+        
+        setPosition({ x, y });
+        setIsOpen(true);
+    };
+
+    // Close menu when clicking outside
+    useEffect(() => {
+        if (!isOpen) return;
+
+        const handleClickOutside = (e: MouseEvent) => {
+            if (menuRef.current && !menuRef.current.contains(e.target as Node) &&
+                containerRef.current && !containerRef.current.contains(e.target as Node)) {
+                setIsOpen(false);
+            }
+        };
+
+        const handleEscape = (e: KeyboardEvent) => {
+            if (e.key === 'Escape') {
+                setIsOpen(false);
+            }
+        };
+
+        // Use setTimeout to avoid immediate closure
+        setTimeout(() => {
+            document.addEventListener('click', handleClickOutside);
+            document.addEventListener('contextmenu', handleClickOutside);
+            document.addEventListener('keydown', handleEscape);
+        }, 0);
+
+        return () => {
+            document.removeEventListener('click', handleClickOutside);
+            document.removeEventListener('contextmenu', handleClickOutside);
+            document.removeEventListener('keydown', handleEscape);
+        };
+    }, [isOpen]);
+
+    // Calculate menu width based on content and adjust position if menu would go off-screen
+    useEffect(() => {
+        if (!isOpen || !menuRef.current) return;
+
+        const menu = menuRef.current;
+        
+        // Use requestAnimationFrame to ensure styles are applied
+        requestAnimationFrame(() => {
+            // Calculate optimal width based on content
+            // Create a temporary element to measure text width
+            const tempElement = document.createElement('div');
+            tempElement.style.position = 'absolute';
+            tempElement.style.visibility = 'hidden';
+            tempElement.style.whiteSpace = 'nowrap';
+            tempElement.style.pointerEvents = 'none';
+            
+            // Copy font styles from menu
+            const menuStyles = window.getComputedStyle(menu);
+            tempElement.style.fontSize = menuStyles.fontSize;
+            tempElement.style.fontFamily = menuStyles.fontFamily;
+            tempElement.style.fontWeight = menuStyles.fontWeight;
+            tempElement.style.padding = '0.5rem 0.75rem'; // Match menu item padding
+            tempElement.style.boxSizing = 'border-box';
+            
+            document.body.appendChild(tempElement);
+
+            let maxWidth = 0;
+            items.forEach(item => {
+                tempElement.textContent = item.label;
+                const width = tempElement.getBoundingClientRect().width;
+                if (width > maxWidth) {
+                    maxWidth = width;
+                }
+            });
+
+            document.body.removeChild(tempElement);
+
+            // Set menu width (add padding: 1rem on each side = 2rem total = 32px)
+            const menuWidth = Math.max(maxWidth + 32, 280); // Minimum 280px, or content width + padding
+            menu.style.width = `${menuWidth}px`;
+            menu.style.minWidth = `${menuWidth}px`;
+
+            // Now adjust position if menu would go off-screen
+            const rect = menu.getBoundingClientRect();
+            const viewportWidth = window.innerWidth;
+            const viewportHeight = window.innerHeight;
+
+            let adjustedX = position.x;
+            let adjustedY = position.y;
+
+            // Adjust horizontal position if menu goes off right edge
+            if (rect.right > viewportWidth) {
+                adjustedX = viewportWidth - rect.width - 10;
+            }
+            // Adjust horizontal position if menu goes off left edge
+            if (adjustedX < 10) {
+                adjustedX = 10;
+            }
+
+            // Adjust vertical position if menu goes off bottom edge
+            if (rect.bottom > viewportHeight) {
+                adjustedY = viewportHeight - rect.height - 10;
+            }
+            // Adjust vertical position if menu goes off top edge
+            if (adjustedY < 10) {
+                adjustedY = 10;
+            }
+
+            if (adjustedX !== position.x || adjustedY !== position.y) {
+                menu.style.left = `${adjustedX}px`;
+                menu.style.top = `${adjustedY}px`;
+            }
+        });
+    }, [isOpen, position, items]);
+
+    const renderMenuItem = (item: ContextMenuItem, key: string) => {
+        const hasChildren = !!item.children?.length;
+
+        return (
+            <li key={key} className={cn(hasChildren && "relative group/submenu")}>
+                <a
+                    onClick={(e) => {
+                        e.stopPropagation();
+                        if (item.disabled || hasChildren) {
+                            return;
+                        }
+                        item.onClick?.();
+                        setIsOpen(false);
+                    }}
+                    className={cn(
+                        "whitespace-nowrap",
+                        item.danger && "text-error",
+                        item.disabled && "opacity-40 pointer-events-none",
+                        hasChildren && "flex items-center justify-between gap-3"
+                    )}
+                >
+                    <span>{item.labelNode ?? item.label}</span>
+                    {hasChildren && <i className="iconoir-nav-arrow-right text-[12px]" aria-hidden="true" />}
+                </a>
+                {hasChildren && (
+                    <>
+                        <span className="hidden group-hover/submenu:block absolute left-full top-0 h-full w-3" />
+                        <ul className="hidden group-hover/submenu:block absolute left-[calc(100%-1px)] top-0 menu !m-0 p-2 shadow-lg bg-base-100 rounded-box border border-base-200 min-w-[220px] z-[10000] [&:before]:hidden">
+                            {item.children!.map((child, idx) => renderMenuItem(child, `${key}-${idx}`))}
+                        </ul>
+                    </>
+                )}
+            </li>
+        );
+    };
+
+    return (
+        <div ref={containerRef} className={containerClassName} onContextMenu={handleContextMenu}>
+            {children}
+            {isOpen && (
+                <ul
+                    ref={menuRef}
+                    className="fixed z-[9999] menu p-2 shadow-lg bg-base-100 rounded-box border border-base-200"
+                    style={{
+                        left: `${position.x}px`,
+                        top: `${position.y}px`,
+                    }}
+                >
+                    {items.map((item, idx) => renderMenuItem(item, `menu-${idx}`))}
+                </ul>
+            )}
+        </div>
+    );
+}

package/src/components/fs-browser.tsx

@@ -0,0 +1,154 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { cn } from '@/lib/utils';
+import { useEscapeDismiss } from '@/hooks/use-escape-dismiss';
+
+interface FSItem {
+  name: string;
+  path: string;
+  isRepo: boolean;
+}
+
+interface FSResponse {
+  path: string;
+  folders: FSItem[];
+  parent: string;
+}
+
+interface FileSystemBrowserProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onSelect: (path: string) => void;
+  initialPath?: string;
+  title?: string;
+}
+
+export function FileSystemBrowser({ open, onOpenChange, onSelect, initialPath, title = 'Select Repository' }: FileSystemBrowserProps) {
+  const [currentPath, setCurrentPath] = useState<string>('');
+  const [data, setData] = useState<FSResponse | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [hasInitialized, setHasInitialized] = useState(false);
+
+  const loadPath = async (path?: string) => {
+    setIsLoading(true);
+    try {
+      const url = path ? `/api/fs?path=${encodeURIComponent(path)}` : '/api/fs';
+      const res = await fetch(url);
+      const json = await res.json();
+      if (res.ok) {
+        setData(json);
+        setCurrentPath(json.path);
+      } else {
+          console.error(json.error);
+      }
+    } catch (e) {
+      console.error(e);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    if (open && !hasInitialized) {
+      loadPath(initialPath);
+      setHasInitialized(true);
+    }
+    if (!open) {
+      // Reset when dialog closes so it starts fresh next time
+      setHasInitialized(false);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [open, initialPath]);
+
+  useEscapeDismiss(open, () => onOpenChange(false));
+
+  const handleNavigate = (path: string) => {
+      loadPath(path);
+  }
+
+  if (!open) return null;
+
+  return (
+    <dialog className="modal modal-open">
+      <div className="modal-box w-11/12 max-w-2xl h-[80vh] flex flex-col p-0 overflow-hidden bg-base-100">
+        <div className="p-4 border-b border-base-300 flex justify-between items-center bg-base-200/50">
+          <div className="overflow-hidden">
+              <h3 className="font-bold text-lg">{title}</h3>
+              <div className="text-xs opacity-70 font-mono truncate pt-1" title={currentPath}>
+                {currentPath || 'Loading...'}
+              </div>
+          </div>
+          <button className="btn btn-sm btn-circle btn-ghost" onClick={() => onOpenChange(false)}>
+            <i className="iconoir-xmark text-[16px]" aria-hidden="true" />
+          </button>
+        </div>
+
+        <div className="flex-1 overflow-hidden relative bg-base-100">
+            {isLoading && (
+                <div className="absolute inset-0 bg-base-100/50 flex items-center justify-center z-10">
+                    <span className="loading loading-spinner loading-lg text-primary"></span>
+                </div>
+            )}
+            
+            <div className="h-full overflow-y-auto">
+                <div className="divide-y divide-base-200">
+                    {data?.parent && (
+                        <div 
+                            className="flex items-center gap-3 px-4 py-3 hover:bg-base-200 cursor-pointer opacity-70 transition-colors"
+                            onClick={() => handleNavigate(data.parent)}
+                        >
+                            <i className="iconoir-u-turn-arrow-left text-[20px]" aria-hidden="true" />
+                            <span className="text-sm">..</span>
+                        </div>
+                    )}
+                    
+                    {data?.folders.map((item) => (
+                        <div 
+                            key={item.path}
+                            className={cn(
+                                "flex items-center justify-between px-4 py-3 hover:bg-base-200 cursor-pointer group transition-colors",
+                                item.name.startsWith('.') && "opacity-60"
+                            )}
+                            onClick={() => handleNavigate(item.path)}
+                        >
+                            <div className="flex items-center gap-3 truncate">
+                                {item.isRepo ? <i className="iconoir-bookmark text-[20px]" aria-hidden="true" /> : <i className="iconoir-folder text-[20px]" aria-hidden="true" />}
+                                <span className={cn("text-sm font-mono", item.isRepo && "font-medium")}>{item.name}</span>
+                            </div>
+                            
+                            {item.isRepo && (
+                                <button
+                                    className="btn btn-xs btn-outline"
+                                    onClick={(e) => { e.stopPropagation(); onSelect(item.path); onOpenChange(false); }}
+                                >
+                                    Select
+                                </button>
+                            )}
+                        </div>
+                    ))}
+                    
+                    {data?.folders.length === 0 && (
+                        <div className="p-8 text-center opacity-70 text-sm">
+                            No folders found
+                        </div>
+                    )}
+                </div>
+            </div>
+        </div>
+
+        <div className="p-4 border-t border-base-300 flex items-center justify-between bg-base-200/30">
+           <div className="text-xs opacity-70">
+               Click folder to navigate.
+           </div>
+           <button className="btn btn-primary btn-sm" onClick={() => { onSelect(currentPath); onOpenChange(false); }}>
+               Select Current Folder
+           </button>
+        </div>
+      </div>
+      <form method="dialog" className="modal-backdrop">
+        <button onClick={() => onOpenChange(false)}>close</button>
+      </form>
+    </dialog>
+  );
+}

package/src/components/git/diff-view.tsx

@@ -0,0 +1,137 @@
+'use client';
+
+import { useGitDiff } from '@/hooks/use-git';
+import { useState, useEffect } from 'react';
+import { useTheme } from 'next-themes';
+import { getChangedLineCountFromDiff, isFileBinary, isImageFile } from '@/lib/utils';
+import { GroupedDiffViewer } from './grouped-diff-viewer';
+import { ImageDiffView } from './image-diff-view';
+
+export function DiffView({ repoPath, filePath }: { repoPath: string, filePath: string }) {
+  const { data, isLoading } = useGitDiff(repoPath, filePath);
+  
+  // Storage key for split view preference
+  const storageKey = 'git-web:diff-view-split';
+  
+  const [splitView, setSplitView] = useState(() => {
+    if (typeof window === 'undefined') return true;
+    try {
+      const stored = localStorage.getItem(storageKey);
+      return stored !== null ? JSON.parse(stored) : true;
+    } catch (e) {
+      console.error('Failed to load split view preference:', e);
+      return true;
+    }
+  });
+
+  const [renderAnyway, setRenderAnyway] = useState(false);
+  
+  const { resolvedTheme } = useTheme();
+
+  // Reset renderAnyway when filePath changes
+  useEffect(() => {
+    setRenderAnyway(false);
+  }, [filePath]);
+
+  // Save split view preference when it changes
+  useEffect(() => {
+    try {
+      localStorage.setItem(storageKey, JSON.stringify(splitView));
+    } catch (e) {
+      console.error('Failed to save split view preference:', e);
+    }
+  }, [splitView]);
+
+  if (isLoading) {
+    return <div className="flex items-center justify-center p-8 h-full"><span className="loading loading-spinner text-base-content/50"></span></div>;
+  }
+
+  if (!data) {
+    return (
+      <div className="flex items-center justify-center h-full opacity-50">
+        No diff available
+      </div>
+    )
+  }
+
+  const isImage = isImageFile(filePath);
+  if (isImage) {
+    return (
+      <div className="flex flex-col h-full bg-base-100">
+        <div className="flex items-center justify-between px-4 h-[57px] border-b border-base-300 shrink-0 bg-base-100">
+          <span className="text-sm font-mono truncate max-w-[70%]" title={filePath}>{filePath}</span>
+        </div>
+        <div className="flex-1 overflow-auto">
+          <ImageDiffView filePath={filePath} imageDiff={data.imageDiff} />
+        </div>
+      </div>
+    );
+  }
+
+  // Check if file is binary (first by extension, then by content if unknown)
+  const isBinary = isFileBinary(filePath, data.left, data.right);
+
+  if (isBinary) {
+    return (
+      <div className="flex flex-col h-full bg-base-100">
+        <div className="flex items-center justify-between px-4 h-[57px] border-b border-base-300 shrink-0 bg-base-100">
+          <span className="text-sm font-mono truncate max-w-[70%]" title={filePath}>{filePath}</span>
+        </div>
+        <div className="flex-1 flex items-center justify-center opacity-50">
+          Binary file - diff not available
+        </div>
+      </div>
+    );
+  }
+
+  // Large file protection
+  const MAX_DIFF_SIZE = 100 * 1024; // 100KB
+  const MAX_DIFF_LINES = 3000;
+
+  const diffContent = data.diff || '';
+  const contentSize = diffContent.length;
+  const lineCount = getChangedLineCountFromDiff(diffContent);
+
+  const isLargeDiff = (contentSize > MAX_DIFF_SIZE || lineCount > MAX_DIFF_LINES);
+
+  return (
+    <div className="flex flex-col h-full bg-base-100">
+      <div className="flex items-center justify-between px-4 h-[57px] border-b border-base-300 shrink-0 bg-base-100">
+        <span className="text-sm font-mono truncate max-w-[70%]" title={filePath}>{filePath}</span>
+        <div className="flex items-center gap-2">
+          <label htmlFor="split-view" className="text-[10px] uppercase tracking-wider font-bold cursor-pointer opacity-70">Split View</label>
+          <input
+            type="checkbox"
+            id="split-view"
+            checked={splitView}
+            onChange={(e) => setSplitView(e.target.checked)}
+            className="toggle toggle-sm toggle-primary"
+          />
+        </div>
+      </div>
+      <div className="flex-1 overflow-auto diff-viewer-wrapper">
+        {isLargeDiff && !renderAnyway ? (
+          <div className="flex flex-col items-center justify-center h-full gap-4 text-center p-4">
+            <i className="iconoir-warning-triangle text-[40px] text-warning" aria-hidden="true" />
+            <div className="space-y-2">
+              <h3 className="font-bold text-lg">Large Diff Detected</h3>
+              <p className="opacity-70">
+                This diff is large ({Math.round(contentSize / 1024)}KB, ~{lineCount} changed lines) and may freeze your browser if rendered.
+              </p>
+            </div>
+            <button className="btn btn-outline" onClick={() => setRenderAnyway(true)}>
+              Show Diff Anyway
+            </button>
+          </div>
+        ) : (
+          <GroupedDiffViewer
+            oldValue={data.left || ''}
+            newValue={data.right || ''}
+            splitView={splitView}
+            useDarkTheme={resolvedTheme === 'dark'}
+          />
+        )}
+      </div>
+    </div>
+  );
+}