diffity 0.1.0 → 0.1.2

package/packages/ui/src/components/dashboard.tsx

@@ -1,84 +0,0 @@
-import { useOverview } from '../hooks/use-overview';
-import { useCommits } from '../hooks/use-commits';
-import { useInfo } from '../hooks/use-info';
-import { OverviewFileList } from './overview-file-list';
-import { CommitList } from './commit-list';
-import { CheckCircleIcon } from './icons/check-circle-icon';
-import { PageLoader } from './skeleton';
-
-interface DashboardProps {
-  onNavigate: (ref: string) => void;
-}
-
-export function Dashboard(props: DashboardProps) {
-  const { onNavigate } = props;
-  const { data: overview, loading: overviewLoading, error } = useOverview();
-  const { data: commitsPage, loading: commitsLoading } = useCommits();
-  const { data: info, loading: infoLoading } = useInfo();
-
-  const anyLoading = overviewLoading || commitsLoading || infoLoading;
-
-  if (error) {
-    return (
-      <div className="flex flex-col min-h-screen bg-bg text-text font-sans">
-        <div className="flex flex-col items-center justify-center p-12 text-deleted text-center">
-          <h2 className="text-xl mb-2">Failed to load overview</h2>
-          <p className="text-text-secondary">{error}</p>
-        </div>
-      </div>
-    );
-  }
-
-  if (anyLoading || !overview) {
-    return <PageLoader />;
-  }
-
-  const isClean = overview.files.length === 0;
-
-  return (
-    <div className="flex flex-col min-h-screen bg-bg text-text font-sans">
-      <div className="border-b border-border bg-bg-secondary px-6 py-4">
-        <div className="max-w-4xl mx-auto flex items-center gap-3">
-          {info?.name && (
-            <span className="font-semibold text-lg text-accent">{info.name}</span>
-          )}
-          {info?.branch && (
-            <span className="px-2 py-0.5 bg-diff-hunk-bg text-diff-hunk-text rounded-md font-mono text-xs">
-              {info.branch}
-            </span>
-          )}
-        </div>
-      </div>
-
-      <div className="flex-1 overflow-y-auto">
-        <div className="max-w-4xl mx-auto px-6 py-6 space-y-6">
-          {isClean ? (
-            <div className="flex flex-col items-center justify-center py-16 text-text-muted text-center gap-3">
-              <div className="text-added opacity-50 mb-2">
-                <CheckCircleIcon />
-              </div>
-              <h2 className="text-xl text-text-secondary">Working tree is clean</h2>
-              <p>No changes to display.</p>
-            </div>
-          ) : (
-            <OverviewFileList
-              files={overview.files}
-              onViewAll={() => onNavigate('work')}
-            />
-          )}
-
-          <div className="border border-border rounded-lg bg-bg-secondary overflow-hidden">
-            <div className="px-4 py-3 border-b border-border">
-              <h3 className="font-medium text-text">Recent commits</h3>
-            </div>
-            <CommitList
-              initialCommits={commitsPage?.commits ?? []}
-              initialHasMore={commitsPage?.hasMore ?? false}
-              onCommitClick={(hash) => onNavigate(hash)}
-            />
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}

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

@@ -1,90 +0,0 @@
-import type { DiffLine as DiffLineType } from '@diffity/parser';
-import { cn } from '../lib/cn';
-import { getLineBg } from '../lib/diff-utils';
-import { renderContent } from '../lib/render-content';
-import type { SyntaxToken } from '../lib/syntax-token';
-import { CommentLineNumber } from './comment-line-number';
-import { UndoIcon } from './icons/undo-icon';
-import type { CommentSide } from '../types/comment';
-
-export type { SyntaxToken };
-
-interface DiffLineProps {
-  line: DiffLineType;
-  syntaxTokens?: SyntaxToken[];
-  expanded?: boolean;
-  isSelected?: boolean;
-  onLineMouseDown?: (line: number, side: CommentSide) => void;
-  onLineMouseEnter?: (line: number, side: CommentSide) => void;
-  onCommentClick?: (line: number, side: CommentSide) => void;
-  onUndo?: () => void;
-}
-
-function getPrefix(type: string): string {
-  switch (type) {
-    case 'add':
-      return '+';
-    case 'delete':
-      return '-';
-    default:
-      return ' ';
-  }
-}
-
-function getPrefixColor(type: string): string {
-  switch (type) {
-    case 'add':
-      return 'text-added';
-    case 'delete':
-      return 'text-deleted';
-    default:
-      return 'text-text-muted';
-  }
-}
-
-export function DiffLine(props: DiffLineProps) {
-  const { line, syntaxTokens, expanded, isSelected, onLineMouseDown, onLineMouseEnter, onCommentClick, onUndo } = props;
-
-  const side: CommentSide = line.type === 'delete' ? 'old' : 'new';
-  const activeLine = side === 'old' ? line.oldLineNumber : line.newLineNumber;
-  const gutterBg = expanded ? 'bg-diff-expanded-gutter' : '';
-
-  return (
-    <tr className={cn('group/row font-mono text-sm leading-6 hover:brightness-[0.97]', expanded ? 'bg-diff-expanded-bg' : getLineBg(line.type))}>
-      <CommentLineNumber
-        lineNumber={line.oldLineNumber}
-        className={cn('border-r border-border-muted', gutterBg)}
-        showCommentButton={!!onCommentClick && line.type === 'delete' && line.oldLineNumber !== null}
-        isSelected={isSelected && side === 'old'}
-        onMouseDown={line.oldLineNumber !== null ? () => onLineMouseDown?.(line.oldLineNumber!, line.type === 'delete' ? 'old' : 'new') : undefined}
-        onMouseEnter={line.oldLineNumber !== null ? () => onLineMouseEnter?.(line.oldLineNumber!, line.type === 'delete' ? 'old' : 'new') : undefined}
-        onCommentClick={line.oldLineNumber !== null && line.type === 'delete' ? () => onCommentClick?.(line.oldLineNumber!, 'old') : undefined}
-      />
-      <CommentLineNumber
-        lineNumber={line.newLineNumber}
-        className={cn('border-r border-border-muted', gutterBg)}
-        showCommentButton={!!onCommentClick && line.type !== 'delete' && line.newLineNumber !== null}
-        isSelected={isSelected && side === 'new'}
-        onMouseDown={line.newLineNumber !== null ? () => onLineMouseDown?.(line.newLineNumber!, line.type === 'delete' ? 'old' : 'new') : undefined}
-        onMouseEnter={line.newLineNumber !== null ? () => onLineMouseEnter?.(line.newLineNumber!, line.type === 'delete' ? 'old' : 'new') : undefined}
-        onCommentClick={line.newLineNumber !== null && line.type !== 'delete' ? () => onCommentClick?.(line.newLineNumber!, 'new') : undefined}
-      />
-      <td className={cn('w-5 min-w-5 px-1 text-center select-none align-top', getPrefixColor(line.type), isSelected && 'bg-diff-comment-bg')}>
-        {getPrefix(line.type)}
-      </td>
-      <td className={cn('px-3 whitespace-pre-wrap break-all relative', isSelected && 'bg-diff-comment-bg')}>
-        <span className="inline">{renderContent(line, syntaxTokens)}</span>
-        {onUndo && (
-          <button
-            onClick={onUndo}
-            className="absolute right-2 top-1/2 -translate-y-1/2 flex items-center gap-1 px-2 py-0.5 text-xs rounded bg-deleted/15 text-deleted hover:bg-deleted/25 transition-colors cursor-pointer opacity-0 group-hover/row:opacity-100"
-            title="Undo this change"
-          >
-            <UndoIcon className="w-3 h-3" />
-            Undo
-          </button>
-        )}
-      </td>
-    </tr>
-  );
-}

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

@@ -1,332 +0,0 @@
-import { useState, useCallback, useRef, useEffect, useMemo } from 'react';
-import { useQueryClient } from '@tanstack/react-query';
-import { useDiff } from '../hooks/use-diff';
-import { useInfo } from '../hooks/use-info';
-import { useTheme } from '../hooks/use-theme';
-import { useKeyboard } from '../hooks/use-keyboard';
-import { useReviewThreads } from '../hooks/use-review-threads';
-import { useCommentActions } from '../hooks/use-comment-actions';
-import { SummaryBar } from './summary-bar';
-import { Toolbar } from './toolbar';
-import { DiffView, type DiffViewHandle } from './diff-view';
-import { Sidebar } from './sidebar';
-import { ShortcutModal } from './shortcut-modal';
-import { StaleDiffBanner } from './stale-diff-banner';
-import { CheckCircleIcon } from './icons/check-circle-icon';
-import { PageLoader } from './skeleton';
-import { useDiffStaleness } from '../hooks/use-diff-staleness';
-import { type ViewMode, getFilePath, getAutoCollapsedPaths, isWorkingTreeRef } from '../lib/diff-utils';
-import { getHunkHeaders, scrollToElement } from '../lib/dom-utils';
-import type { LineSelection } from '../types/comment';
-import { isThreadResolved } from '../types/comment';
-
-interface DiffPageProps {
-  refParam?: string;
-  initialTheme?: 'light' | 'dark' | null;
-  initialViewMode?: 'split' | 'unified' | null;
-}
-
-export function DiffPage(props: DiffPageProps) {
-  const { refParam, initialTheme, initialViewMode } = props;
-
-  const [viewMode, setViewMode] = useState<ViewMode>(initialViewMode || 'split');
-  const [hideWhitespace, setHideWhitespace] = useState(false);
-  const [showHelp, setShowHelp] = useState(false);
-  const { theme, toggleTheme } = useTheme(initialTheme);
-  const { data: diff, loading: diffLoading, error } = useDiff(hideWhitespace, refParam);
-  const { data: info, loading: infoLoading } = useInfo(refParam);
-  const [activeFile, setActiveFile] = useState<string | null>(null);
-  const [reviewedFiles, setReviewedFiles] = useState<Set<string>>(new Set());
-  const [collapsedFiles, setCollapsedFiles] = useState<Set<string>>(new Set());
-  const [pendingSelection, setPendingSelection] = useState<LineSelection | null>(null);
-  const mainRef = useRef<HTMLElement | null>(null);
-  const diffViewRef = useRef<DiffViewHandle>(null);
-  const currentFileIdx = useRef(0);
-  const initializedDiffRef = useRef<typeof diff>(null);
-
-  const reviewsEnabled = !!info?.capabilities?.reviews;
-  const sessionId = info?.sessionId ?? null;
-  const isWorkingTree = isWorkingTreeRef(refParam);
-  const { isStale, resetStaleness } = useDiffStaleness(refParam, isWorkingTree);
-
-  const { data: serverThreads, isFetched: threadsFetched } = useReviewThreads(reviewsEnabled ? sessionId : null);
-  const threads = reviewsEnabled && serverThreads ? serverThreads : [];
-  const commentActions = useCommentActions(sessionId, reviewsEnabled);
-
-  const filesWithComments = useMemo(() => {
-    const paths = new Set<string>();
-    for (const thread of threads) {
-      if (!isThreadResolved(thread)) {
-        paths.add(thread.filePath);
-      }
-    }
-    return paths;
-  }, [threads]);
-
-  const handleAddThread = useCallback((...args: Parameters<typeof commentActions.addThread>) => {
-    commentActions.addThread(...args);
-    setPendingSelection(null);
-  }, [commentActions]);
-
-  useEffect(() => {
-    if (!diff || diff === initializedDiffRef.current) {
-      return;
-    }
-    initializedDiffRef.current = diff;
-
-    const autoCollapsed = getAutoCollapsedPaths(diff.files);
-    if (autoCollapsed.size > 0) {
-      setCollapsedFiles(autoCollapsed);
-    }
-  }, [diff]);
-
-  const handleToggleCollapse = useCallback((path: string) => {
-    setCollapsedFiles((prev) => {
-      const next = new Set(prev);
-      if (next.has(path)) {
-        next.delete(path);
-      } else {
-        next.add(path);
-      }
-      return next;
-    });
-  }, []);
-
-  const handleReviewedChange = useCallback((path: string, reviewed: boolean) => {
-    setReviewedFiles((prev) => {
-      const next = new Set(prev);
-      if (reviewed) {
-        next.add(path);
-      } else {
-        next.delete(path);
-      }
-      return next;
-    });
-    if (reviewed) {
-      setCollapsedFiles((prev) => {
-        const next = new Set(prev);
-        next.add(path);
-        return next;
-      });
-    } else {
-      setCollapsedFiles((prev) => {
-        const next = new Set(prev);
-        next.delete(path);
-        return next;
-      });
-    }
-  }, []);
-
-  const getCurrentFilePath = useCallback((): string | null => {
-    if (!diff) {
-      return null;
-    }
-    return getFilePath(diff.files[currentFileIdx.current]);
-  }, [diff]);
-
-  const navigateFile = useCallback((direction: number) => {
-    if (!diff) {
-      return;
-    }
-    const nextIdx = Math.max(0, Math.min(diff.files.length - 1, currentFileIdx.current + direction));
-    currentFileIdx.current = nextIdx;
-    const path = getFilePath(diff.files[nextIdx]);
-    diffViewRef.current?.scrollToFile(path);
-  }, [diff]);
-
-  const navigateHunk = useCallback((direction: number) => {
-    const hunks = getHunkHeaders();
-    if (hunks.length === 0) {
-      return;
-    }
-    let target = direction > 0 ? hunks[0] : hunks[hunks.length - 1];
-
-    for (let i = 0; i < hunks.length; i++) {
-      const rect = hunks[i].getBoundingClientRect();
-      if (direction > 0 && rect.top > 100) {
-        target = hunks[i];
-        break;
-      }
-      if (direction < 0 && rect.top < -10) {
-        target = hunks[i];
-      }
-    }
-
-    scrollToElement(target);
-  }, []);
-
-  useKeyboard({
-    onNextFile: () => navigateFile(1),
-    onPrevFile: () => navigateFile(-1),
-    onNextHunk: () => navigateHunk(1),
-    onPrevHunk: () => navigateHunk(-1),
-    onToggleCollapse: () => {
-      const path = getCurrentFilePath();
-      if (path) {
-        handleToggleCollapse(path);
-      }
-    },
-    onCollapseAll: () => {
-      if (!diff) {
-        return;
-      }
-      const allPaths = diff.files.map((f) => getFilePath(f));
-      const anyExpanded = allPaths.some((p) => !collapsedFiles.has(p));
-      if (anyExpanded) {
-        setCollapsedFiles(new Set(allPaths));
-      } else {
-        setCollapsedFiles(new Set());
-      }
-    },
-    onToggleReviewed: () => {
-      const path = getCurrentFilePath();
-      if (!path) {
-        return;
-      }
-      const wasReviewed = reviewedFiles.has(path);
-      handleReviewedChange(path, !wasReviewed);
-      if (!wasReviewed) {
-        navigateFile(1);
-      }
-    },
-    onUnifiedView: () => setViewMode('unified'),
-    onSplitView: () => setViewMode('split'),
-    onShowHelp: () => setShowHelp(true),
-    onFocusSearch: () => {
-      const input = document.querySelector(
-        'input[placeholder="Filter files..."]',
-      ) as HTMLInputElement;
-      if (input) {
-        input.focus();
-      }
-    },
-    onEscape: () => setShowHelp(false),
-  });
-
-  const queryClient = useQueryClient();
-  const canRevert = useMemo(() => isWorkingTreeRef(refParam), [refParam]);
-
-  const handleRevert = useCallback(() => {
-    queryClient.invalidateQueries({ queryKey: ['diff'] });
-  }, [queryClient]);
-
-  const handleRefreshDiff = useCallback(() => {
-    queryClient.invalidateQueries({ queryKey: ['diff'] });
-    resetStaleness();
-  }, [queryClient, resetStaleness]);
-
-  const handleSidebarFileClick = useCallback((path: string) => {
-    setActiveFile(path);
-    diffViewRef.current?.scrollToFile(path);
-  }, []);
-
-  const handleScrollToThread = useCallback((threadId: string, filePath: string) => {
-    diffViewRef.current?.scrollToThread(threadId, filePath);
-  }, []);
-
-  const handleActiveFileFromScroll = useCallback((path: string) => {
-    setActiveFile(path);
-  }, []);
-
-  if (error) {
-    return (
-      <div className="flex flex-col min-h-screen bg-bg text-text font-sans">
-        <div className="flex flex-col items-center justify-center p-12 text-deleted text-center">
-          <h2 className="text-xl mb-2">Failed to load diff</h2>
-          <p className="text-text-secondary">{error}</p>
-        </div>
-      </div>
-    );
-  }
-
-  const threadsLoading = reviewsEnabled && !threadsFetched;
-  if ((diffLoading || infoLoading || threadsLoading) && !diff) {
-    return <PageLoader />;
-  }
-
-  if (!info || threadsLoading) {
-    return <PageLoader />;
-  }
-
-  if (diff && diff.files.length === 0 && !diffLoading) {
-    return (
-      <div className="flex flex-col items-center justify-center min-h-screen bg-bg text-text font-sans gap-2">
-        <div className="text-added opacity-40 mb-1">
-          <CheckCircleIcon />
-        </div>
-        <h2 className="text-base font-medium text-text-secondary">No changes found</h2>
-        <p className="text-xs text-text-muted">There are no differences to display.</p>
-        <div className="mt-4 flex flex-col gap-1.5 items-center">
-          <p className="text-xs text-text-muted mb-1">Try one of these</p>
-          <code className="inline-block px-3 py-1 bg-bg-secondary border border-border rounded-md font-mono text-xs text-text">
-            diffity HEAD~1
-          </code>
-          <code className="inline-block px-3 py-1 bg-bg-secondary border border-border rounded-md font-mono text-xs text-text">
-            diffity main..feature
-          </code>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="flex flex-col h-screen bg-bg text-text font-sans">
-      <SummaryBar
-        diff={diff}
-        repoName={info?.name || null}
-        branch={info?.branch || null}
-        description={info?.description || null}
-      />
-      <Toolbar
-        viewMode={viewMode}
-        onViewModeChange={setViewMode}
-        hideWhitespace={hideWhitespace}
-        onHideWhitespaceChange={setHideWhitespace}
-        theme={theme}
-        onToggleTheme={toggleTheme}
-        onShowHelp={() => setShowHelp(true)}
-        diff={diff || undefined}
-        diffRef={refParam}
-        threads={threads}
-        onDeleteAllComments={commentActions.deleteAllThreads}
-        onScrollToThread={handleScrollToThread}
-      />
-      {isStale && <StaleDiffBanner onRefresh={handleRefreshDiff} />}
-      <div className="flex flex-1 overflow-hidden">
-        <Sidebar
-          files={diff?.files || []}
-          activeFile={activeFile}
-          reviewedFiles={reviewedFiles}
-          filesWithComments={filesWithComments}
-          onFileClick={handleSidebarFileClick}
-        />
-        {diff ? (
-          <DiffView
-            diff={diff}
-            viewMode={viewMode}
-            theme={theme}
-            collapsedFiles={collapsedFiles}
-            onToggleCollapse={handleToggleCollapse}
-            reviewedFiles={reviewedFiles}
-            onReviewedChange={handleReviewedChange}
-            onActiveFileChange={handleActiveFileFromScroll}
-            handle={diffViewRef}
-            baseRef={refParam}
-            canRevert={canRevert}
-            onRevert={handleRevert}
-            scrollRef={(node) => {
-              mainRef.current = node;
-            }}
-            threads={threads}
-            commentsEnabled={reviewsEnabled}
-            commentActions={commentActions}
-            onAddThread={handleAddThread}
-            pendingSelection={pendingSelection}
-            onPendingSelectionChange={setPendingSelection}
-          />
-        ) : null}
-      </div>
-      {showHelp && <ShortcutModal onClose={() => setShowHelp(false)} />}
-    </div>
-  );
-}

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

@@ -1,20 +0,0 @@
-interface DiffStatsProps {
-  additions: number;
-  deletions: number;
-  className?: string;
-}
-
-export function DiffStats(props: DiffStatsProps) {
-  const { additions, deletions, className = '' } = props;
-
-  return (
-    <span className={`flex gap-1 shrink-0 font-mono text-xs ${className}`}>
-      {additions > 0 && (
-        <span className="text-added font-semibold">+{additions}</span>
-      )}
-      {deletions > 0 && (
-        <span className="text-deleted font-semibold">-{deletions}</span>
-      )}
-    </span>
-  );
-}