diffity 0.1.0 → 0.1.2

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

@@ -1,246 +0,0 @@
-import { useState } from 'react';
-import type { ParsedDiff } from '@diffity/parser';
-import { cn } from '../lib/cn';
-import { useCopy } from '../hooks/use-copy';
-import { useThreadNavigation } from '../hooks/use-thread-navigation';
-import { getFilePath } from '../lib/diff-utils';
-import { CopyIcon } from './icons/copy-icon';
-import { CheckIcon } from './icons/check-icon';
-import { ChevronUpIcon } from './icons/chevron-up-icon';
-import { ChevronDownIcon } from './icons/chevron-down-icon';
-import { TrashIcon } from './icons/trash-icon';
-import { UnifiedViewIcon } from './icons/unified-view-icon';
-import { SplitViewIcon } from './icons/split-view-icon';
-import { SunIcon } from './icons/sun-icon';
-import { MoonIcon } from './icons/moon-icon';
-import { EyeIcon } from './icons/eye-icon';
-import { EyeOffIcon } from './icons/eye-off-icon';
-import { KeyboardIcon } from './icons/keyboard-icon';
-import { ConfirmDialog } from './ui/confirm-dialog';
-import { GENERAL_THREAD_FILE_PATH } from '../types/comment';
-import type { ViewMode } from '../lib/diff-utils';
-import type { CommentThread } from '../types/comment';
-import { isThreadResolved } from '../types/comment';
-
-interface ToolbarProps {
-  viewMode: ViewMode;
-  onViewModeChange: (mode: ViewMode) => void;
-  hideWhitespace: boolean;
-  onHideWhitespaceChange: (hide: boolean) => void;
-  theme: 'light' | 'dark';
-  onToggleTheme: () => void;
-  onShowHelp: () => void;
-  diff?: ParsedDiff;
-  diffRef?: string;
-  threads: CommentThread[];
-  onDeleteAllComments: () => void;
-  onScrollToThread: (threadId: string, filePath: string) => void;
-}
-
-function extractCodeContext(diff: ParsedDiff | undefined, filePath: string, side: 'old' | 'new', startLine: number, endLine: number): string[] {
-  if (!diff) {
-    return [];
-  }
-
-  const file = diff.files.find(f => getFilePath(f) === filePath);
-  if (!file) {
-    return [];
-  }
-
-  const lines: string[] = [];
-  for (const hunk of file.hunks) {
-    for (const line of hunk.lines) {
-      const lineNum = side === 'old' ? line.oldLineNumber : line.newLineNumber;
-      if (lineNum !== null && lineNum >= startLine && lineNum <= endLine) {
-        const prefix = line.type === 'add' ? '+' : line.type === 'delete' ? '-' : ' ';
-        lines.push(`${prefix} ${line.content}`);
-      }
-    }
-  }
-
-  return lines;
-}
-
-function formatThreadsForCopy(threads: CommentThread[], diff?: ParsedDiff, diffRef?: string): string {
-  const unresolvedThreads = threads.filter(t => !isThreadResolved(t));
-  if (unresolvedThreads.length === 0) {
-    return '';
-  }
-
-  const parts: string[] = [];
-
-  if (diffRef) {
-    parts.push(`Diff ref: ${diffRef}`);
-    parts.push('');
-  }
-
-  for (const thread of unresolvedThreads) {
-    if (thread.filePath === GENERAL_THREAD_FILE_PATH) {
-      parts.push('## General comment');
-    } else {
-      const lineRange = thread.startLine === thread.endLine
-        ? `${thread.startLine}`
-        : `${thread.startLine}-${thread.endLine}`;
-      const sideDesc = thread.side === 'old' ? 'before change' : 'after change';
-      parts.push(`## ${thread.filePath}:${lineRange} (${sideDesc})`);
-    }
-
-    const codeLines = extractCodeContext(diff, thread.filePath, thread.side, thread.startLine, thread.endLine);
-    if (codeLines.length > 0) {
-      parts.push('```diff');
-      parts.push(...codeLines);
-      parts.push('```');
-    }
-
-    const uniqueAuthors = new Set(thread.comments.map(c => c.author.name));
-    const singleAuthor = uniqueAuthors.size === 1;
-
-    for (const comment of thread.comments) {
-      if (singleAuthor) {
-        parts.push(comment.body);
-      } else {
-        const authorName = comment.author.name === 'You' ? 'User' : comment.author.name;
-        parts.push(`**${authorName}:** ${comment.body}`);
-      }
-    }
-    parts.push('');
-  }
-
-  return parts.join('\n');
-}
-
-export function Toolbar(props: ToolbarProps) {
-  const {
-    viewMode,
-    onViewModeChange,
-    hideWhitespace,
-    onHideWhitespaceChange,
-    theme,
-    onToggleTheme,
-    onShowHelp,
-    diff,
-    diffRef,
-    threads,
-    onDeleteAllComments,
-    onScrollToThread,
-  } = props;
-  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
-  const { copied, copy } = useCopy();
-  const { currentIndex, count: unresolvedCount, goToPrevious, goToNext } = useThreadNavigation(threads, onScrollToThread);
-
-  const baseBtn = 'px-2.5 py-1 text-xs text-text-secondary transition-colors duration-150 cursor-pointer border';
-  const activeBtn = 'bg-accent text-white border-accent';
-  const inactiveBtn = 'bg-bg hover:bg-hover hover:text-text border-border';
-
-  const iconBtn = 'p-1.5 rounded-md text-text-muted hover:text-text hover:bg-hover transition-colors cursor-pointer';
-
-  return (
-    <div className="flex items-center gap-3 px-4 py-1.5 bg-bg-secondary border-b border-border font-sans text-xs">
-      <div className="flex items-center">
-        <button
-          className={cn(baseBtn, 'flex items-center gap-1.5 rounded-l-md', viewMode === 'unified' ? `${activeBtn} z-10` : inactiveBtn)}
-          onClick={() => onViewModeChange('unified')}
-          title="Unified view (u)"
-        >
-          <UnifiedViewIcon className="w-3.5 h-3.5" />
-          Unified
-        </button>
-        <button
-          className={cn(baseBtn, 'flex items-center gap-1.5 rounded-r-md -ml-px', viewMode === 'split' ? `${activeBtn} z-10` : inactiveBtn)}
-          onClick={() => onViewModeChange('split')}
-          title="Split view (s)"
-        >
-          <SplitViewIcon className="w-3.5 h-3.5" />
-          Split
-        </button>
-      </div>
-      <button
-        className={cn(iconBtn, 'flex items-center gap-1.5 text-xs', hideWhitespace && 'text-accent')}
-        onClick={() => onHideWhitespaceChange(!hideWhitespace)}
-        title={hideWhitespace ? 'Show whitespace' : 'Hide whitespace'}
-      >
-        {hideWhitespace ? <EyeOffIcon className="w-3.5 h-3.5" /> : <EyeIcon className="w-3.5 h-3.5" />}
-        <span className="text-text-secondary">Whitespace</span>
-      </button>
-      <div className="flex items-center gap-0.5">
-        <button
-          className={iconBtn}
-          onClick={onToggleTheme}
-          title={theme === 'light' ? 'Switch to dark mode' : 'Switch to light mode'}
-        >
-          {theme === 'light' ? <MoonIcon className="w-3.5 h-3.5" /> : <SunIcon className="w-3.5 h-3.5" />}
-        </button>
-        <button
-          className={iconBtn}
-          onClick={onShowHelp}
-          title="Keyboard shortcuts (?)"
-        >
-          <KeyboardIcon className="w-3.5 h-3.5" />
-        </button>
-      </div>
-      {unresolvedCount > 0 && (
-        <div className="flex items-center gap-2 ml-auto">
-          <div className="flex items-stretch border border-border rounded-md overflow-hidden bg-bg">
-            <span className="flex items-center text-xs text-text-muted px-2 py-1">
-              {currentIndex >= 0
-                ? `${currentIndex + 1} of ${unresolvedCount} ${unresolvedCount === 1 ? 'comment' : 'comments'}`
-                : `${unresolvedCount} ${unresolvedCount === 1 ? 'comment' : 'comments'}`}
-            </span>
-            <button
-              onClick={goToPrevious}
-              className="flex items-center px-1.5 border-l border-border text-text-muted hover:bg-hover hover:text-text transition-colors cursor-pointer"
-              title="Previous comment"
-            >
-              <ChevronUpIcon className="w-3.5 h-3.5" />
-            </button>
-            <button
-              onClick={goToNext}
-              className="flex items-center px-1.5 border-l border-border text-text-muted hover:bg-hover hover:text-text transition-colors cursor-pointer"
-              title="Next comment"
-            >
-              <ChevronDownIcon className="w-3.5 h-3.5" />
-            </button>
-          </div>
-          <div className="flex items-stretch border border-border rounded-md overflow-hidden">
-            <button
-              onClick={() => copy(formatThreadsForCopy(threads, diff, diffRef))}
-              className="flex items-center gap-1.5 px-2.5 py-1 text-xs bg-bg text-text-secondary hover:bg-hover hover:text-text transition-colors cursor-pointer"
-              title="Copy unresolved comments to clipboard"
-            >
-              {copied ? (
-                <>
-                  <CheckIcon className="w-3 h-3 text-added" />
-                  Copied
-                </>
-              ) : (
-                <>
-                  <CopyIcon className="w-3 h-3" />
-                  Copy Comments
-                </>
-              )}
-            </button>
-            <button
-              onClick={() => setShowDeleteConfirm(true)}
-              className="flex items-center px-2 border-l border-border bg-bg text-text-muted hover:bg-hover hover:text-red-500 transition-colors cursor-pointer"
-              title="Delete all comments"
-            >
-              <TrashIcon className="w-3.5 h-3.5" />
-            </button>
-          </div>
-        </div>
-      )}
-      {showDeleteConfirm && (
-        <ConfirmDialog
-          title="Delete all comments"
-          message="Are you sure you want to delete all comments? This action cannot be undone."
-          confirmLabel="Delete all"
-          onConfirm={() => {
-            onDeleteAllComments();
-            setShowDeleteConfirm(false);
-          }}
-          onCancel={() => setShowDeleteConfirm(false)}
-        />
-      )}
-    </div>
-  );
-}

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

