diffity 0.1.0

package/packages/ui/src/components/diff-view.tsx

@@ -0,0 +1,278 @@
+import { useMemo, useRef, useState, useCallback, useImperativeHandle, useEffect } from 'react';
+import { useVirtualizer } from '@tanstack/react-virtual';
+import type { ParsedDiff } from '@diffity/parser';
+import { FileBlock, LARGE_DIFF_LINE_THRESHOLD } from './file-block';
+import { GeneralComments } from './general-comments';
+import { useHighlighter } from '../hooks/use-highlighter';
+import { type ViewMode, getFilePath } from '../lib/diff-utils';
+import type { CommentThread, LineSelection } from '../types/comment';
+import type { CommentActions } from '../hooks/use-comment-actions';
+
+function flashThreadElement(element: Element) {
+  element.classList.remove('flash-thread');
+  void (element as HTMLElement).offsetWidth;
+  element.classList.add('flash-thread');
+}
+
+export interface DiffViewHandle {
+  scrollToFile: (path: string) => void;
+  scrollToThread: (threadId: string, filePath: string) => void;
+}
+
+const VIRTUALIZER_OVERSCAN = 3;
+const FILE_HEADER_HEIGHT = 56;
+const EMPTY_CONTENT_HEIGHT = 100;
+const LINE_HEIGHT = 24;
+const HUNK_HEADER_HEIGHT = 32;
+const FILE_BLOCK_PADDING = 16;
+
+interface DiffViewProps {
+  diff: ParsedDiff;
+  viewMode: ViewMode;
+  theme: 'light' | 'dark';
+  collapsedFiles: Set<string>;
+  onToggleCollapse: (path: string) => void;
+  reviewedFiles: Set<string>;
+  onReviewedChange: (path: string, reviewed: boolean) => void;
+  onActiveFileChange?: (path: string) => void;
+  scrollRef?: React.RefCallback<HTMLElement>;
+  handle?: React.Ref<DiffViewHandle>;
+  baseRef?: string;
+  canRevert?: boolean;
+  onRevert?: () => void;
+  threads: CommentThread[];
+  commentsEnabled: boolean;
+  commentActions: CommentActions;
+  onAddThread: CommentActions['addThread'];
+  pendingSelection: LineSelection | null;
+  onPendingSelectionChange: (selection: LineSelection | null) => void;
+}
+
+function estimateFileHeight(file: { hunks: { lines: { length: number } }[]; isBinary: boolean }, collapsed: boolean): number {
+  if (collapsed) {
+    return FILE_HEADER_HEIGHT;
+  }
+  if (file.isBinary || file.hunks.length === 0) {
+    return EMPTY_CONTENT_HEIGHT;
+  }
+  let lineCount = 0;
+  for (const hunk of file.hunks) {
+    lineCount += hunk.lines.length;
+  }
+  if (lineCount >= LARGE_DIFF_LINE_THRESHOLD) {
+    return EMPTY_CONTENT_HEIGHT;
+  }
+  return FILE_HEADER_HEIGHT + lineCount * LINE_HEIGHT + file.hunks.length * HUNK_HEADER_HEIGHT + FILE_BLOCK_PADDING;
+}
+
+export function DiffView(props: DiffViewProps) {
+  const {
+    diff, viewMode, theme, collapsedFiles, onToggleCollapse,
+    reviewedFiles, onReviewedChange, onActiveFileChange, scrollRef,
+    handle, baseRef, canRevert, onRevert,
+    threads, commentsEnabled, commentActions, onAddThread,
+    pendingSelection, onPendingSelectionChange,
+  } = props;
+  const { highlight } = useHighlighter();
+  const scrollElementRef = useRef<HTMLElement>(null);
+
+  const highlighters = useMemo(() => {
+    const map = new Map<string, (code: string) => ReturnType<typeof highlight>>();
+    for (const file of diff.files) {
+      const filePath = getFilePath(file);
+      map.set(filePath, (code: string) => highlight(code, filePath, theme));
+    }
+    return map;
+  }, [diff, highlight, theme]);
+
+  const virtualizer = useVirtualizer({
+    count: diff.files.length,
+    getScrollElement: () => scrollElementRef.current,
+    estimateSize: (index) => estimateFileHeight(diff.files[index], collapsedFiles.has(getFilePath(diff.files[index]))),
+    overscan: VIRTUALIZER_OVERSCAN,
+  });
+
+  const scrollTargetRef = useRef<string | null>(null);
+  const [highlightedFile, setHighlightedFile] = useState<string | null>(null);
+
+  const [pendingThreadScroll, setPendingThreadScroll] = useState<string | null>(null);
+
+  useImperativeHandle(handle, () => ({
+    scrollToFile: (path: string) => {
+      const index = diff.files.findIndex((f) => getFilePath(f) === path);
+      if (index >= 0) {
+        scrollTargetRef.current = path;
+        setHighlightedFile(path);
+        virtualizer.scrollToIndex(index, { align: 'start' });
+      }
+    },
+    scrollToThread: (threadId: string, filePath: string) => {
+      const element = document.querySelector(`[data-thread-id="${threadId}"]`);
+      if (element) {
+        element.scrollIntoView({ behavior: 'instant', block: 'center' });
+        flashThreadElement(element);
+        return;
+      }
+
+      const index = diff.files.findIndex((f) => getFilePath(f) === filePath);
+      if (index >= 0) {
+        scrollTargetRef.current = filePath;
+        virtualizer.scrollToIndex(index, { align: 'start' });
+        setPendingThreadScroll(threadId);
+      }
+    },
+  }), [diff.files, virtualizer]);
+
+  useEffect(() => {
+    if (!pendingThreadScroll) {
+      return;
+    }
+
+    const scrollEl = scrollElementRef.current;
+    if (!scrollEl) {
+      return;
+    }
+
+    const threadId = pendingThreadScroll;
+
+    const tryScroll = () => {
+      const element = document.querySelector(`[data-thread-id="${threadId}"]`);
+      if (element) {
+        setPendingThreadScroll(null);
+        element.scrollIntoView({ behavior: 'instant', block: 'center' });
+        flashThreadElement(element);
+        return true;
+      }
+      return false;
+    };
+
+    if (tryScroll()) {
+      return;
+    }
+
+    const observer = new MutationObserver(() => {
+      if (tryScroll()) {
+        observer.disconnect();
+      }
+    });
+
+    observer.observe(scrollEl, { childList: true, subtree: true });
+
+    const timeout = setTimeout(() => {
+      setPendingThreadScroll(null);
+      observer.disconnect();
+    }, 2000);
+
+    return () => {
+      observer.disconnect();
+      clearTimeout(timeout);
+    };
+  }, [pendingThreadScroll]);
+
+  const getTopVisibleFile = useCallback((): string | null => {
+    const visibleItems = virtualizer.getVirtualItems();
+    if (visibleItems.length === 0) {
+      return null;
+    }
+
+    const scrollEl = scrollElementRef.current;
+    if (!scrollEl) {
+      return null;
+    }
+
+    const scrollTop = scrollEl.scrollTop;
+    for (const item of visibleItems) {
+      if (item.end > scrollTop) {
+        return getFilePath(diff.files[item.index]);
+      }
+    }
+
+    return getFilePath(diff.files[visibleItems[0].index]);
+  }, [virtualizer, diff.files]);
+
+  const handleScroll = useCallback(() => {
+    if (!onActiveFileChange) {
+      return;
+    }
+
+    const topFile = getTopVisibleFile();
+    if (!topFile) {
+      return;
+    }
+
+    if (scrollTargetRef.current) {
+      if (topFile === scrollTargetRef.current) {
+        scrollTargetRef.current = null;
+      }
+      return;
+    }
+
+    onActiveFileChange(topFile);
+  }, [getTopVisibleFile, onActiveFileChange]);
+
+  const items = virtualizer.getVirtualItems();
+  const [paddingTop, paddingBottom] = items.length > 0
+    ? [
+        items[0].start,
+        virtualizer.getTotalSize() - items[items.length - 1].end,
+      ]
+    : [0, 0];
+
+  return (
+    <main
+      ref={(node) => {
+        scrollElementRef.current = node;
+        if (scrollRef) {
+          scrollRef(node);
+        }
+      }}
+      onScroll={handleScroll}
+      className="flex-1 overflow-y-auto pb-12"
+    >
+      {commentsEnabled && (
+        <GeneralComments
+          threads={threads}
+          commentActions={commentActions}
+        />
+      )}
+      <div className="py-2" style={{ paddingTop, paddingBottom }}>
+        {items.map((virtualItem) => {
+          const file = diff.files[virtualItem.index];
+          const filePath = getFilePath(file);
+          return (
+            <div
+              key={filePath + '-' + virtualItem.index}
+              data-index={virtualItem.index}
+              ref={virtualizer.measureElement}
+            >
+              <FileBlock
+                highlighted={highlightedFile === filePath}
+                onHighlightEnd={() => {
+                  if (highlightedFile === filePath) {
+                    setHighlightedFile(null);
+                  }
+                }}
+                file={file}
+                viewMode={viewMode}
+                collapsed={collapsedFiles.has(filePath)}
+                onToggleCollapse={onToggleCollapse}
+                reviewed={reviewedFiles.has(filePath)}
+                onReviewedChange={onReviewedChange}
+                highlightLine={highlighters.get(filePath)}
+                baseRef={baseRef}
+                canRevert={canRevert}
+                onRevert={onRevert}
+                threads={threads}
+                commentsEnabled={commentsEnabled}
+                commentActions={commentActions}
+                onAddThread={onAddThread}
+                pendingSelection={pendingSelection}
+                onPendingSelectionChange={onPendingSelectionChange}
+              />
+            </div>
+          );
+        })}
+      </div>
+    </main>
+  );
+}

