diffity 0.1.0 → 0.1.2

package/packages/ui/src/components/markdown-content.tsx

@@ -1,139 +0,0 @@
-import { useMemo } from 'react';
-import ReactMarkdown from 'react-markdown';
-import remarkGfm from 'remark-gfm';
-import type { Components } from 'react-markdown';
-import { useHighlighter } from '../hooks/use-highlighter';
-import { getTheme } from '../hooks/use-theme';
-
-interface MarkdownContentProps {
-  content: string;
-}
-
-export function MarkdownContent(props: MarkdownContentProps) {
-  const { content } = props;
-  const { highlight, ready } = useHighlighter();
-
-  const components = useMemo<Components>(() => ({
-    p({ children }) {
-      return <p className="mb-1.5 last:mb-0">{children}</p>;
-    },
-    strong({ children }) {
-      return <strong className="font-semibold text-text">{children}</strong>;
-    },
-    em({ children }) {
-      return <em>{children}</em>;
-    },
-    a({ href, children }) {
-      return (
-        <a href={href} className="text-accent hover:underline" target="_blank" rel="noopener noreferrer">
-          {children}
-        </a>
-      );
-    },
-    ul({ children }) {
-      return <ul className="list-disc pl-4 mb-1.5 last:mb-0">{children}</ul>;
-    },
-    ol({ children }) {
-      return <ol className="list-decimal pl-4 mb-1.5 last:mb-0">{children}</ol>;
-    },
-    li({ children }) {
-      return <li className="mb-0.5">{children}</li>;
-    },
-    blockquote({ children }) {
-      return (
-        <blockquote className="border-l-2 border-border pl-3 text-text-muted mb-1.5 last:mb-0">
-          {children}
-        </blockquote>
-      );
-    },
-    pre({ children }) {
-      return <div className="mb-1.5 last:mb-0">{children}</div>;
-    },
-    code({ className, children }) {
-      const match = /language-(\w+)/.exec(className || '');
-      const lang = match ? match[1] : null;
-      const codeString = String(children).replace(/\n$/, '');
-
-      if (!lang) {
-        return (
-          <code className="px-1 py-0.5 rounded bg-bg-tertiary text-[0.9em] font-mono">
-            {children}
-          </code>
-        );
-      }
-
-      let highlighted: { text: string; color?: string }[][] | null = null;
-      if (ready && lang) {
-        const result = highlight(codeString, `file.${lang}`, getTheme());
-        if (result) {
-          highlighted = result.map((line) => line.tokens);
-        }
-      }
-
-      return (
-        <div className="rounded-md border border-border overflow-hidden">
-          <div className="bg-bg-secondary px-3 py-1 border-b border-border">
-            <span className="text-[10px] text-text-muted font-mono">{lang}</span>
-          </div>
-          <pre className="px-3 py-2 overflow-x-auto bg-bg text-xs leading-5 font-mono">
-            {highlighted ? (
-              highlighted.map((tokens, lineIdx) => (
-                <div key={lineIdx}>
-                  {tokens.map((token, tokenIdx) => (
-                    <span key={tokenIdx} style={token.color ? { color: token.color } : undefined}>
-                      {token.text}
-                    </span>
-                  ))}
-                </div>
-              ))
-            ) : (
-              <code>{codeString}</code>
-            )}
-          </pre>
-        </div>
-      );
-    },
-    hr() {
-      return <hr className="border-border my-2" />;
-    },
-    h1({ children }) {
-      return <p className="font-semibold text-text mb-1">{children}</p>;
-    },
-    h2({ children }) {
-      return <p className="font-semibold text-text mb-1">{children}</p>;
-    },
-    h3({ children }) {
-      return <p className="font-semibold text-text mb-1">{children}</p>;
-    },
-    del({ children }) {
-      return <del className="text-text-muted">{children}</del>;
-    },
-    table({ children }) {
-      return (
-        <table className="border-collapse border border-border text-xs my-1.5">
-          {children}
-        </table>
-      );
-    },
-    th({ children }) {
-      return (
-        <th className="border border-border px-2 py-1 bg-bg-secondary text-left font-medium">
-          {children}
-        </th>
-      );
-    },
-    td({ children }) {
-      return (
-        <td className="border border-border px-2 py-1">{children}</td>
-      );
-    },
-  }), [highlight, ready]);
-
-  return (
-    <div className="markdown-body">
-      <ReactMarkdown remarkPlugins={[remarkGfm]} components={components}>
-        {content}
-      </ReactMarkdown>
-    </div>
-  );
-}