@@ -1,17 +0,0 @@
-import type { ReactNode } from 'react';
-import { cn } from '../../lib/cn';
-
-interface BadgeProps {
-  children: ReactNode;
-  className?: string;
-}
-
-export function Badge(props: BadgeProps) {
-  const { children, className } = props;
-
-  return (
-    <span className={cn('text-xs px-1.5 py-px rounded font-semibold shrink-0', className)}>
-      {children}
-    </span>
-  );
-}

package/packages/ui/src/components/ui/confirm-dialog.tsx

@@ -1,52 +0,0 @@
-import { useEffect, useRef } from 'react';
-
-interface ConfirmDialogProps {
-  title: string;
-  message: string;
-  confirmLabel?: string;
-  onConfirm: () => void;
-  onCancel: () => void;
-}
-
-export function ConfirmDialog(props: ConfirmDialogProps) {
-  const { title, message, confirmLabel = 'Undo', onConfirm, onCancel } = props;
-  const cancelRef = useRef<HTMLButtonElement>(null);
-
-  useEffect(() => {
-    cancelRef.current?.focus();
-    const handleKey = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') {
-        onCancel();
-      }
-    };
-    window.addEventListener('keydown', handleKey);
-    return () => window.removeEventListener('keydown', handleKey);
-  }, [onCancel]);
-
-  return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40" onClick={onCancel}>
-      <div
-        className="bg-bg border border-border rounded-xl shadow-lg p-5 max-w-sm w-full mx-4"
-        onClick={(e) => e.stopPropagation()}
-      >
-        <h3 className="text-sm font-semibold text-text mb-1.5">{title}</h3>
-        <p className="text-xs text-text-muted mb-4 leading-relaxed">{message}</p>
-        <div className="flex justify-end gap-2">
-          <button
-            ref={cancelRef}
-            onClick={onCancel}
-            className="px-3 py-1.5 text-xs rounded-md border border-border text-text hover:bg-hover cursor-pointer"
-          >
-            Cancel
-          </button>
-          <button
-            onClick={onConfirm}
-            className="px-3 py-1.5 text-xs rounded-md bg-deleted text-white hover:opacity-90 cursor-pointer"
-          >
-            {confirmLabel}
-          </button>
-        </div>
-      </div>
-    </div>
-  );
-}

