feat: enhance PR file comments stat

src/components/FileExplorer.tsx

@@ -118,12 +118,16 @@ const RawFileExplorer: React.FC<Props & ConnectorState> = function RawFileExplor
         </button>
       ) : undefined
     const renderFileCommentAmounts = (node: TreeNode): React.ReactNode =>
-      node.comments !== undefined &&
-      node.comments > 0 && (
-        <span className={'node-item-comment'}>
-          <Icon type={'comment'} /> {node.comments > 9 ? '9+' : node.comments}
+      node.comments?.active ? (
+        <span
+          className={'node-item-comment'}
+          title={`${node.comments.active + node.comments.resolved} comments, ${
+            node.comments.active
+          } active, ${node.comments.resolved} resolved`}
+        >
+          <Icon type={'comment'} /> {node.comments.active > 9 ? '9+' : node.comments.active}
         </span>
-      )
+      ) : null
     const renderFileStatus = ({ diff }: TreeNode): React.ReactNode =>
       diff && (
         <span
@@ -135,8 +139,8 @@ const RawFileExplorer: React.FC<Props & ConnectorState> = function RawFileExplor
       )
 
     const renders: ((node: TreeNode) => React.ReactNode)[] = []
-    if (commentToggle) renders.push(renderFileCommentAmounts)
     renders.push(renderFileStatus)
+    if (commentToggle) renders.push(renderFileCommentAmounts)
     if (searchMode === 'fuzzy') renders.push(renderFindInFolderButton)
     if (searched) renders.push(renderGoToButton)
 

src/global.d.ts

@@ -16,7 +16,10 @@ type TreeNode = {
   url?: string
   sha?: string
   accessDenied?: boolean
-  comments?: number
+  comments?: {
+    active: number,
+    resolved: number,
+  }
   diff?: {
     status: 'modified' | 'added' | 'removed' | 'renamed'
     additions: number

src/platforms/GitHub/Request.d.ts

@@ -37,6 +37,7 @@ declare namespace GitHubAPI {
 
   type PullComment = {
     path: string
+    position: number | null
     pull_request_review_id: number
     id: number
     node_id: string

src/platforms/GitHub/index.ts

@@ -1,6 +1,7 @@
 import { useConfigs } from 'containers/ConfigsContext'
 import { GITHUB_OAUTH } from 'env'
 import { Base64 } from 'js-base64'
+import { run } from 'utils/general'
 import { resolveGitModules } from 'utils/gitSubmodule'
 import { sortFoldersToFront } from 'utils/treeParser'
 import * as API from './API'
@@ -330,7 +331,14 @@ async function getPullRequestTreeData(
       name: filename?.replace(/^.*\//, '') || '',
       url: `${urlMainPart}${formatHash(getFileElementHash(filename))}`,
       sha: sha,
-      comments: commentData?.filter(comment => filename === comment.path).length,
+      comments: run(() => {
+        const comments = commentData?.filter(comment => filename === comment.path)
+        if (comments?.length)
+          return {
+            active: comments.filter(comment => comment.position !== null).length,
+            resolved: comments.filter(comment => comment.position === null).length,
+          }
+      }),
       diff: {
         status,
         additions,

src/styles/index.scss

@@ -738,7 +738,7 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
               color: var(--gitako-fg-muted);
 
               .octicon-wrapper {
-                margin: 0; // make it closer to the comment amount label
+                margin: 2px; // make it closer to the comment amount label
               }
             }
 
@@ -792,7 +792,9 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
               .diff-stat-text {
                 display: inline-block;
                 white-space: nowrap;
-                font-family: 'Cascadia Code', 'Courier New', Courier, monospace; // Use some commonly available monospace font
+                // Use some commonly available monospace font, the leading ones are copied from GitHub
+                font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono,
+                  monospace, 'Cascadia Code', 'Courier New', Courier;
                 .additions {
                   color: var(--gitako-success-emphasis);
                 }