diffity 0.1.0 → 0.1.1

package/packages/ui/src/components/file-block.tsx

@@ -1,536 +0,0 @@
-import { useState, useMemo, useCallback } from 'react';
-import { useQueryClient } from '@tanstack/react-query';
-import type { DiffHunk } from '@diffity/parser';
-import type { DiffFile, DiffLine as DiffLineType } from '@diffity/parser';
-import type { SyntaxToken } from '../lib/syntax-token';
-import type { HighlightedTokens } from '../hooks/use-highlighter';
-import type { CommentSide, LineSelection } from '../types/comment';
-import { type ViewMode, getFilePath, buildChangeGroupPatch, extractLinesFromDiff } from '../lib/diff-utils';
-import { revertHunk as apiRevertHunk } from '../lib/api';
-import { ConfirmDialog } from './ui/confirm-dialog';
-import { computeGaps, createContextLines, getExpandRange, type ExpandableGap } from '../lib/context-expansion';
-import { fileContentOptions } from '../queries/file';
-import type { CommentActions } from '../hooks/use-comment-actions';
-import type { CommentThread } from '../types/comment';
-import { GENERAL_THREAD_FILE_PATH } from '../types/comment';
-import { useLineSelection } from '../hooks/use-line-selection';
-import { useCopy } from '../hooks/use-copy';
-import { CopyIcon } from './icons/copy-icon';
-import { CheckIcon } from './icons/check-icon';
-import { CommentIcon } from './icons/comment-icon';
-import { DiffStats } from './diff-stats';
-import { Badge } from './ui/badge';
-import { IconButton } from './ui/icon-button';
-import { StatusBadge } from './ui/status-badge';
-import { HunkWithGap } from './hunk-with-gap';
-import { OrphanedThreads } from './orphaned-threads';
-import { ThreadBadge } from './ui/thread-badge';
-import { buildExpansionSyntaxMap, renderExpansionRows } from './render-expansion-rows';
-import { ExpandRow } from './expand-row';
-
-export const LARGE_DIFF_LINE_THRESHOLD = 200;
-
-const DEFAULT_AUTHOR = { name: 'You', type: 'user' as const };
-
-function getTotalLineCount(file: DiffFile): number {
-  let count = 0;
-  for (const hunk of file.hunks) {
-    count += hunk.lines.length;
-  }
-  return count;
-}
-
-interface FileBlockProps {
-  file: DiffFile;
-  viewMode: ViewMode;
-  collapsed: boolean;
-  onToggleCollapse: (path: string) => void;
-  reviewed: boolean;
-  onReviewedChange: (path: string, reviewed: boolean) => void;
-  highlightLine?: (code: string) => HighlightedTokens[] | null;
-  baseRef?: string;
-  canRevert?: boolean;
-  onRevert?: () => void;
-  threads: CommentThread[];
-  commentsEnabled: boolean;
-  commentActions: CommentActions;
-  onAddThread: CommentActions['addThread'];
-  pendingSelection: LineSelection | null;
-  onPendingSelectionChange: (selection: LineSelection | null) => void;
-  highlighted?: boolean;
-  onHighlightEnd?: () => void;
-}
-
-interface GapExpansion {
-  fromTop: number;
-  fromBottom: number;
-  linesFromTop: DiffLineType[];
-  linesFromBottom: DiffLineType[];
-}
-
-export function FileBlock(props: FileBlockProps) {
-  const {
-    file, viewMode, collapsed, onToggleCollapse, reviewed, onReviewedChange, highlightLine, baseRef, canRevert, onRevert,
-    threads: allThreads, commentsEnabled, commentActions, onAddThread: rawAddThread, pendingSelection, onPendingSelectionChange,
-    highlighted, onHighlightEnd,
-  } = props;
-
-  const totalLines = getTotalLineCount(file);
-  const isLargeDiff = totalLines >= LARGE_DIFF_LINE_THRESHOLD;
-
-  const [largeDiffExpanded, setLargeDiffExpanded] = useState(false);
-  const [expansions, setExpansions] = useState<Map<string, GapExpansion>>(new Map());
-  const [loadingGap, setLoadingGap] = useState<string | null>(null);
-
-  const filePath = getFilePath(file);
-  const showRename = file.status === 'renamed' && file.oldPath !== file.newPath;
-  const isNewFile = file.status === 'added';
-
-  const queryClient = useQueryClient();
-  const fileContentPath = file.oldPath || filePath;
-  const fileLineCount = file.oldFileLineCount ?? null;
-
-  const { copied: pathCopied, copy: copyPath } = useCopy();
-
-  const [confirmRevertChange, setConfirmRevertChange] = useState<{ hunk: DiffHunk; startIndex: number; endIndex: number } | null>(null);
-
-  const handleRevertChange = useCallback(async (info: { hunk: DiffHunk; startIndex: number; endIndex: number }) => {
-    setConfirmRevertChange(null);
-    const patch = buildChangeGroupPatch(file, info.hunk, info.startIndex, info.endIndex);
-    await apiRevertHunk(patch);
-    onRevert?.();
-  }, [file, onRevert]);
-
-
-  const { addReply, resolveThread, unresolveThread, dismissThread, deleteComment, deleteThread } = commentActions;
-
-  const getOriginalCode = useCallback((side: CommentSide, startLine: number, endLine: number) => {
-    return extractLinesFromDiff(file.hunks, side, startLine, endLine);
-  }, [file.hunks]);
-
-  const addThread = useCallback((fp: string, side: CommentSide, startLine: number, endLine: number, body: string, author: import('../types/comment').CommentAuthor) => {
-    const anchorContent = extractLinesFromDiff(file.hunks, side, startLine, endLine);
-    rawAddThread(fp, side, startLine, endLine, body, author, anchorContent || undefined);
-  }, [rawAddThread, file.hunks]);
-
-  const allFileThreads = useMemo(() => {
-    return allThreads.filter(t => t.filePath === filePath && t.filePath !== GENERAL_THREAD_FILE_PATH);
-  }, [allThreads, filePath]);
-
-  const { anchoredThreads: fileThreads, orphanedThreads } = useMemo(() => {
-    const diffLineNumbers = new Set<string>();
-    for (const hunk of file.hunks) {
-      for (const line of hunk.lines) {
-        if (line.oldLineNumber !== null) {
-          diffLineNumbers.add(`old:${line.oldLineNumber}`);
-        }
-        if (line.newLineNumber !== null) {
-          diffLineNumbers.add(`new:${line.newLineNumber}`);
-        }
-      }
-    }
-
-    const anchored: typeof allFileThreads = [];
-    const orphaned: typeof allFileThreads = [];
-    for (const thread of allFileThreads) {
-      let isInDiff = false;
-      for (let line = thread.startLine; line <= thread.endLine; line++) {
-        if (diffLineNumbers.has(`${thread.side}:${line}`)) {
-          isInDiff = true;
-          break;
-        }
-      }
-
-      if (isInDiff) {
-        anchored.push(thread);
-      } else {
-        orphaned.push(thread);
-      }
-    }
-
-    return { anchoredThreads: anchored, orphanedThreads: orphaned };
-  }, [allFileThreads, file.hunks]);
-
-  const handleSelectionComplete = useCallback((selection: LineSelection) => {
-    if (!commentsEnabled) {
-      return;
-    }
-    onPendingSelectionChange(selection);
-  }, [onPendingSelectionChange, commentsEnabled]);
-
-  const { isLineInSelection, handleLineMouseDown, handleLineMouseEnter } = useLineSelection({
-    filePath,
-    onSelectionComplete: handleSelectionComplete,
-  });
-
-  const handleCommentClickFn = useCallback((line: number, side: CommentSide) => {
-    onPendingSelectionChange({
-      filePath,
-      side,
-      startLine: line,
-      endLine: line,
-    });
-  }, [filePath, onPendingSelectionChange]);
-
-  const handleCommentClick = commentsEnabled ? handleCommentClickFn : undefined;
-
-  const handleCancelPending = useCallback(() => {
-    onPendingSelectionChange(null);
-  }, [onPendingSelectionChange]);
-
-  const isLineSelected = useCallback((line: number, side: CommentSide) => {
-    if (isLineInSelection(line, side)) {
-      return true;
-    }
-    if (pendingSelection && pendingSelection.filePath === filePath && pendingSelection.side === side) {
-      return line >= pendingSelection.startLine && line <= pendingSelection.endLine;
-    }
-    for (const thread of fileThreads) {
-      if (thread.side === side && line >= thread.startLine && line <= thread.endLine && thread.status === 'open') {
-        return true;
-      }
-    }
-    return false;
-  }, [isLineInSelection, pendingSelection, filePath, fileThreads]);
-
-
-  const syntaxMap = useMemo(() => {
-    if (!highlightLine) {
-      return undefined;
-    }
-
-    const map = new Map<string, SyntaxToken[]>();
-
-    for (const hunk of file.hunks) {
-      for (const line of hunk.lines) {
-        const highlighted = highlightLine(line.content);
-        if (highlighted && highlighted.length > 0) {
-          const num = line.type === 'delete' ? line.oldLineNumber : line.newLineNumber;
-          const key = `${line.type}-${num}`;
-          map.set(key, highlighted[0].tokens);
-        }
-      }
-    }
-
-    return map;
-  }, [file, highlightLine]);
-
-  const gaps = useMemo(() => {
-    if (isNewFile) {
-      return [];
-    }
-    return computeGaps(file.hunks, fileLineCount);
-  }, [file.hunks, fileLineCount, isNewFile]);
-
-  const gapMap = useMemo(() => {
-    const map = new Map<string, ExpandableGap>();
-    for (const gap of gaps) {
-      map.set(gap.id, gap);
-    }
-    return map;
-  }, [gaps]);
-
-  const handleExpand = useCallback(async (gap: ExpandableGap, direction: 'up' | 'down' | 'all') => {
-    setLoadingGap(gap.id);
-
-    const lines = await queryClient.ensureQueryData(
-      fileContentOptions(fileContentPath, true, baseRef)
-    );
-
-    setExpansions(prev => {
-      const next = new Map(prev);
-      const existing = next.get(gap.id) || { fromTop: 0, fromBottom: 0, linesFromTop: [], linesFromBottom: [] };
-      const newOffset = gap.newStart - gap.oldStart;
-      const range = getExpandRange(gap, direction, existing);
-
-      if (!range) {
-        return prev;
-      }
-
-      const contextLines = createContextLines(lines, range.oldStart, range.oldEnd, newOffset);
-
-      if (direction === 'all') {
-        next.set(gap.id, {
-          fromTop: gap.oldEnd - gap.oldStart + 1,
-          fromBottom: 0,
-          linesFromTop: contextLines,
-          linesFromBottom: [],
-        });
-      } else if (direction === 'down') {
-        const newExpansion = {
-          ...existing,
-          fromTop: existing.fromTop + (range.oldEnd - range.oldStart + 1),
-          linesFromTop: [...existing.linesFromTop, ...contextLines],
-        };
-        next.set(gap.id, newExpansion);
-      } else {
-        const newExpansion = {
-          ...existing,
-          fromBottom: existing.fromBottom + (range.oldEnd - range.oldStart + 1),
-          linesFromBottom: [...contextLines, ...existing.linesFromBottom],
-        };
-        next.set(gap.id, newExpansion);
-      }
-
-      return next;
-    });
-
-    setLoadingGap(null);
-  }, [fileContentPath, queryClient, baseRef]);
-
-  const getGapRemaining = useCallback((gap: ExpandableGap): { total: number; up: number; down: number } => {
-    const expansion = expansions.get(gap.id);
-    if (!expansion) {
-      return { total: gap.totalLines, up: gap.totalLines, down: gap.totalLines };
-    }
-    const total = Math.max(0, gap.totalLines - expansion.fromTop - expansion.fromBottom);
-    const up = Math.max(0, gap.totalLines - expansion.fromTop);
-    const down = Math.max(0, gap.totalLines - expansion.fromBottom);
-    return { total, up, down };
-  }, [expansions]);
-
-  const getExpandControlsForHunk = useCallback((hunkIndex: number) => {
-    let gap: ExpandableGap | undefined;
-    let position: 'top' | 'between' = 'between';
-
-    if (hunkIndex === 0) {
-      gap = gapMap.get('top');
-      position = 'top';
-    } else {
-      gap = gapMap.get(`between-${hunkIndex - 1}`);
-      position = 'between';
-    }
-
-    if (!gap) {
-      return undefined;
-    }
-
-    const remaining = getGapRemaining(gap);
-    const wasExpanded = expansions.has(gap.id);
-
-    return {
-      position,
-      remainingLines: remaining.total,
-      remainingUp: remaining.up,
-      remainingDown: remaining.down,
-      loading: loadingGap === gap.id,
-      wasExpanded,
-      onExpand: (dir: 'up' | 'down' | 'all') => handleExpand(gap, dir),
-    };
-  }, [gapMap, getGapRemaining, loadingGap, handleExpand, expansions]);
-
-  const total = file.additions + file.deletions;
-  const addBlocks = total > 0 ? Math.round((file.additions / total) * Math.min(5, total)) : 0;
-  const delBlocks = total > 0 ? Math.min(5, total) - addBlocks : 0;
-  const neutralBlocks = 5 - addBlocks - delBlocks;
-
-  const bottomGap = gapMap.get('bottom');
-  const bottomRemaining = bottomGap ? getGapRemaining(bottomGap).total : 0;
-
-  const filePendingSelection = pendingSelection && pendingSelection.filePath === filePath ? pendingSelection : null;
-
-  return (
-    <div
-      className={`border rounded-lg mx-4 my-3 overflow-hidden ${highlighted ? 'animate-flash-highlight-border' : 'border-border'}`}
-      id={`file-${encodeURIComponent(filePath)}`}
-      onAnimationEnd={onHighlightEnd}
-    >
-      <div
-        className={`group flex items-center gap-2 px-3 py-1.5 border-border text-xs sticky top-0 z-10 shadow-sticky ${highlighted ? 'animate-flash-highlight' : 'bg-bg-secondary'}`}
-      >
-        <IconButton
-          className="text-[10px] w-4 h-4 shrink-0"
-          onClick={() => onToggleCollapse(filePath)}
-          title={collapsed ? 'Expand' : 'Collapse'}
-        >
-          {collapsed ? '\u25b6' : '\u25bc'}
-        </IconButton>
-        <button
-          className="font-mono text-xs truncate text-left cursor-pointer hover:text-accent transition-colors"
-          onClick={() => onToggleCollapse(filePath)}
-        >
-          {showRename ? (
-            <>
-              <span className="line-through text-text-muted">{file.oldPath}</span>
-              <span className="text-text-muted"> → </span>
-              <span>{file.newPath}</span>
-            </>
-          ) : (
-            filePath
-          )}
-        </button>
-        <button
-          onClick={() => copyPath(filePath)}
-          className="shrink-0 text-text-muted hover:text-text transition-colors cursor-pointer"
-          title="Copy file path"
-        >
-          {pathCopied ? (
-            <CheckIcon className="w-3 h-3 text-added" />
-          ) : (
-            <CopyIcon className="w-3 h-3" />
-          )}
-        </button>
-        {file.status !== 'modified' && <StatusBadge status={file.status} />}
-        {file.isBinary && <Badge className="bg-bg-tertiary text-text-muted">Binary</Badge>}
-        <div className="ml-auto flex items-center gap-2.5 shrink-0">
-          {(fileThreads.length + orphanedThreads.length) > 0 && (
-            <span className="text-[11px] text-text-muted flex items-center gap-1">
-              <CommentIcon className="w-3 h-3" />
-              {fileThreads.length + orphanedThreads.length}
-              {orphanedThreads.length > 0 && (
-                <ThreadBadge variant="outdated" size="sm">
-                  {orphanedThreads.length} outdated
-                </ThreadBadge>
-              )}
-            </span>
-          )}
-          <div className="flex items-center gap-1.5">
-            <DiffStats additions={file.additions} deletions={file.deletions} />
-            <div className="flex gap-px">
-              {Array.from({ length: addBlocks }).map((_, i) => (
-                <span key={`a${i}`} className="w-1.5 h-1.5 rounded-sm bg-added" />
-              ))}
-              {Array.from({ length: delBlocks }).map((_, i) => (
-                <span key={`d${i}`} className="w-1.5 h-1.5 rounded-sm bg-deleted" />
-              ))}
-              {Array.from({ length: neutralBlocks }).map((_, i) => (
-                <span key={`n${i}`} className="w-1.5 h-1.5 rounded-sm bg-border" />
-              ))}
-            </div>
-          </div>
-          <label className="flex items-center gap-1.5 text-[11px] text-text-muted cursor-pointer select-none hover:text-text transition-colors">
-            <input
-              type="checkbox"
-              checked={reviewed}
-              onChange={() => onReviewedChange(filePath, !reviewed)}
-              className="accent-added cursor-pointer w-3 h-3"
-            />
-            Viewed
-          </label>
-        </div>
-      </div>
-      {!collapsed && (
-        <div>
-          {file.isBinary ? (
-            <div className="p-4 text-center text-text-muted italic">Binary file not shown</div>
-          ) : file.hunks.length === 0 ? (
-            <div className="p-4 text-center text-text-muted italic">
-              {file.oldMode && file.newMode
-                ? `File mode changed from ${file.oldMode} to ${file.newMode}`
-                : 'No content changes'}
-            </div>
-          ) : isLargeDiff && !largeDiffExpanded ? (
-            <div className="flex items-center justify-center gap-3 py-6 px-4 text-sm text-text-muted">
-              <span>Large diff not rendered — {totalLines} lines</span>
-              <button
-                className="text-accent hover:underline cursor-pointer font-medium"
-                onClick={() => setLargeDiffExpanded(true)}
-              >
-                Load diff
-              </button>
-            </div>
-          ) : (
-            <>
-            <OrphanedThreads
-              threads={orphanedThreads}
-              onDeleteComment={deleteComment}
-              onDeleteThread={deleteThread}
-            />
-            <table className="w-full border-collapse table-fixed">
-              {viewMode === 'split' ? (
-                <colgroup>
-                  <col className="w-12.5" />
-                  <col className="w-[calc(50%-50px)]" />
-                  <col className="w-12.5" />
-                  <col />
-                </colgroup>
-              ) : (
-                <colgroup>
-                  <col className="w-12.5" />
-                  <col className="w-12.5" />
-                  <col className="w-5" />
-                  <col />
-                </colgroup>
-              )}
-              {file.hunks.map((hunk, i) => {
-                const betweenGap = i > 0 ? gapMap.get(`between-${i - 1}`) : undefined;
-                const betweenExpansion = betweenGap ? expansions.get(betweenGap.id) : undefined;
-                const topExpansion = i === 0 ? expansions.get('top') : undefined;
-
-                return (
-                  <HunkWithGap
-                    key={i}
-                    hunk={hunk}
-                    viewMode={viewMode}
-                    syntaxMap={syntaxMap}
-                    expandControls={getExpandControlsForHunk(i)}
-                    topExpansionLines={i === 0 ? [...(topExpansion?.linesFromTop ?? []), ...(topExpansion?.linesFromBottom ?? [])] : undefined}
-                    gapExpansion={betweenExpansion}
-                    gapId={betweenGap?.id}
-                    highlightLine={highlightLine}
-                    threads={fileThreads}
-                    pendingSelection={filePendingSelection}
-                    currentAuthor={DEFAULT_AUTHOR}
-                    isLineSelected={isLineSelected}
-                    onLineMouseDown={handleLineMouseDown}
-                    onLineMouseEnter={handleLineMouseEnter}
-                    onCommentClick={handleCommentClick}
-                    onAddThread={addThread}
-                    onReply={addReply}
-                    onResolve={resolveThread}
-                    onUnresolve={unresolveThread}
-                    onDeleteComment={deleteComment}
-                    onDeleteThread={deleteThread}
-                    onCancelPending={handleCancelPending}
-                    filePath={filePath}
-                    onRevertChange={canRevert ? (h: DiffHunk, startIndex: number, endIndex: number) => setConfirmRevertChange({ hunk: h, startIndex, endIndex }) : undefined}
-                    getOriginalCode={getOriginalCode}
-                  />
-                );
-              })}
-              {bottomGap && (() => {
-                const bottomExpansion = expansions.get('bottom');
-                const bottomLines = [
-                  ...(bottomExpansion?.linesFromTop ?? []),
-                  ...(bottomExpansion?.linesFromBottom ?? []),
-                ];
-                const bottomSyntaxMap = buildExpansionSyntaxMap(bottomLines, highlightLine);
-                const bottomCommentProps = {
-                  isLineSelected, onLineMouseDown: handleLineMouseDown, onLineMouseEnter: handleLineMouseEnter,
-                  onCommentClick: handleCommentClick, threads: fileThreads, pendingSelection: filePendingSelection,
-                  currentAuthor: DEFAULT_AUTHOR, onAddThread: addThread, onReply: addReply,
-                  onResolve: resolveThread, onUnresolve: unresolveThread, onDeleteComment: deleteComment,
-                  onDeleteThread: deleteThread, onCancelPending: handleCancelPending, filePath,
-                  getOriginalCode,
-                };
-                return (
-                  <tbody>
-                    {bottomExpansion?.linesFromTop && bottomExpansion.linesFromTop.length > 0 &&
-                      renderExpansionRows(bottomExpansion.linesFromTop, viewMode, 'bottom-top', bottomSyntaxMap, bottomCommentProps)}
-                    <ExpandRow
-                      position="bottom"
-                      remainingLines={bottomRemaining}
-                      loading={loadingGap === 'bottom'}
-                      onExpand={(dir) => handleExpand(bottomGap, dir)}
-                    />
-                    {bottomExpansion?.linesFromBottom && bottomExpansion.linesFromBottom.length > 0 &&
-                      renderExpansionRows(bottomExpansion.linesFromBottom, viewMode, 'bottom-bot', bottomSyntaxMap, bottomCommentProps)}
-                  </tbody>
-                );
-              })()}
-            </table>
-            </>
-          )}
-        </div>
-      )}
-      {confirmRevertChange && (
-        <ConfirmDialog
-          title="Undo change"
-          message="This will undo the selected change. This cannot be undone."
-          onConfirm={() => handleRevertChange(confirmRevertChange)}
-          onCancel={() => setConfirmRevertChange(null)}
-        />
-      )}
-    </div>
-  );
-}