package/packages/ui/src/components/ui/icon-button.tsx

@@ -1,23 +0,0 @@
-import type { ReactNode, ButtonHTMLAttributes } from 'react';
-import { cn } from '../../lib/cn';
-
-interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-  children: ReactNode;
-  className?: string;
-}
-
-export function IconButton(props: IconButtonProps) {
-  const { children, className, ...rest } = props;
-
-  return (
-    <button
-      className={cn(
-        'flex items-center justify-center rounded text-text-muted hover:bg-hover hover:text-text cursor-pointer',
-        className
-      )}
-      {...rest}
-    >
-      {children}
-    </button>
-  );
-}

package/packages/ui/src/components/ui/status-badge.tsx

@@ -1,57 +0,0 @@
-import { cn } from '../../lib/cn';
-import { getStatusColor } from '../../lib/diff-utils';
-import { Badge } from './badge';
-
-interface StatusBadgeProps {
-  status: string;
-  compact?: boolean;
-}
-
-function getCompactLabel(status: string): string {
-  switch (status) {
-    case 'added':
-      return 'A';
-    case 'deleted':
-      return 'D';
-    case 'renamed':
-      return 'R';
-    case 'copied':
-      return 'C';
-    default:
-      return 'M';
-  }
-}
-
-function getFullLabel(status: string): string {
-  switch (status) {
-    case 'added':
-      return 'Added';
-    case 'deleted':
-      return 'Deleted';
-    case 'renamed':
-      return 'Renamed';
-    case 'copied':
-      return 'Copied';
-    default:
-      return '';
-  }
-}
-
-export function StatusBadge(props: StatusBadgeProps) {
-  const { status, compact } = props;
-
-  if (compact) {
-    return (
-      <span className={cn('shrink-0 w-[18px] h-[18px] inline-flex items-center justify-center rounded text-[11px] font-bold font-mono', getStatusColor(status))}>
-        {getCompactLabel(status)}
-      </span>
-    );
-  }
-
-  const label = getFullLabel(status);
-  if (!label) {
-    return null;
-  }
-
-  return <Badge className={getStatusColor(status)}>{label}</Badge>;
-}

