diffity 0.1.0

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

@@ -0,0 +1,139 @@
+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

@@ -0,0 +1,80 @@
+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

@@ -0,0 +1,57 @@
+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

@@ -0,0 +1,47 @@
+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

@@ -0,0 +1,93 @@
+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

@@ -0,0 +1,80 @@
+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

@@ -0,0 +1,9 @@
+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

@@ -0,0 +1,21 @@
+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

@@ -0,0 +1,39 @@
+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>
+  );
+}