trident-git 0.2.0 → 0.2.1

package/src/components/context-menu.tsx

@@ -1,200 +0,0 @@
-'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

@@ -1,154 +0,0 @@
-'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

@@ -1,137 +0,0 @@
-'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>
-  );
-}