package/packages/ui/src/components/ui/thread-badge.tsx

@@ -1,35 +0,0 @@
-import { cn } from '../../lib/cn';
-
-type ThreadBadgeVariant = 'resolved' | 'dismissed' | 'outdated';
-
-interface ThreadBadgeProps {
-  variant: ThreadBadgeVariant;
-  children?: React.ReactNode;
-  size?: 'sm' | 'default';
-}
-
-const variantStyles: Record<ThreadBadgeVariant, string> = {
-  resolved: 'bg-added/20 text-added',
-  dismissed: 'bg-text-muted/20 text-text-muted line-through',
-  outdated: 'bg-orange-100 text-orange-800 dark:bg-orange-900/50 dark:text-orange-200',
-};
-
-const defaultLabels: Record<ThreadBadgeVariant, string> = {
-  resolved: 'Resolved',
-  dismissed: 'Dismissed',
-  outdated: 'Outdated',
-};
-
-export function ThreadBadge(props: ThreadBadgeProps) {
-  const { variant, children, size = 'default' } = props;
-
-  return (
-    <span className={cn(
-      'rounded-full font-medium',
-      size === 'sm' ? 'px-1 py-0.5 text-[9px]' : 'px-1.5 py-0.5 text-[10px]',
-      variantStyles[variant],
-    )}>
-      {children ?? defaultLabels[variant]}
-    </span>
-  );
-}

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