package/packages/ui/src/components/orphaned-threads.tsx

@@ -1,80 +0,0 @@
-import { useState } from 'react';
-import type { CommentThread as CommentThreadType } from '../types/comment';
-import { CommentBubble } from './comment-bubble';
-import { CommentIcon } from './icons/comment-icon';
-import { ChevronIcon } from './icons/chevron-icon';
-import { TrashIcon } from './icons/trash-icon';
-import { ThreadBadge } from './ui/thread-badge';
-
-interface OrphanedThreadsProps {
-  threads: CommentThreadType[];
-  onDeleteComment: (threadId: string, commentId: string) => void;
-  onDeleteThread: (threadId: string) => void;
-}
-
-export function OrphanedThreads(props: OrphanedThreadsProps) {
-  const { threads, onDeleteComment, onDeleteThread } = props;
-  const [isExpanded, setIsExpanded] = useState(false);
-
-  if (threads.length === 0) {
-    return null;
-  }
-
-  return (
-    <div className="border-b border-border bg-bg-secondary/50">
-      <button
-        onClick={() => setIsExpanded(!isExpanded)}
-        className="flex items-center gap-2 w-full px-4 py-2 text-xs text-text-muted hover:text-text-secondary transition-colors cursor-pointer"
-      >
-        <ChevronIcon expanded={isExpanded} />
-        <CommentIcon className="w-3.5 h-3.5" />
-        <span>
-          {threads.length} outdated comment{threads.length !== 1 ? 's' : ''}
-        </span>
-        <ThreadBadge variant="outdated" />
-      </button>
-      {isExpanded && (
-        <div className="px-4 pb-3 space-y-2">
-          {threads.map((thread) => {
-            const lineLabel = thread.startLine === thread.endLine
-              ? `Line ${thread.startLine}`
-              : `Lines ${thread.startLine}–${thread.endLine}`;
-
-            return (
-              <div key={thread.id} className="border border-border rounded-lg overflow-hidden max-w-[700px]">
-                <div className="flex items-center justify-between px-3 py-1.5 bg-bg-secondary border-b border-border">
-                  <div className="flex items-center gap-2">
-                    <span className="text-[11px] text-text-muted font-mono">{lineLabel}</span>
-                    <ThreadBadge variant="outdated" />
-                    {(thread.status === 'resolved' || thread.status === 'dismissed') && (
-                      <ThreadBadge variant={thread.status} />
-                    )}
-                  </div>
-                  <button
-                    onClick={() => onDeleteThread(thread.id)}
-                    className="text-text-muted hover:text-deleted transition-colors cursor-pointer"
-                    title="Delete thread"
-                  >
-                    <TrashIcon className="w-3.5 h-3.5" />
-                  </button>
-                </div>
-                {thread.anchorContent && (
-                  <pre className="px-3 py-2 text-xs font-mono text-text-muted bg-bg-tertiary/50 border-b border-border overflow-x-auto whitespace-pre max-h-24 overflow-y-auto">{thread.anchorContent}</pre>
-                )}
-                <div>
-                  {thread.comments.map((comment) => (
-                    <CommentBubble
-                      key={comment.id}
-                      comment={comment}
-                      onDelete={() => onDeleteComment(thread.id, comment.id)}
-                    />
-                  ))}
-                </div>
-              </div>
-            );
-          })}
-        </div>
-      )}
-    </div>
-  );
-}

package/packages/ui/src/components/overview-file-list.tsx

