refactor: minor enhancements on file comments

src/components/FileExplorer.tsx

@@ -46,7 +46,7 @@ const RawFileExplorer: React.FC<Props & ConnectorState> = function RawFileExplor
     searched,
   } = props
   const {
-    value: { accessToken, compressSingletonFolder, searchMode },
+    value: { accessToken, compressSingletonFolder, searchMode, commentToggle },
   } = useConfigs()
 
   const onSearch = React.useCallback(
@@ -104,18 +104,26 @@ const RawFileExplorer: React.FC<Props & ConnectorState> = function RawFileExplor
           <Icon type="search" />
         </button>
       ) : undefined
+    const renderFileCommentAmounts = (node: TreeNode): React.ReactNode =>
+      node.comments !== undefined &&
+      node.comments > 0 && (
+        <span className={'node-item-comment'}>
+          <Icon type={'comment'} /> {node.comments}
+        </span>
+      )
 
     const renders: ((node: TreeNode) => React.ReactNode)[] = []
+    if (commentToggle) renders.push(renderFileCommentAmounts)
     if (searchMode === 'fuzzy') renders.push(renderFindInFolderButton)
     if (searched) renders.push(renderGoToButton)
 
     return renders.length
       ? node => renders.map((render, i) => <React.Fragment key={i}>{render(node)}</React.Fragment>)
       : undefined
-  }, [goTo, onSearch, searched, searchMode])
+  }, [goTo, onSearch, searched, searchMode, commentToggle])
 
   const renderLabelText = React.useCallback(
-    node => searchModes[searchMode].renderNodeLabelText(node, searchKey),
+    (node: TreeNode) => searchModes[searchMode].renderNodeLabelText(node, searchKey),
     [searchKey, searchMode],
   )
 

src/components/Icon.tsx

@@ -2,6 +2,7 @@ import {
   ChevronDownIcon as ChevronDown,
   ChevronRightIcon as ChevronRight,
   ClockIcon as Clock,
+  CommentIcon as Comment,
   FileCodeIcon as FileCode,
   FileIcon as File,
   FileMediaIcon as FileMedia,
@@ -28,6 +29,11 @@ function getSVGIconComponent(
   name: string
 } {
   switch (type) {
+    case 'comment':
+      return {
+        IconComponent: Comment,
+        name: 'Comment',
+      }
     case 'search':
       return {
         IconComponent: Search,

src/components/Node.tsx

@@ -38,10 +38,6 @@ export function Node({
   style,
   onClick,
 }: Props) {
-  const {
-    value: { commentToggle },
-  } = useConfigs()
-
   return (
     <a
       href={node.url}
@@ -64,7 +60,6 @@ export function Node({
       <div className={'node-item-label'}>
         <NodeItemIcon node={node} open={expanded} loading={loading} />
         {renderLabelText(node)}
-        {(commentToggle && !!node.comments) && <span className={'node-item-comment'}>💬 {node.comments}</span>}
       </div>
       {renderActions && <div>{renderActions(node)}</div>}
     </a>

src/global.d.ts

@@ -14,7 +14,7 @@ type TreeNode = {
   url?: string
   sha?: string
   accessDenied?: boolean
-  comments: number
+  comments?: number
 }
 
 type IO<T, ChangeT = T> = {

src/platforms/GitHub/Request.d.ts

@@ -37,6 +37,13 @@ declare namespace GitHubAPI {
 
   type PullComment = {
     path: string
+    pull_request_review_id: number
+    id: number
+    node_id: string
+    diff_hunk: string
+    body: string
+    html_url: string
+    author_association: string
   }
 
   type PullTreeData = PullTreeItem[]

src/styles/index.scss

@@ -500,17 +500,15 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
 
         .node-item {
           background: var(--gitako-bg-primary);
+          &:hover {
+            text-decoration: initial; // revert underline from .gitako-side-bar a:hover
+            .node-item-label {
+              text-decoration: underline; // apply underline like .gitako-side-bar a:hover
+            }
+          }
           &.focused,
           &:hover {
             background: var(--gitako-bg-tertiary);
-
-            .node-item-comment {
-              background: var(--gitako-bg-tertiary);
-              background: -moz-linear-gradient(left, transparent 0%, var(--gitako-bg-tertiary) 15%, var(--gitako-bg-tertiary) 100%);
-              background: -webkit-linear-gradient(left, transparent 0%, var(--gitako-bg-tertiary) 15%, var(--gitako-bg-tertiary) 100%);
-              background: linear-gradient(to right, transparent 0% ,var(--gitako-bg-tertiary) 15%, var(--gitako-bg-tertiary) 100%);
-              filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#161b22', endColorstr='#161b22', GradientType=1);
-            }
           }
           &:active {
             background: var(--gitako-bg-secondary);
@@ -583,18 +581,12 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
           }
 
           .node-item-comment {
-            position: absolute;
-            top: 0;
-            right: 0;
-            height: 36px;
-            line-height: 37px;
-            padding: 0 10px;
-            color: var(--gitako-auto-gray-5);
-            background: var(--gitako-bg-primary);
-            background: -moz-linear-gradient(left, transparent 0%, var(--gitako-bg-primary) 15%, var(--gitako-bg-primary) 100%);
-            background: -webkit-linear-gradient(left, transparent 0%, var(--gitako-bg-primary) 15%, var(--gitako-bg-primary) 100%);
-            background: linear-gradient(to right, transparent 0%, var(--gitako-bg-primary) 15%, var(--gitako-bg-primary) 100%);
-            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000d1117', endColorstr='#0d1117', GradientType=1);
+            padding: 0 4px;
+            color: var(--gitako-text-tertiary);
+
+            .octicon-wrapper {
+              margin: 0; // make it closer to the comment amount label
+            }
           }
 
           .go-to-button,