kandev/apps/web/components/diff/use-diff-options.tsx

import { useCallback, useMemo, type ReactNode } from 'react';
import { useTheme } from 'next-themes';
import type { FileDiffOptions, SelectedLineRange, RenderHeaderMetadataProps } from '@pierre/diffs';
import { IconPlus } from '@tabler/icons-react';
import { FONT } from '@/lib/theme/colors';
import { useGlobalViewMode } from '@/hooks/use-global-view-mode';
import { useDiffHeaderToolbar } from './diff-header-toolbar';
import type { AnnotationMetadata } from './use-diff-annotation-renderer';

/** CSS overrides for the Pierre diff viewer, injected via unsafeCSS. */
const DIFF_UNSAFE_CSS = `
  [data-diffs],
  pre[data-diffs] {
    background-color: var(--background) !important;
    --diffs-bg: var(--background) !important;
    --diffs-bg-context: var(--background) !important;
    --diffs-bg-buffer: var(--background) !important;
    --diffs-bg-separator: var(--card) !important;
    --diffs-bg-hover: var(--muted) !important;
    --diffs-fg: var(--foreground) !important;
    --diffs-fg-number: var(--muted-foreground) !important;
    --diffs-addition-color-override: rgb(var(--git-addition)) !important;
    --diffs-deletion-color-override: rgb(var(--git-deletion)) !important;
    --diffs-font-size: ${FONT.size}px !important;
    --diffs-font-family: ${FONT.mono} !important;
    font-size: ${FONT.size}px !important;
    font-family: ${FONT.mono} !important;
  }
  [data-change-icon] {
    width: 12px !important;
    height: 12px !important;
  }
  [data-diffs-header] {
    padding-inline: 12px !important;
    background: var(--card) !important;
  }
`;

type UseDiffOptionsArgs = {
  filePath: string;
  diff?: string;
  enableComments: boolean;
  showHeader: boolean;
  wordWrap: boolean;
  setWordWrap: (fn: (v: boolean) => boolean) => void;
  handleLineSelectionEnd: (range: SelectedLineRange | null) => void;
  onLineEnter: (props: { lineType?: string; lineNumber?: number; annotationSide?: string }) => void;
  onLineLeave: () => void;
  onOpenFile?: (filePath: string) => void;
  onRevert?: (filePath: string) => void;
};

type UseDiffOptionsResult = {
  globalViewMode: string;
  options: FileDiffOptions<AnnotationMetadata>;
  renderHeaderMetadata: ((props: RenderHeaderMetadataProps) => ReactNode) | undefined;
  renderHoverUtility: () => ReactNode;
};

export function useDiffOptions(args: UseDiffOptionsArgs): UseDiffOptionsResult {
  const {
    filePath, diff, enableComments, showHeader, wordWrap,
    setWordWrap, handleLineSelectionEnd, onLineEnter, onLineLeave,
    onOpenFile, onRevert,
  } = args;

  const { resolvedTheme } = useTheme();
  const [globalViewMode, setGlobalViewMode] = useGlobalViewMode();

  const toggleViewMode = useCallback(
    () => setGlobalViewMode(globalViewMode === 'split' ? 'unified' : 'split'),
    [globalViewMode, setGlobalViewMode]
  );

  const toggleWordWrap = useCallback(
    () => setWordWrap((v: boolean) => !v),
    [setWordWrap]
  );

  const renderHeaderMetadata = useDiffHeaderToolbar({
    filePath, diff, wordWrap,
    onToggleWordWrap: toggleWordWrap,
    viewMode: globalViewMode,
    onToggleViewMode: toggleViewMode,
    onOpenFile, onRevert,
  });

  const renderHoverUtility = useCallback(
    (): ReactNode => {
      if (!enableComments) return null;
      return (
        <div
          className="flex h-5 w-5 cursor-pointer items-center justify-center rounded border border-border bg-background text-muted-foreground hover:bg-accent hover:text-foreground"
          title="Add comment"
        >
          <IconPlus className="h-3 w-3" />
        </div>
      );
    },
    [enableComments]
  );

  const options = useMemo<FileDiffOptions<AnnotationMetadata>>(
    () => ({
      diffStyle: globalViewMode,
      themeType: resolvedTheme === 'dark' ? 'dark' : 'light',
      enableLineSelection: enableComments,
      hunkSeparators: 'simple',
      enableHoverUtility: enableComments,
      diffIndicators: 'none',
      onLineSelectionEnd: handleLineSelectionEnd,
      onLineEnter,
      onLineLeave,
      disableFileHeader: !showHeader,
      overflow: wordWrap ? 'wrap' : 'scroll',
      unsafeCSS: DIFF_UNSAFE_CSS,
    }),
    [globalViewMode, resolvedTheme, enableComments, showHeader, handleLineSelectionEnd, wordWrap, onLineEnter, onLineLeave]
  );

  return { globalViewMode, options, renderHeaderMetadata: showHeader ? renderHeaderMetadata : undefined, renderHoverUtility };
}