@@ -1,126 +0,0 @@
-import type { DiffLine } from '@diffity/parser';
-import type { SyntaxToken } from '../lib/syntax-token';
-
-interface WordDiffProps {
-  line: DiffLine;
-  syntaxTokens?: SyntaxToken[];
-}
-
-function applySyntaxToText(text: string, offset: number, syntaxTokens: SyntaxToken[]): React.ReactNode[] {
-  const nodes: React.ReactNode[] = [];
-  let textPos = 0;
-  let tokenIdx = 0;
-  let tokenCharPos = 0;
-
-  for (let i = 0; i < syntaxTokens.length; i++) {
-    tokenCharPos += syntaxTokens[i].text.length;
-    if (tokenCharPos > offset) {
-      tokenIdx = i;
-      tokenCharPos = tokenCharPos - syntaxTokens[i].text.length;
-      break;
-    }
-  }
-
-  while (textPos < text.length && tokenIdx < syntaxTokens.length) {
-    const token = syntaxTokens[tokenIdx];
-    const tokenStart = tokenCharPos;
-    const tokenEnd = tokenStart + token.text.length;
-    const overlapStart = Math.max(offset + textPos, tokenStart);
-    const overlapEnd = Math.min(offset + text.length, tokenEnd);
-
-    if (overlapStart >= overlapEnd) {
-      tokenIdx++;
-      tokenCharPos = tokenEnd;
-      continue;
-    }
-
-    const sliceStart = overlapStart - offset;
-    const sliceEnd = overlapEnd - offset;
-    const slice = text.slice(sliceStart, sliceEnd);
-
-    if (sliceStart > textPos) {
-      nodes.push(<span key={`gap-${textPos}`}>{text.slice(textPos, sliceStart)}</span>);
-    }
-
-    nodes.push(
-      <span key={`${tokenIdx}-${sliceStart}`} style={token.color ? { color: token.color } : undefined}>
-        {slice}
-      </span>
-    );
-
-    textPos = sliceEnd;
-
-    if (overlapEnd >= tokenEnd) {
-      tokenIdx++;
-      tokenCharPos = tokenEnd;
-    } else {
-      break;
-    }
-  }
-
-  if (textPos < text.length) {
-    nodes.push(<span key={`rest-${textPos}`}>{text.slice(textPos)}</span>);
-  }
-
-  return nodes;
-}
-
-export function WordDiff(props: WordDiffProps) {
-  const { line, syntaxTokens } = props;
-
-  if (!line.wordDiff || line.wordDiff.length === 0) {
-    return <span>{line.content || '\n'}</span>;
-  }
-
-  let charOffset = 0;
-
-  return (
-    <>
-      {line.wordDiff.map((seg, i) => {
-        const segOffset = charOffset;
-
-        if (seg.type === 'equal') {
-          charOffset += seg.text.length;
-          if (syntaxTokens && syntaxTokens.length > 0) {
-            return <span key={i}>{applySyntaxToText(seg.text, segOffset, syntaxTokens)}</span>;
-          }
-          return <span key={i}>{seg.text}</span>;
-        }
-
-        if (seg.type === 'delete' && line.type === 'delete') {
-          charOffset += seg.text.length;
-          if (syntaxTokens && syntaxTokens.length > 0) {
-            return (
-              <span key={i} className="bg-diff-del-word rounded-sm">
-                {applySyntaxToText(seg.text, segOffset, syntaxTokens)}
-              </span>
-            );
-          }
-          return (
-            <span key={i} className="bg-diff-del-word rounded-sm">
-              {seg.text}
-            </span>
-          );
-        }
-
-        if (seg.type === 'insert' && line.type === 'add') {
-          charOffset += seg.text.length;
-          if (syntaxTokens && syntaxTokens.length > 0) {
-            return (
-              <span key={i} className="bg-diff-add-word rounded-sm">
-                {applySyntaxToText(seg.text, segOffset, syntaxTokens)}
-              </span>
-            );
-          }
-          return (
-            <span key={i} className="bg-diff-add-word rounded-sm">
-              {seg.text}
-            </span>
-          );
-        }
-
-        return null;
-      })}
-    </>
-  );
-}

package/packages/ui/src/hooks/use-comment-actions.ts