@@ -1,57 +0,0 @@
-import type { OverviewFile } from '../lib/api';
-
-interface OverviewFileListProps {
-  files: OverviewFile[];
-  onViewAll: () => void;
-}
-
-const STATUS_COLORS: Record<string, string> = {
-  staged: 'text-added',
-  modified: 'text-changed',
-  added: 'text-added',
-};
-
-const STATUS_LABELS: Record<string, string> = {
-  staged: 'S',
-  modified: 'M',
-  added: 'A',
-};
-
-export function OverviewFileList(props: OverviewFileListProps) {
-  const { files, onViewAll } = props;
-
-  if (files.length === 0) {
-    return null;
-  }
-
-  return (
-    <div className="border border-border rounded-lg bg-bg-secondary overflow-hidden">
-      <div className="flex items-center justify-between px-4 py-3 border-b border-border">
-        <div className="flex items-center gap-2">
-          <h3 className="font-medium text-text">Changed files</h3>
-          <span className="px-2 py-0.5 text-xs font-mono rounded-full bg-bg-tertiary text-text-secondary">
-            {files.length}
-          </span>
-        </div>
-        <button
-          onClick={onViewAll}
-          className="text-xs font-medium text-accent hover:text-accent/80 transition-colors"
-        >
-          View diff
-        </button>
-      </div>
-      <ul className="divide-y divide-border">
-        {files.map((file) => (
-          <li key={file.path} className="flex items-center gap-3 px-4 py-2">
-            <span className={`text-xs font-mono font-bold w-4 shrink-0 ${STATUS_COLORS[file.status]}`}>
-              {STATUS_LABELS[file.status]}
-            </span>
-            <span className="text-sm font-mono text-text-secondary truncate">
-              {file.path}
-            </span>
-          </li>
-        ))}
-      </ul>
-    </div>
-  );
-}

package/packages/ui/src/components/render-expansion-rows.tsx

@@ -1,47 +0,0 @@
-import type { DiffLine as DiffLineType } from '@diffity/parser';
-import type { HighlightedTokens } from '../hooks/use-highlighter';
-import type { SyntaxToken } from '../lib/syntax-token';
-import type { ViewMode } from '../lib/diff-utils';
-import type { LineRenderProps } from '../types/comment';
-import { renderLineWithComments } from './hunk-block';
-import { renderSplitRows } from './hunk-block-split';
-
-export function buildExpansionSyntaxMap(
-  lines: DiffLineType[],
-  highlightLine?: (code: string) => HighlightedTokens[] | null,
-): Map<string, SyntaxToken[]> {
-  const map = new Map<string, SyntaxToken[]>();
-  if (!highlightLine) {
-    return map;
-  }
-  for (const line of lines) {
-    if (!line.content) {
-      continue;
-    }
-    const highlighted = highlightLine(line.content);
-    if (!highlighted || highlighted.length === 0) {
-      continue;
-    }
-    const key = `${line.type}-${line.type === 'delete' ? line.oldLineNumber : line.newLineNumber}`;
-    map.set(key, highlighted[0].tokens);
-  }
-  return map;
-}
-
-export function renderExpansionRows(
-  lines: DiffLineType[],
-  viewMode: ViewMode,
-  keyPrefix: string,
-  syntaxMap: Map<string, SyntaxToken[]> | undefined,
-  props: LineRenderProps,
-): React.ReactNode[] {
-  if (viewMode === 'split') {
-    return renderSplitRows(lines, true, syntaxMap, keyPrefix, props);
-  }
-
-  const result: React.ReactNode[] = [];
-  for (let i = 0; i < lines.length; i++) {
-    result.push(...renderLineWithComments(lines[i], i, true, syntaxMap, props));
-  }
-  return result;
-}

package/packages/ui/src/components/shortcut-modal.tsx

