fix(web): optimize diff display and enable text selection for code and log views (#1802)

* fix(web): optimize diff display and enable text selection for code and log views

- Add ChangeTypes type definition to support file change type identification
- Optimize FileDiff component to distinguish between pure rename and rename with modification prompt copy
- Simplify parsedDiffs logic by removing EMPTY_DIFF_MARKER handling
- Enable text selection functionality for code view and log view

* fix(web): fix code text selection styling and diff parsing line break issues

* fix(web): fix code text selection styling and diff parsing line break issues

Author: juanlou1217

moon/apps/web/components/ClView/components/Checks/index.tsx

@@ -209,7 +209,11 @@ const Checks = ({ cl }: { cl: number }) => {
     }
 
     if (status === 'success' && logsMap[buildid] && eventSourcesRef.current[buildid]) {
-      return <LazyLog extraLines={1} text={logsMap[buildid]} stream enableSearch caseInsensitive follow />
+      return (
+        <div className='h-full select-text [&_*]:select-text'>
+          <LazyLog extraLines={1} text={logsMap[buildid]} stream enableSearch caseInsensitive follow />
+        </div>
+      )
     }
 
     // Fallback: show select prompt

moon/apps/web/components/CodeView/BlobView/CodeContent.module.css

@@ -66,3 +66,10 @@
 .bg-blame-10 {
   background-color: rgb(61, 19, 0);
 }
+
+.codeContainer :global(*::selection),
+.blameContainer :global(*::selection),
+.previewContainer :global(*::selection) {
+  background-color: #0969da;
+  color: #fff;
+}

moon/apps/web/components/CodeView/BlobView/CodeContent.tsx

@@ -469,8 +469,8 @@ const CodeContent = ({
       <div className='flex flex-1 flex-col overflow-hidden'>
         <div style={{ flex: 1, overflow: 'auto' }}>
           <div
-            className='rounded-b-lg border border-gray-200'
-            style={{ minWidth: 'fit-content', backgroundColor: '#fff' }}
+            className={`rounded-b-lg border border-gray-200 ${styles.codeContainer}`}
+            style={{ minWidth: 'fit-content', backgroundColor: '#fff', userSelect: 'text' }}
           >
             {shikiTokens.map((line, index) => {
               return (
@@ -544,8 +544,8 @@ const CodeContent = ({
         <ContributionRecord contributors={blameData.data?.contributors} />
         <div style={{ flex: 1, overflow: 'auto' }}>
           <div
-            className='rounded-b-lg border border-gray-200'
-            style={{ minWidth: 'fit-content', backgroundColor: '#fff' }}
+            className={`rounded-b-lg border border-gray-200 ${styles.blameContainer}`}
+            style={{ minWidth: 'fit-content', backgroundColor: '#fff', userSelect: 'text' }}
           >
             {processedBlameBlocks.map((block, blockIndex) => {
               const isLastBlock = blockIndex === processedBlameBlocks.length - 1
@@ -654,7 +654,10 @@ const CodeContent = ({
     }
 
     return (
-      <div className='markdown-body overflow-auto rounded-b-lg border border-gray-200 p-8'>
+      <div
+        className={`markdown-body overflow-auto rounded-b-lg border border-gray-200 p-8 ${styles.previewContainer}`}
+        style={{ userSelect: 'text' }}
+      >
         <Markdown>{fileContent}</Markdown>
       </div>
     )

moon/apps/web/components/DiffView/FileDiff.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import { type FileDiffMetadata } from '@pierre/diffs'
+import { type ChangeTypes, type FileDiffMetadata } from '@pierre/diffs'
 import { FileDiff as PierreFileDiff } from '@pierre/diffs/react'
 import { Virtuoso } from 'react-virtuoso'
 
@@ -100,14 +100,35 @@ export default function FileDiff({
     setExpandedMap(Object.fromEntries(diffFiles.map((f) => [f.path, false])))
   }, [diffFiles])
 
+  const getChangeTypeMessage = (changeType: ChangeTypes | null): string | null => {
+    switch (changeType) {
+      case 'new':
+        return 'This file was added.'
+      case 'deleted':
+        return 'This file was deleted.'
+      case 'rename-pure':
+        return 'This file was renamed.'
+      case 'rename-changed':
+        return 'This file was renamed and modified.'
+      default:
+        return null
+    }
+  }
+
   const RenderDiffView = ({
-    file,
-    fileDiffMetadata
+    fileDiffMetadata,
+    changeType,
+    isBinary,
+    hasContent
   }: {
-    file: { path: string; lang: string; diff: string }
     fileDiffMetadata: FileDiffMetadata | null
+    changeType: ChangeTypes | null
+    isBinary: boolean
+    hasContent: boolean
   }) => {
-    if (fileDiffMetadata) {
+    const message = getChangeTypeMessage(changeType)
+
+    if (fileDiffMetadata && hasContent) {
       return (
         <PierreFileDiff
           fileDiff={fileDiffMetadata}
@@ -118,25 +139,44 @@ export default function FileDiff({
             overflow: 'wrap',
             disableFileHeader: true,
             unsafeCSS: `
-              :host { overflow-x: hidden !important; }
-              * { overflow-x: hidden !important; }
-              ::-webkit-scrollbar { display: none !important; }
-            `
+                :host { overflow-x: hidden !important; }
+                * { overflow-x: hidden !important; }
+                ::-webkit-scrollbar { display: none !important; }
+                code { padding: 0 !important; }
+              `
           }}
           style={{ '--diffs-font-size': '14px' } as React.CSSProperties}
         />
       )
-    } else if (file.lang === 'binary') {
-      return <div className='p-2 text-center'>Binary file</div>
-    } else if (file.diff === 'EMPTY_DIFF_MARKER\n') {
-      return <div className='p-2 text-center'>No change</div>
+    }
+
+    if (isBinary) {
+      return (
+        <div className='p-4 text-center'>
+          <div>Binary file</div>
+          {message && <div className='mt-1 text-sm text-gray-600'>{message}</div>}
+        </div>
+      )
+    }
+
+    if (message) {
+      return (
+        <div className='p-4 text-center'>
+          <div>Load Diff</div>
+          <div className='mt-1 text-sm text-gray-600'>{message}</div>
+        </div>
+      )
+    }
+
+    if (!hasContent) {
+      return <div className='p-4 text-center text-gray-500'>No content change</div>
     }
 
     return null
   }
 
   const DiffItemComponent = (index: number) => {
-    const { file, fileDiffMetadata, stats } = parsedFiles[index]
+    const { file, fileDiffMetadata, stats, changeType, isBinary, hasContent } = parsedFiles[index]
     const isExpanded = expandedMap[file.path]
 
     return (
@@ -168,7 +208,14 @@ export default function FileDiff({
         </div>
 
         <div className='copyable-text'>
-          {isExpanded && <RenderDiffView file={file} fileDiffMetadata={fileDiffMetadata} />}
+          {isExpanded && (
+            <RenderDiffView
+              fileDiffMetadata={fileDiffMetadata}
+              changeType={changeType}
+              isBinary={isBinary}
+              hasContent={hasContent}
+            />
+          )}
         </div>
       </div>
     )

moon/apps/web/components/DiffView/parsedDiffs.ts

@@ -1,4 +1,4 @@
-import { parsePatchFiles, type FileDiffMetadata } from '@pierre/diffs'
+import { parsePatchFiles, type ChangeTypes, type FileDiffMetadata } from '@pierre/diffs'
 
 import { getLanguageForFile } from '@/utils/shikiLanguageFallback'
 
@@ -11,29 +11,17 @@ export interface ParsedFile {
   file: { path: string; lang: string; diff: string }
   fileDiffMetadata: FileDiffMetadata | null
   stats: { additions: number; deletions: number }
+  changeType: ChangeTypes | null
+  isBinary: boolean
+  hasContent: boolean
 }
 
 export function parsedDiffs(diffText: DiffItem[]): { path: string; lang: string; diff: string }[] {
   if (diffText.length < 1) return []
 
   return diffText.map((block) => {
     const isBinary = /Binary files.*differ/.test(block.data)
-
-    let diff = block.data
-
-    if (isBinary) {
-      /* empty */
-    } else {
-      const isEmptyDiff = !block.data.includes('@@')
-
-      if (isEmptyDiff) {
-        diff = 'EMPTY_DIFF_MARKER'
-      }
-    }
-
-    if (!diff.endsWith('\n')) {
-      diff += '\n'
-    }
+    const diff = block.data.endsWith('\n') ? block.data : block.data + '\n'
 
     return {
       path: block.path,
@@ -45,31 +33,29 @@ export function parsedDiffs(diffText: DiffItem[]): { path: string; lang: string;
 
 export function generateParsedFiles(diffFiles: { path: string; lang: string; diff: string }[]): ParsedFile[] {
   return diffFiles.map((file) => {
-    if (file.lang === 'binary' || file.diff === 'EMPTY_DIFF_MARKER\n') {
-      return {
-        file,
-        fileDiffMetadata: null,
-        stats: { additions: 0, deletions: 0 }
-      }
-    }
-
     let fileDiffMetadata: FileDiffMetadata | null = null
     let additions = 0
     let deletions = 0
+    let changeType: ChangeTypes | null = null
+    const isBinary = file.lang === 'binary'
+    let hasContent = false
 
     try {
       const patches = parsePatchFiles(file.diff)
 
       if (patches.length > 0 && patches[0].files.length > 0) {
-        fileDiffMetadata = patches[0].files[0]
+        const parsed = patches[0].files[0]
 
-        if (!fileDiffMetadata.name && file.path) {
-          fileDiffMetadata = { ...fileDiffMetadata, name: file.path }
-        }
+        changeType = parsed.type || null
+        hasContent = parsed.hunks.length > 0
 
         const safeLang = getLanguageForFile(file.path)
 
-        fileDiffMetadata = { ...fileDiffMetadata, lang: safeLang as any }
+        fileDiffMetadata = {
+          ...parsed,
+          name: parsed.name || file.path,
+          lang: safeLang as any
+        }
       }
 
       if (fileDiffMetadata) {
@@ -83,6 +69,6 @@ export function generateParsedFiles(diffFiles: { path: string; lang: string; dif
       console.error('error parsing diff:', e)
     }
 
-    return { file, fileDiffMetadata, stats: { additions, deletions } }
+    return { file, fileDiffMetadata, stats: { additions, deletions }, changeType, isBinary, hasContent }
   })
 }

moon/apps/web/types/pierre-diffs.d.ts

@@ -1,4 +1,6 @@
 declare module '@pierre/diffs' {
+  export type ChangeTypes = 'change' | 'rename-pure' | 'rename-changed' | 'new' | 'deleted'
+
   export interface FileDiffHunk {
     header: string
     additionCount: number
@@ -15,6 +17,7 @@ declare module '@pierre/diffs' {
     name: string
     oldName?: string
     lang?: string
+    type?: ChangeTypes
     hunks: FileDiffHunk[]
   }