package/packages/ui/src/components/file-tree-item.tsx

@@ -1,84 +0,0 @@
-import type { TreeNode } from '../lib/file-tree';
-import { cn } from '../lib/cn';
-import { DiffStats } from './diff-stats';
-import { StatusBadge } from './ui/status-badge';
-import { ChevronIcon } from './icons/chevron-icon';
-import { FolderIcon } from './icons/folder-icon';
-import { CommentIcon } from './icons/comment-icon';
-
-interface FileTreeItemProps {
-  node: TreeNode;
-  depth: number;
-  activeFile: string | null;
-  reviewedFiles: Set<string>;
-  filesWithComments: Set<string>;
-  expandedDirs: Set<string>;
-  onToggleDir: (path: string) => void;
-  onFileClick: (path: string) => void;
-}
-
-export function FileTreeItem(props: FileTreeItemProps) {
-  const { node, depth, activeFile, reviewedFiles, filesWithComments, expandedDirs, onToggleDir, onFileClick } = props;
-  const paddingLeft = depth * 12 + 8;
-
-  if (node.type === 'dir') {
-    const isExpanded = expandedDirs.has(node.path);
-    return (
-      <>
-        <button
-          className="flex items-center gap-1.5 w-full py-1 pr-2 text-left text-[13px] hover:bg-hover cursor-pointer"
-          style={{ paddingLeft: `${paddingLeft}px` }}
-          onClick={() => onToggleDir(node.path)}
-        >
-          <ChevronIcon expanded={isExpanded} />
-          <FolderIcon open={isExpanded} />
-          <span className="truncate font-medium text-text-secondary">{node.name}</span>
-        </button>
-        {isExpanded && node.children.map(child => (
-          <FileTreeItem
-            key={child.path}
-            node={child}
-            depth={depth + 1}
-            activeFile={activeFile}
-            reviewedFiles={reviewedFiles}
-            filesWithComments={filesWithComments}
-            expandedDirs={expandedDirs}
-            onToggleDir={onToggleDir}
-            onFileClick={onFileClick}
-          />
-        ))}
-      </>
-    );
-  }
-
-  const isActive = activeFile === node.path;
-  const isReviewed = reviewedFiles.has(node.path);
-  const hasComments = filesWithComments.has(node.path);
-
-  return (
-    <button
-      className={cn(
-        'flex items-center gap-1.5 w-full py-1 pr-2 text-left text-[13px] cursor-pointer border-l-2',
-        isActive
-          ? 'bg-active border-l-accent'
-          : 'border-l-transparent hover:bg-hover',
-        isReviewed && 'opacity-50'
-      )}
-      style={{ paddingLeft: `${paddingLeft + 15}px` }}
-      onClick={() => onFileClick(node.path)}
-    >
-      <StatusBadge status={node.file.status} compact />
-      <span className={cn('flex-1 min-w-0 truncate', isReviewed && 'line-through')}>
-        {node.name}
-      </span>
-      {hasComments && (
-        <CommentIcon className="w-3 h-3 text-accent shrink-0" />
-      )}
-      {isReviewed ? (
-        <span className="text-added text-[10px] shrink-0" title="Viewed">&#10003;</span>
-      ) : (
-        <DiffStats additions={node.file.additions} deletions={node.file.deletions} />
-      )}
-    </button>
-  );
-}