@@ -1,97 +0,0 @@
-import { useCallback } from 'react';
-import { useQueryClient } from '@tanstack/react-query';
-import type { CommentAuthor, CommentSide } from '../types/comment';
-import * as api from '../lib/api';
-
-export function useCommentActions(sessionId: string | null, enabled: boolean) {
-  const queryClient = useQueryClient();
-
-  const invalidateThreads = useCallback(() => {
-    queryClient.invalidateQueries({ queryKey: ['threads', sessionId] });
-  }, [queryClient, sessionId]);
-
-  const addThread = useCallback((filePath: string, side: CommentSide, startLine: number, endLine: number, body: string, author: CommentAuthor, anchorContent?: string) => {
-    if (!enabled || !sessionId) {
-      return;
-    }
-    api.createThread({ sessionId, filePath, side, startLine, endLine, body, author, anchorContent }).then(() => {
-      invalidateThreads();
-    });
-  }, [enabled, sessionId, invalidateThreads]);
-
-  const addReply = useCallback((threadId: string, body: string, author: CommentAuthor) => {
-    if (!enabled) {
-      return;
-    }
-    api.replyToThread(threadId, body, author).then(() => {
-      invalidateThreads();
-    });
-  }, [enabled, invalidateThreads]);
-
-  const resolveThread = useCallback((threadId: string) => {
-    if (!enabled) {
-      return;
-    }
-    api.updateThreadStatus(threadId, 'resolved').then(() => {
-      invalidateThreads();
-    });
-  }, [enabled, invalidateThreads]);
-
-  const unresolveThread = useCallback((threadId: string) => {
-    if (!enabled) {
-      return;
-    }
-    api.updateThreadStatus(threadId, 'open').then(() => {
-      invalidateThreads();
-    });
-  }, [enabled, invalidateThreads]);
-
-  const dismissThread = useCallback((threadId: string) => {
-    if (!enabled) {
-      return;
-    }
-    api.updateThreadStatus(threadId, 'dismissed').then(() => {
-      invalidateThreads();
-    });
-  }, [enabled, invalidateThreads]);
-
-  const deleteComment = useCallback((threadId: string, commentId: string) => {
-    if (!enabled) {
-      return;
-    }
-    api.deleteComment(commentId).then(() => {
-      invalidateThreads();
-    });
-  }, [enabled, invalidateThreads]);
-
-  const deleteThread = useCallback((threadId: string) => {
-    if (!enabled) {
-      return;
-    }
-    api.deleteThread(threadId).then(() => {
-      invalidateThreads();
-    });
-  }, [enabled, invalidateThreads]);
-
-  const deleteAllThreads = useCallback(() => {
-    if (!enabled || !sessionId) {
-      return;
-    }
-    api.deleteAllThreads(sessionId).then(() => {
-      invalidateThreads();
-    });
-  }, [enabled, sessionId, invalidateThreads]);
-
-  return {
-    addThread,
-    addReply,
-    resolveThread,
-    unresolveThread,
-    dismissThread,
-    deleteComment,
-    deleteThread,
-    deleteAllThreads,
-  };
-}
-
-export type CommentActions = ReturnType<typeof useCommentActions>;

package/packages/ui/src/hooks/use-commits.ts

@@ -1,12 +0,0 @@
-import { useQuery } from '@tanstack/react-query';
-import { commitsOptions } from '../queries/commits';
-
-export function useCommits() {
-  const { data, isLoading, error } = useQuery(commitsOptions());
-
-  return {
-    data: data ?? null,
-    loading: isLoading,
-    error: error?.message ?? null,
-  };
-}

package/packages/ui/src/hooks/use-copy.ts

@@ -1,18 +0,0 @@
-import { useState, useCallback, useRef } from 'react';
-
-export function useCopy(resetDelay = 2000) {
-  const [copied, setCopied] = useState(false);
-  const timeoutRef = useRef<ReturnType<typeof setTimeout>>(undefined);
-
-  const copy = useCallback((text: string) => {
-    navigator.clipboard.writeText(text).then(() => {
-      setCopied(true);
-      if (timeoutRef.current) {
-        clearTimeout(timeoutRef.current);
-      }
-      timeoutRef.current = setTimeout(() => setCopied(false), resetDelay);
-    });
-  }, [resetDelay]);
-
-  return { copied, copy };
-}