@@ -1,93 +0,0 @@
-import { useEffect, useRef } from 'react';
-import { XIcon } from './icons/x-icon';
-
-interface ShortcutModalProps {
-  onClose: () => void;
-}
-
-const shortcuts = [
-  {
-    category: 'Navigation',
-    items: [
-      { key: 'j', description: 'Next file' },
-      { key: 'k', description: 'Previous file' },
-      { key: 'n', description: 'Next changed hunk' },
-      { key: 'p', description: 'Previous changed hunk' },
-    ],
-  },
-  {
-    category: 'View',
-    items: [
-      { key: 'u', description: 'Unified view' },
-      { key: 's', description: 'Split view' },
-      { key: 'x', description: 'Collapse/expand file' },
-      { key: 'Shift+x', description: 'Collapse/expand all files' },
-      { key: 'r', description: 'Toggle file as viewed' },
-    ],
-  },
-  {
-    category: 'Other',
-    items: [
-      { key: '/', description: 'Focus search' },
-      { key: '?', description: 'Show shortcuts' },
-      { key: 'Esc', description: 'Close modal / clear' },
-    ],
-  },
-];
-
-export function ShortcutModal(props: ShortcutModalProps) {
-  const { onClose } = props;
-  const dialogRef = useRef<HTMLDialogElement>(null);
-
-  useEffect(() => {
-    const dialog = dialogRef.current;
-    if (!dialog) {
-      return;
-    }
-
-    dialog.showModal();
-    return () => dialog.close();
-  }, []);
-
-  return (
-    <dialog
-      ref={dialogRef}
-      className="bg-bg text-text border border-border rounded-xl shadow-md w-[420px] max-w-[90vw] max-h-[80vh] overflow-y-auto backdrop:bg-black/60 backdrop:backdrop-blur-sm p-0 m-auto fixed inset-0 h-fit"
-      onClose={onClose}
-      onClick={(e) => {
-        if (e.target === dialogRef.current) {
-          onClose();
-        }
-      }}
-    >
-      <div className="flex items-center justify-between px-5 py-3.5 border-b border-border">
-        <h2 className="text-sm font-semibold">Keyboard shortcuts</h2>
-        <button
-          className="p-1 rounded-md text-text-muted hover:text-text hover:bg-hover cursor-pointer"
-          onClick={onClose}
-        >
-          <XIcon className="w-4 h-4" />
-        </button>
-      </div>
-      <div className="px-5 py-4">
-        {shortcuts.map(group => (
-          <div key={group.category} className="mb-5 last:mb-0">
-            <h3 className="text-[10px] font-semibold text-text-muted mb-2.5 uppercase tracking-widest">
-              {group.category}
-            </h3>
-            <div className="flex flex-col gap-1.5">
-              {group.items.map(item => (
-                <div key={item.key} className="flex items-center justify-between py-0.5">
-                  <span className="text-xs text-text-secondary">{item.description}</span>
-                  <kbd className="inline-flex items-center justify-center min-w-6 h-5 px-1.5 bg-bg-secondary border border-border rounded font-mono text-[11px] text-text-muted shadow-[inset_0_-1px_0_var(--color-border)]">
-                    {item.key}
-                  </kbd>
-                </div>
-              ))}
-            </div>
-          </div>
-        ))}
-      </div>
-    </dialog>
-  );
-}

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

@@ -1,80 +0,0 @@
-import { useState } from 'react';
-import type { DiffFile } from '@diffity/parser';
-import { FileTree } from './file-tree';
-import { SidebarIcon } from './icons/sidebar-icon';
-import { SearchIcon } from './icons/search-icon';
-import { XIcon } from './icons/x-icon';
-
-interface SidebarProps {
-  files: DiffFile[];
-  activeFile: string | null;
-  reviewedFiles: Set<string>;
-  filesWithComments: Set<string>;
-  onFileClick: (path: string) => void;
-}
-
-export function Sidebar(props: SidebarProps) {
-  const { files, activeFile, reviewedFiles, filesWithComments, onFileClick } = props;
-  const [search, setSearch] = useState('');
-  const [collapsed, setCollapsed] = useState(false);
-
-  if (collapsed) {
-    return (
-      <div className="w-10 min-w-10 border-r border-border bg-bg-secondary flex items-start justify-center pt-3">
-        <button
-          className="p-1.5 rounded-md text-text-muted hover:text-text hover:bg-hover cursor-pointer"
-          onClick={() => setCollapsed(false)}
-          title="Show sidebar"
-        >
-          <SidebarIcon className="w-4 h-4" />
-        </button>
-      </div>
-    );
-  }
-
-  return (
-    <aside className="w-72 min-w-72 border-r border-border bg-bg-secondary flex flex-col overflow-hidden">
-      <div className="flex items-center justify-between px-3 py-2.5 border-b border-border">
-        <span className="text-xs font-medium text-text-secondary flex items-center gap-2 uppercase tracking-wider">
-          Files
-          <span className="inline-flex items-center justify-center min-w-5 h-5 px-1.5 bg-bg-tertiary rounded-full text-[10px] font-semibold text-text-muted">
-            {reviewedFiles.size > 0 ? `${reviewedFiles.size}/${files.length}` : files.length}
-          </span>
-        </span>
-        <button
-          className="p-1 rounded-md text-text-muted hover:text-text hover:bg-hover cursor-pointer"
-          onClick={() => setCollapsed(true)}
-          title="Hide sidebar"
-        >
-          <SidebarIcon className="w-3.5 h-3.5" />
-        </button>
-      </div>
-      <div className="relative px-3 py-2">
-        <SearchIcon className="absolute left-5 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-text-muted pointer-events-none" />
-        <input
-          className="w-full pl-7 pr-7 py-1.5 border border-border rounded-md bg-bg text-xs outline-none focus:border-accent focus:ring-1 focus:ring-accent/20 placeholder:text-text-muted"
-          type="text"
-          placeholder="Filter files..."
-          value={search}
-          onChange={e => setSearch(e.target.value)}
-        />
-        {search && (
-          <button
-            className="absolute right-5 top-1/2 -translate-y-1/2 text-text-muted hover:text-text cursor-pointer"
-            onClick={() => setSearch('')}
-          >
-            <XIcon className="w-3 h-3" />
-          </button>
-        )}
-      </div>
-      <FileTree
-        files={files}
-        search={search}
-        activeFile={activeFile}
-        reviewedFiles={reviewedFiles}
-        filesWithComments={filesWithComments}
-        onFileClick={onFileClick}
-      />
-    </aside>
-  );
-}

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

