@thxgg/steward 0.1.5 → 0.1.7

package/app/components/git/DiffViewer.vue

@@ -1,803 +0,0 @@
-<script setup lang="ts">
-import { codeToHtml } from 'shiki/bundle/web'
-import { Link, Link2Off, FileWarning, AlertTriangle, ChevronDown } from 'lucide-vue-next'
-import { Button } from '~/components/ui/button'
-import type { DiffHunk, DiffLine } from '~/types/git'
-
-const props = defineProps<{
-  /** Diff hunks to display */
-  hunks: DiffHunk[]
-  /** File path for syntax detection */
-  filePath: string
-  /** Whether this file is binary */
-  binary?: boolean
-  /** Old file path (for renames) */
-  oldPath?: string
-  /** Full file content (for full file view) */
-  fileContent?: string | null
-  /** Whether to show full file with changes highlighted */
-  showFullFile?: boolean
-  /** Loading state for file content */
-  isLoadingContent?: boolean
-}>()
-
-// Line limit for large files (truncation threshold)
-const LINE_LIMIT = 10000
-const showAll = ref(false)
-
-// Synchronized scrolling state
-const syncScrollEnabled = ref(true)
-
-// Refs for scroll sync
-const leftScrollRef = ref<HTMLElement | null>(null)
-const rightScrollRef = ref<HTMLElement | null>(null)
-const isScrolling = ref(false)
-
-// Scroll sync handlers
-function onLeftScroll(event: Event) {
-  if (!syncScrollEnabled.value || isScrolling.value) return
-  const target = event.target as HTMLElement
-  if (rightScrollRef.value) {
-    isScrolling.value = true
-    rightScrollRef.value.scrollLeft = target.scrollLeft
-    requestAnimationFrame(() => {
-      isScrolling.value = false
-    })
-  }
-}
-
-function onRightScroll(event: Event) {
-  if (!syncScrollEnabled.value || isScrolling.value) return
-  const target = event.target as HTMLElement
-  if (leftScrollRef.value) {
-    isScrolling.value = true
-    leftScrollRef.value.scrollLeft = target.scrollLeft
-    requestAnimationFrame(() => {
-      isScrolling.value = false
-    })
-  }
-}
-
-// Calculate total line count for large file detection
-const totalLines = computed(() => {
-  let count = 0
-  for (const hunk of props.hunks) {
-    count += hunk.lines.length
-  }
-  return count
-})
-
-// Check if file is large and should be truncated
-const isLargeFile = computed(() => totalLines.value > LINE_LIMIT)
-
-// Check if file has no actual changes (empty diff)
-const isEmpty = computed(() => props.hunks.length === 0 && !props.binary)
-
-// Build a set of changed line numbers for full file highlighting
-const changedLines = computed(() => {
-  const added = new Set<number>()
-  const removed = new Set<number>()
-
-  for (const hunk of props.hunks) {
-    for (const line of hunk.lines) {
-      if (line.type === 'add' && line.newNumber !== undefined) {
-        added.add(line.newNumber)
-      }
-      if (line.type === 'remove' && line.oldNumber !== undefined) {
-        removed.add(line.oldNumber)
-      }
-    }
-  }
-
-  return { added, removed }
-})
-
-// Full file lines for the full file view
-const fullFileLines = computed(() => {
-  if (!props.fileContent) return []
-  return props.fileContent.split('\n')
-})
-
-// Detect language from file extension
-function detectLanguage(path: string): string {
-  const ext = path.split('.').pop()?.toLowerCase() || ''
-  const langMap: Record<string, string> = {
-    ts: 'typescript',
-    tsx: 'tsx',
-    js: 'javascript',
-    jsx: 'jsx',
-    vue: 'vue',
-    svelte: 'svelte',
-    py: 'python',
-    rb: 'ruby',
-    rs: 'rust',
-    go: 'go',
-    java: 'java',
-    kt: 'kotlin',
-    swift: 'swift',
-    c: 'c',
-    cpp: 'cpp',
-    h: 'c',
-    hpp: 'cpp',
-    cs: 'csharp',
-    php: 'php',
-    html: 'html',
-    css: 'css',
-    scss: 'scss',
-    sass: 'sass',
-    less: 'less',
-    json: 'json',
-    yaml: 'yaml',
-    yml: 'yaml',
-    toml: 'toml',
-    xml: 'xml',
-    md: 'markdown',
-    mdx: 'mdx',
-    sh: 'bash',
-    bash: 'bash',
-    zsh: 'bash',
-    fish: 'fish',
-    ps1: 'powershell',
-    sql: 'sql',
-    graphql: 'graphql',
-    gql: 'graphql',
-    dockerfile: 'dockerfile',
-    makefile: 'makefile',
-  }
-  return langMap[ext] || 'text'
-}
-
-// Detect language from file path
-const language = computed(() => detectLanguage(props.filePath))
-
-// Highlighted lines state
-const highlightedLines = ref<Map<string, string>>(new Map())
-const isLoading = ref(true)
-
-// Generate line pairs for side-by-side view
-interface LinePair {
-  id: string
-  left: {
-    lineNum?: number
-    content: string
-    type: 'add' | 'remove' | 'context' | 'empty'
-    highlighted?: string
-  }
-  right: {
-    lineNum?: number
-    content: string
-    type: 'add' | 'remove' | 'context' | 'empty'
-    highlighted?: string
-  }
-}
-
-interface DisplayItem {
-  type: 'line' | 'separator'
-  pair?: LinePair
-  hunkIndex?: number
-}
-
-// Generate display items including line pairs and separators
-const displayItems = computed<DisplayItem[]>(() => {
-  const items: DisplayItem[] = []
-
-  for (let hunkIndex = 0; hunkIndex < props.hunks.length; hunkIndex++) {
-    const hunk = props.hunks[hunkIndex]!
-
-    // Add separator before each hunk (except the first)
-    if (hunkIndex > 0) {
-      items.push({ type: 'separator', hunkIndex })
-    }
-
-    // Process lines into pairs
-    const hunkLines = hunk.lines
-    let i = 0
-
-    while (i < hunkLines.length) {
-      const line = hunkLines[i]!
-
-      if (line.type === 'context') {
-        // Context line - show on both sides
-        items.push({
-          type: 'line',
-          pair: {
-            id: `${hunkIndex}-${i}`,
-            left: {
-              lineNum: line.oldNumber,
-              content: line.content,
-              type: 'context',
-            },
-            right: {
-              lineNum: line.newNumber,
-              content: line.content,
-              type: 'context',
-            },
-          },
-        })
-        i++
-      } else if (line.type === 'remove') {
-        // Check for consecutive additions after removals to pair them
-        const removeLines: DiffLine[] = []
-        const addLines: DiffLine[] = []
-
-        // Collect consecutive removals
-        while (i < hunkLines.length && hunkLines[i]!.type === 'remove') {
-          removeLines.push(hunkLines[i]!)
-          i++
-        }
-
-        // Collect consecutive additions
-        while (i < hunkLines.length && hunkLines[i]!.type === 'add') {
-          addLines.push(hunkLines[i]!)
-          i++
-        }
-
-        // Pair up removals and additions
-        const maxLen = Math.max(removeLines.length, addLines.length)
-        for (let j = 0; j < maxLen; j++) {
-          const removeLine = removeLines[j]
-          const addLine = addLines[j]
-
-          items.push({
-            type: 'line',
-            pair: {
-              id: `${hunkIndex}-${i - maxLen + j}`,
-              left: removeLine
-                ? {
-                    lineNum: removeLine.oldNumber,
-                    content: removeLine.content,
-                    type: 'remove',
-                  }
-                : { content: '', type: 'empty' },
-              right: addLine
-                ? {
-                    lineNum: addLine.newNumber,
-                    content: addLine.content,
-                    type: 'add',
-                  }
-                : { content: '', type: 'empty' },
-            },
-          })
-        }
-      } else if (line.type === 'add') {
-        // Standalone addition (shouldn't happen often in this flow)
-        items.push({
-          type: 'line',
-          pair: {
-            id: `${hunkIndex}-${i}`,
-            left: { content: '', type: 'empty' },
-            right: {
-              lineNum: line.newNumber,
-              content: line.content,
-              type: 'add',
-            },
-          },
-        })
-        i++
-      } else {
-        i++
-      }
-    }
-  }
-
-  return items
-})
-
-// Highlight code with shiki using dual themes for instant theme switching
-async function highlightLine(content: string, lang: string): Promise<string> {
-  if (!content.trim()) {
-    return ''
-  }
-
-  try {
-    const html = await codeToHtml(content, {
-      lang,
-      themes: {
-        light: 'catppuccin-latte',
-        dark: 'catppuccin-mocha',
-      },
-    })
-    // Extract just the code content from shiki output
-    // Shiki wraps in <pre><code>...</code></pre>
-    const codeMatch = html.match(/<code[^>]*>([\s\S]*?)<\/code>/)
-    return codeMatch ? codeMatch[1] || '' : escapeHtml(content)
-  } catch {
-    return escapeHtml(content)
-  }
-}
-
-// Highlight full file content at once (preserves context for Vue/JSX files)
-// then split into individual lines
-async function highlightFullContent(content: string, lang: string): Promise<string[]> {
-  if (!content) {
-    return []
-  }
-
-  try {
-    const html = await codeToHtml(content, {
-      lang,
-      themes: {
-        light: 'catppuccin-latte',
-        dark: 'catppuccin-mocha',
-      },
-    })
-    // Extract the code content from shiki output
-    const codeMatch = html.match(/<code[^>]*>([\s\S]*?)<\/code>/)
-    if (!codeMatch || !codeMatch[1]) {
-      return content.split('\n').map(escapeHtml)
-    }
-
-    // Split by newlines, preserving HTML tags that span lines
-    // Shiki outputs each line's content, with newlines as literal \n
-    const highlightedContent = codeMatch[1]
-    return highlightedContent.split('\n')
-  } catch {
-    return content.split('\n').map(escapeHtml)
-  }
-}
-
-function escapeHtml(text: string): string {
-  return text
-    .replace(/&/g, '&amp;')
-    .replace(/</g, '&lt;')
-    .replace(/>/g, '&gt;')
-    .replace(/"/g, '&quot;')
-    .replace(/'/g, '&#039;')
-}
-
-// Highlighted full file lines (used for both full file view and diff view)
-const highlightedFullFile = ref<string[]>([])
-const isLoadingFullFile = ref(false)
-
-// Highlight full file when content changes
-// Uses full-content highlighting to preserve context (important for Vue/JSX)
-watch(
-  () => [props.fileContent, props.filePath] as const,
-  async ([content]) => {
-    if (!content) {
-      highlightedFullFile.value = []
-      return
-    }
-
-    isLoadingFullFile.value = true
-    const lang = language.value
-
-    // Highlight entire file at once to preserve context for Vue/JSX files
-    highlightedFullFile.value = await highlightFullContent(content, lang)
-    isLoadingFullFile.value = false
-  },
-  { immediate: true }
-)
-
-// Highlight diff lines - uses full file context when available
-watch(
-  () => [props.hunks, props.filePath, highlightedFullFile.value] as const,
-  async () => {
-    isLoading.value = true
-    const lang = language.value
-    const newHighlighted = new Map<string, string>()
-    const fullFileLines = highlightedFullFile.value
-
-    // Collect lines that need individual highlighting (removed lines from old file)
-    const linesToHighlight: { key: string; content: string }[] = []
-
-    for (const item of displayItems.value) {
-      if (item.type === 'line' && item.pair) {
-        // Left side (old file) - removed lines need individual highlighting
-        if (item.pair.left.content && item.pair.left.type !== 'empty') {
-          const key = `${item.pair.id}-old`
-          // For context lines, we can use the new file's highlighting if line numbers match
-          if (item.pair.left.type === 'context' && item.pair.left.lineNum && fullFileLines.length > 0) {
-            // Context lines exist in both files at same content, use new file highlight
-            const lineIndex = item.pair.right.lineNum ? item.pair.right.lineNum - 1 : -1
-            if (lineIndex >= 0 && lineIndex < fullFileLines.length) {
-              newHighlighted.set(key, fullFileLines[lineIndex] || '')
-            } else {
-              linesToHighlight.push({ key, content: item.pair.left.content })
-            }
-          } else {
-            // Removed lines - must highlight individually
-            linesToHighlight.push({ key, content: item.pair.left.content })
-          }
-        }
-
-        // Right side (new file) - use full file highlighting when available
-        if (item.pair.right.content && item.pair.right.type !== 'empty') {
-          const key = `${item.pair.id}-new`
-          const lineNum = item.pair.right.lineNum
-          if (lineNum && fullFileLines.length > 0 && lineNum <= fullFileLines.length) {
-            // Use pre-highlighted line from full file
-            newHighlighted.set(key, fullFileLines[lineNum - 1] || '')
-          } else {
-            // Fallback to individual highlighting
-            linesToHighlight.push({ key, content: item.pair.right.content })
-          }
-        }
-      }
-    }
-
-    // Highlight remaining lines individually (removed lines)
-    const batchSize = 50
-    for (let i = 0; i < linesToHighlight.length; i += batchSize) {
-      const batch = linesToHighlight.slice(i, i + batchSize)
-      const results = await Promise.all(
-        batch.map(async ({ key, content }) => {
-          const result = await highlightLine(content, lang)
-          return { key, result }
-        })
-      )
-
-      for (const { key, result } of results) {
-        newHighlighted.set(key, result)
-      }
-    }
-
-    highlightedLines.value = newHighlighted
-    isLoading.value = false
-  },
-  { immediate: true }
-)
-
-// Get highlighted content for a line
-function getHighlightedContent(pairId: string, side: 'old' | 'new'): string {
-  return highlightedLines.value.get(`${pairId}-${side}`) || ''
-}
-
-// Get line type for full file view
-function getFullFileLineType(lineNum: number): 'add' | 'remove' | 'context' {
-  if (changedLines.value.added.has(lineNum)) return 'add'
-  return 'context'
-}
-</script>
-
-<template>
-  <div class="diff-viewer">
-    <!-- Loading state -->
-    <div v-if="(isLoading || isLoadingContent || isLoadingFullFile) && !binary" class="flex items-center justify-center py-8">
-      <div class="size-6 animate-spin rounded-full border-2 border-primary border-t-transparent" />
-    </div>
-
-    <!-- Binary file state -->
-    <div v-else-if="binary" class="flex flex-col items-center justify-center gap-3 py-12 text-muted-foreground">
-      <FileWarning class="size-10 opacity-50" />
-      <div class="text-center">
-        <p class="font-medium">Binary file</p>
-        <p class="text-sm">This file cannot be displayed as a diff</p>
-      </div>
-    </div>
-
-    <!-- Empty diff state (only for changes view) -->
-    <div v-else-if="isEmpty && !showFullFile" class="flex flex-col items-center justify-center gap-3 py-12 text-muted-foreground">
-      <AlertTriangle class="size-10 opacity-50" />
-      <div class="text-center">
-        <p class="font-medium">No changes</p>
-        <p class="text-sm">This file was touched but has no content changes</p>
-      </div>
-    </div>
-
-    <!-- Large file warning (truncated) - only for changes view -->
-    <div v-else-if="isLargeFile && !showAll && !showFullFile" class="diff-container">
-      <div class="flex flex-col items-center justify-center gap-3 border-b border-border bg-muted/30 py-6">
-        <AlertTriangle class="size-8 text-yellow-500" />
-        <div class="text-center">
-          <p class="font-medium">Large file</p>
-          <p class="text-sm text-muted-foreground">
-            This file has {{ totalLines.toLocaleString() }} lines (threshold: {{ LINE_LIMIT.toLocaleString() }})
-          </p>
-        </div>
-        <Button variant="outline" size="sm" @click="showAll = true">
-          <ChevronDown class="mr-2 size-4" />
-          Show full diff
-        </Button>
-      </div>
-    </div>
-
-    <!-- Full file view -->
-    <div v-else-if="showFullFile && fileContent" class="diff-container">
-      <div class="full-file-view">
-        <div
-          v-for="(line, index) in fullFileLines"
-          :key="index"
-          class="full-file-line"
-          :class="{
-            'diff-add': getFullFileLineType(index + 1) === 'add',
-          }"
-        >
-          <div class="diff-gutter">
-            <span class="line-number">{{ index + 1 }}</span>
-          </div>
-          <div class="diff-content">
-            <span
-              class="diff-code"
-              v-html="highlightedFullFile[index] || escapeHtml(line)"
-            />
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <!-- Normal diff view (changes only) -->
-    <div v-else class="diff-container">
-      <!-- Sync scroll toggle -->
-      <div class="diff-toolbar">
-        <Button
-          variant="ghost"
-          size="sm"
-          class="h-7 gap-1.5 text-xs"
-          :class="{ 'text-primary': syncScrollEnabled }"
-          @click="syncScrollEnabled = !syncScrollEnabled"
-        >
-          <component :is="syncScrollEnabled ? Link : Link2Off" class="size-3.5" />
-          {{ syncScrollEnabled ? 'Sync scroll' : 'Scroll unlocked' }}
-        </Button>
-      </div>
-      <!-- Side-by-side view with independent scrollable columns -->
-      <div class="diff-split">
-        <!-- Left column (old) -->
-        <div ref="leftScrollRef" class="diff-column diff-column-left" @scroll="onLeftScroll">
-          <div class="diff-column-content">
-            <template v-for="item in displayItems" :key="item.type === 'line' ? `left-${item.pair?.id}` : `left-sep-${item.hunkIndex}`">
-              <!-- Hunk separator -->
-              <div v-if="item.type === 'separator'" class="diff-separator-half">
-                <div class="separator-line" />
-                <span class="separator-text">···</span>
-              </div>
-
-              <!-- Line -->
-              <div
-                v-else-if="item.pair"
-                class="diff-line"
-                :class="{
-                  'diff-remove': item.pair.left.type === 'remove',
-                  'diff-empty': item.pair.left.type === 'empty',
-                  'diff-context': item.pair.left.type === 'context',
-                }"
-              >
-                <div class="diff-gutter">
-                  <span v-if="item.pair.left.lineNum" class="line-number">
-                    {{ item.pair.left.lineNum }}
-                  </span>
-                </div>
-                <div class="diff-content">
-                  <span
-                    v-if="item.pair.left.type !== 'empty'"
-                    class="diff-code"
-                    v-html="getHighlightedContent(item.pair.id, 'old') || escapeHtml(item.pair.left.content)"
-                  />
-                </div>
-              </div>
-            </template>
-          </div>
-        </div>
-
-        <!-- Right column (new) -->
-        <div ref="rightScrollRef" class="diff-column diff-column-right" @scroll="onRightScroll">
-          <div class="diff-column-content">
-            <template v-for="item in displayItems" :key="item.type === 'line' ? `right-${item.pair?.id}` : `right-sep-${item.hunkIndex}`">
-              <!-- Hunk separator -->
-              <div v-if="item.type === 'separator'" class="diff-separator-half">
-                <span class="separator-text">···</span>
-                <div class="separator-line" />
-              </div>
-
-              <!-- Line -->
-              <div
-                v-else-if="item.pair"
-                class="diff-line"
-                :class="{
-                  'diff-add': item.pair.right.type === 'add',
-                  'diff-empty': item.pair.right.type === 'empty',
-                  'diff-context': item.pair.right.type === 'context',
-                }"
-              >
-                <div class="diff-gutter">
-                  <span v-if="item.pair.right.lineNum" class="line-number">
-                    {{ item.pair.right.lineNum }}
-                  </span>
-                </div>
-                <div class="diff-content">
-                  <span
-                    v-if="item.pair.right.type !== 'empty'"
-                    class="diff-code"
-                    v-html="getHighlightedContent(item.pair.id, 'new') || escapeHtml(item.pair.right.content)"
-                  />
-                </div>
-              </div>
-            </template>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.diff-viewer {
-  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Monaco, Consolas, monospace;
-  font-size: 0.8125rem;
-  line-height: 1.5;
-  color: hsl(var(--foreground));
-}
-
-.diff-container {
-  overflow-x: auto;
-}
-
-.diff-toolbar {
-  display: flex;
-  justify-content: flex-end;
-  padding: 0.25rem 0.5rem;
-  border-bottom: 1px solid hsl(var(--border));
-  background: hsl(var(--muted) / 0.3);
-}
-
-.diff-split {
-  display: flex;
-  min-width: 100%;
-}
-
-.diff-column {
-  flex: 1;
-  min-width: 0;
-  overflow-x: auto;
-}
-
-.diff-column-left {
-  border-right: 1px solid hsl(var(--border));
-}
-
-.diff-column-content {
-  min-width: fit-content;
-}
-
-.diff-line {
-  display: flex;
-}
-
-.diff-gutter {
-  flex-shrink: 0;
-  width: 3.5rem;
-  padding: 0 0.5rem;
-  text-align: right;
-  color: hsl(var(--muted-foreground));
-  background: hsl(var(--muted) / 0.3);
-  user-select: none;
-}
-
-.line-number {
-  display: inline-block;
-  min-width: 2rem;
-  opacity: 0.7;
-}
-
-.diff-content {
-  flex: 1;
-  min-width: 0;
-  padding: 0 0.5rem;
-  white-space: pre;
-  color: hsl(var(--foreground));
-}
-
-.diff-code {
-  display: inline;
-  color: inherit;
-}
-
-/* Line type styles */
-.diff-add {
-  background: hsl(142 76% 36% / 0.15);
-}
-
-.diff-add .diff-gutter {
-  background: hsl(142 76% 36% / 0.25);
-}
-
-.diff-remove {
-  background: hsl(0 84% 60% / 0.15);
-}
-
-.diff-remove .diff-gutter {
-  background: hsl(0 84% 60% / 0.25);
-}
-
-.diff-empty {
-  background: hsl(var(--muted) / 0.2);
-}
-
-.diff-empty .diff-gutter {
-  background: hsl(var(--muted) / 0.3);
-}
-
-.diff-context {
-  background: transparent;
-}
-
-/* Full file view */
-.full-file-view {
-  min-width: 100%;
-}
-
-.full-file-line {
-  display: flex;
-}
-
-.full-file-line .diff-gutter {
-  width: 4rem;
-}
-
-.full-file-line.diff-add {
-  background: hsl(142 76% 36% / 0.15);
-}
-
-.full-file-line.diff-add .diff-gutter {
-  background: hsl(142 76% 36% / 0.25);
-}
-
-.dark .full-file-line.diff-add {
-  background: hsl(142 76% 36% / 0.1);
-}
-
-.dark .full-file-line.diff-add .diff-gutter {
-  background: hsl(142 76% 36% / 0.2);
-}
-
-/* Hunk separator */
-.diff-separator {
-  display: flex;
-  align-items: center;
-  padding: 0.25rem 0;
-  background: hsl(var(--muted) / 0.4);
-}
-
-.diff-separator-half {
-  display: flex;
-  align-items: center;
-  padding: 0.25rem 0;
-  background: hsl(var(--muted) / 0.4);
-}
-
-.separator-line {
-  flex: 1;
-  height: 1px;
-  background: hsl(var(--border));
-}
-
-.separator-text {
-  padding: 0 0.75rem;
-  font-size: 0.75rem;
-  color: hsl(var(--muted-foreground));
-}
-
-/* Dark mode adjustments */
-.dark .diff-add {
-  background: hsl(142 76% 36% / 0.1);
-}
-
-.dark .diff-add .diff-gutter {
-  background: hsl(142 76% 36% / 0.2);
-}
-
-.dark .diff-remove {
-  background: hsl(0 84% 60% / 0.1);
-}
-
-.dark .diff-remove .diff-gutter {
-  background: hsl(0 84% 60% / 0.2);
-}
-
-/* Shiki output styling */
-:deep(.shiki),
-:deep(.shiki span) {
-  background: transparent !important;
-}
-</style>
-
-<style>
-/* Shiki dual-theme switching - must be global to reach html.dark
-   We target spans with --shiki-dark variable since we extract only
-   the inner content from Shiki's output (without the .shiki wrapper) */
-html.dark .diff-viewer span[style*="--shiki-dark"] {
-  color: var(--shiki-dark) !important;
-  background-color: transparent !important;
-}
-</style>