feat: show diff in text

src/components/FileExplorer/DiffStatText.tsx

@@ -1,6 +1,14 @@
 import * as React from 'react'
 import { Icon } from '../Icon'
 
+const iconMap = {
+  added: 'diffAdded',
+  ignored: 'diffIgnored',
+  modified: 'diffModified',
+  removed: 'diffRemoved',
+  renamed: 'diffRenamed',
+}
+
 export function DiffStatText({
   diff: { status, additions, deletions },
 }: {
@@ -8,27 +16,10 @@ export function DiffStatText({
 }) {
   return (
     <span className={'diff-stat-text'}>
-      {status !== 'modified' && (
-        <Icon
-          className={status}
-          type={
-            {
-              added: 'diffAdded',
-              ignored: 'diffIgnored',
-              // modified: 'diffModified', // hide modified icon
-              removed: 'diffRemoved',
-              renamed: 'diffRenamed',
-            }[status]
-          }
-        />
-      )}
-      {additions > 0 && (
-        <span className={'additions'}>{status === 'modified' ? `+${additions}` : additions}</span>
-      )}
+      <Icon className={status} type={iconMap[status]} />
+      {additions > 0 && <span className={'additions'}>{additions}</span>}
       {additions > 0 && deletions > 0 && '/'}
-      {deletions > 0 && (
-        <span className={'deletions'}>{status === 'modified' ? `-${deletions}` : deletions}</span>
-      )}
+      {deletions > 0 && <span className={'deletions'}>{deletions}</span>}
     </span>
   )
 }

src/components/FileExplorer/hooks/useNodeRenderers.tsx

@@ -4,6 +4,7 @@ import * as React from 'react'
 import { is } from 'utils/is'
 import { Icon } from '../../Icon'
 import { SearchMode } from '../../searchModes'
+import { DiffStatText } from '../DiffStatText'
 import { DiffStatGraph } from './../DiffStatGraph'
 
 export type NodeRenderer = (node: TreeNode) => React.ReactNode
@@ -19,19 +20,22 @@ export function useNodeRenderers(allRenderers: (NodeRenderer | null | undefined)
 }
 
 export function useRenderFileStatus() {
-  function renderFileStatus({ diff }: TreeNode) {
-    return (
-      diff && (
-        <span
-          className={'node-item-diff'}
-          title={`${diff.status}, ${diff.changes} changes: +${diff.additions} & -${diff.deletions}`}
-        >
-          <DiffStatGraph diff={diff} />
-        </span>
+  const { showDiffInText } = useConfigs().value
+  return React.useCallback(
+    function renderFileStatus({ diff }: TreeNode) {
+      return (
+        diff && (
+          <span
+            className={'node-item-diff'}
+            title={`${diff.status}, ${diff.changes} changes: +${diff.additions} & -${diff.deletions}`}
+          >
+            {showDiffInText ? <DiffStatText diff={diff} /> : <DiffStatGraph diff={diff} />}
+          </span>
+        )
       )
-    )
-  }
-  return React.useMemo(() => renderFileStatus, [])
+    },
+    [showDiffInText],
+  )
 }
 
 export function useRenderFileCommentAmounts() {

src/components/settings/FileTreeSettings.tsx

@@ -76,6 +76,13 @@ export function FileTreeSettings() {
           tooltip: 'Show number of comments next to file names in Pull Requests.',
         }}
       />
+      <SimpleConfigFieldCheckbox
+        field={{
+          key: 'showDiffInText',
+          label: 'Show PR file diff in text',
+          tooltip: 'Glance diff stat in a more precise way',
+        }}
+      />
       <SimpleConfigFieldCheckbox
         field={{
           key: 'compactFileTree',

src/styles/index.scss

@@ -676,19 +676,19 @@ html[data-with-gitako-spacing='true'] {
               }
 
               .added .octicon {
-                color: var(--color-success-emphasis);
+                color: var(--color-success-fg);
               }
               .removed .octicon {
-                color: var(--color-danger-emphasis);
+                color: var(--color-danger-fg);
               }
               .renamed .octicon {
-                color: var(--color-done-emphasis);
+                color: var(--color-fg-muted);
               }
               .modified .octicon {
-                color: var(--color-accent-emphasis);
+                color: var(--color-attention-fg);
               }
               .ignored .octicon {
-                color: var(--color-neutral-emphasis);
+                color: var(--color-fg-muted);
               }
 
               .diff-stat-graph {
@@ -703,15 +703,15 @@ html[data-with-gitako-spacing='true'] {
                 }
 
                 .diff-stat-graph-no-change {
-                  background: var(--color-neutral-emphasis);
+                  background: var(--color-fg-muted);
                 }
 
                 .diff-stat-graph-addition {
-                  background: var(--color-success-emphasis);
+                  background: var(--color-success-fg);
                 }
 
                 .diff-stat-graph-deletion {
-                  background: var(--color-danger-emphasis);
+                  background: var(--color-danger-fg);
                 }
               }
 

src/utils/config/helper.ts

@@ -21,6 +21,7 @@ export type Config = {
   compactFileTree: boolean
   restoreExpandedFolders: boolean
   pjaxMode: 'native' | 'pjax-api'
+  showDiffInText: boolean
 }
 
 export type ConfigKeys = keyof Config
@@ -43,6 +44,7 @@ enum configKeys {
   compactFileTree = 'compactFileTree',
   restoreExpandedFolders = 'restoreExpandedFolders',
   pjaxMode = 'pjaxMode',
+  showDiffInText = 'showDiffInText',
 }
 
 // NOT use platform name to distinguish GHE from github.com
@@ -67,6 +69,7 @@ export const getDefaultConfigs: () => Config = () => ({
   compactFileTree: false,
   restoreExpandedFolders: true,
   pjaxMode: platformName === 'GitHub' ? 'native' : 'pjax-api', // use native on GitHub
+  showDiffInText: false,
 })
 
 const configKeyArray = Object.values(configKeys)