package/packages/ui/src/components/expand-row.tsx

@@ -0,0 +1,45 @@
+import { ArrowUpIcon } from './icons/arrow-up-icon';
+import { ArrowDownIcon } from './icons/arrow-down-icon';
+import { Spinner } from './icons/spinner';
+
+interface ExpandRowProps {
+  position: 'top' | 'bottom';
+  remainingLines: number;
+  loading: boolean;
+  onExpand: (dir: 'up' | 'down' | 'all') => void;
+}
+
+const gutterCell = 'w-[25px] min-w-[25px] bg-diff-hunk-bg border-r border-border-muted p-0';
+const expandBtn = 'flex items-center justify-center w-full h-[18px] cursor-pointer text-diff-hunk-text/70 hover:text-diff-hunk-text transition-colors';
+const expandRowClass = 'bg-diff-hunk-bg';
+
+export function ExpandRow(props: ExpandRowProps) {
+  const { position, remainingLines, loading, onExpand } = props;
+
+  if (remainingLines <= 0) {
+    return null;
+  }
+
+  return (
+    <tr className={expandRowClass}>
+      {loading ? (
+        <td className={gutterCell}>
+          <div className="flex items-center justify-center h-[18px]">
+            <Spinner />
+          </div>
+        </td>
+      ) : (
+        <td className={gutterCell}>
+          <button
+            className={expandBtn}
+            onClick={() => onExpand('down')}
+            title={`Expand ${Math.min(remainingLines, 20)} lines`}
+          >
+            {position === 'bottom' ? <ArrowDownIcon /> : <ArrowUpIcon />}
+          </button>
+        </td>
+      )}
+      <td colSpan={3} />
+    </tr>
+  );
+}