@@ -1,9 +0,0 @@
-import { Spinner } from './icons/spinner';
-
-export function PageLoader() {
-  return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center bg-bg/60 backdrop-blur-sm">
-      <Spinner className="w-8 h-8" />
-    </div>
-  );
-}

package/packages/ui/src/components/stale-diff-banner.tsx

@@ -1,21 +0,0 @@
-interface StaleDiffBannerProps {
-  onRefresh: () => void;
-}
-
-export function StaleDiffBanner(props: StaleDiffBannerProps) {
-  const { onRefresh } = props;
-
-  return (
-    <div className="sticky top-0 z-30 flex items-center justify-center gap-3 px-4 py-1.5 bg-accent/10 border-b border-accent/20 text-xs animate-slide-down">
-      <span className="text-accent font-medium">
-        Files have changed since this diff was loaded
-      </span>
-      <button
-        onClick={onRefresh}
-        className="px-2.5 py-0.5 bg-accent text-white rounded-md text-[11px] font-medium hover:bg-accent-hover transition-colors cursor-pointer"
-      >
-        Refresh
-      </button>
-    </div>
-  );
-}

package/packages/ui/src/components/summary-bar.tsx

@@ -1,39 +0,0 @@
-import type { ParsedDiff } from '@diffity/parser';
-import { DiffStats } from './diff-stats';
-import { GitBranchIcon } from './icons/git-branch-icon';
-
-interface SummaryBarProps {
-  diff: ParsedDiff | null;
-  repoName: string | null;
-  branch: string | null;
-  description: string | null;
-}
-
-export function SummaryBar(props: SummaryBarProps) {
-  const { diff, repoName, branch, description } = props;
-
-  return (
-    <div className="flex items-center justify-between px-4 py-2.5 bg-bg-secondary border-b border-border font-sans text-sm">
-      <div className="flex items-center gap-2.5">
-        {repoName && <span className="font-semibold text-text">{repoName}</span>}
-        {branch && (
-          <span className="inline-flex items-center gap-1 px-2 py-0.5 bg-diff-hunk-bg text-diff-hunk-text rounded-md font-mono text-xs">
-            <GitBranchIcon className="w-3 h-3" />
-            {branch}
-          </span>
-        )}
-        {description && <span className="text-text-secondary">{description}</span>}
-      </div>
-      {diff ? (
-        <div className="flex items-center gap-3">
-          <span className="text-text-muted text-xs">
-            {diff.stats.filesChanged} file{diff.stats.filesChanged !== 1 ? 's' : ''}
-          </span>
-          <DiffStats additions={diff.stats.totalAdditions} deletions={diff.stats.totalDeletions} />
-        </div>
-      ) : (
-        <div className="w-48 h-4 bg-bg-tertiary rounded animate-pulse" />
-      )}
-    </div>
-  );
-}