package/packages/ui/src/components/file-tree.tsx

@@ -1,72 +0,0 @@
-import { useMemo, useState, useCallback, useRef } from 'react';
-import type { DiffFile } from '@diffity/parser';
-import {
-  buildFileTree,
-  collapseSingleChildDirs,
-  sortTree,
-  filterTree,
-  collectAllDirPaths,
-} from '../lib/file-tree';
-import { FileTreeItem } from './file-tree-item';
-
-interface FileTreeProps {
-  files: DiffFile[];
-  search: string;
-  activeFile: string | null;
-  reviewedFiles: Set<string>;
-  filesWithComments: Set<string>;
-  onFileClick: (path: string) => void;
-}
-
-export function FileTree(props: FileTreeProps) {
-  const { files, search, activeFile, reviewedFiles, filesWithComments, onFileClick } = props;
-
-  const tree = useMemo(() => {
-    return sortTree(collapseSingleChildDirs(buildFileTree(files)));
-  }, [files]);
-
-  const prevTreeRef = useRef(tree);
-  const [expandedDirs, setExpandedDirs] = useState<Set<string>>(() => new Set(collectAllDirPaths(tree)));
-
-  if (prevTreeRef.current !== tree) {
-    prevTreeRef.current = tree;
-    setExpandedDirs(new Set(collectAllDirPaths(tree)));
-  }
-
-  const displayTree = useMemo(() => {
-    if (!search) {
-      return tree;
-    }
-    return filterTree(tree, search);
-  }, [tree, search]);
-
-  const handleToggleDir = useCallback((path: string) => {
-    setExpandedDirs(prev => {
-      const next = new Set(prev);
-      if (next.has(path)) {
-        next.delete(path);
-      } else {
-        next.add(path);
-      }
-      return next;
-    });
-  }, []);
-
-  return (
-    <div className="flex-1 overflow-y-auto py-1">
-      {displayTree.map(node => (
-        <FileTreeItem
-          key={node.path}
-          node={node}
-          depth={0}
-          activeFile={activeFile}
-          reviewedFiles={reviewedFiles}
-          filesWithComments={filesWithComments}
-          expandedDirs={expandedDirs}
-          onToggleDir={handleToggleDir}
-          onFileClick={onFileClick}
-        />
-      ))}
-    </div>
-  );
-}