Merge pull request #136 from flowforfrank/develop

Add support for showing comments associated with files

src/components/Node.tsx

@@ -38,6 +38,10 @@ export function Node({
   style,
   onClick,
 }: Props) {
+  const {
+    value: { commentToggle },
+  } = useConfigs()
+
   return (
     <a
       href={node.url}
@@ -60,6 +64,7 @@ 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/components/settings/SidebarSettings.tsx

@@ -102,6 +102,14 @@ export function SidebarSettings(props: React.PropsWithChildren<Props>) {
           },
         }}
       />
+      <SimpleToggleField
+        field={{
+          key: 'commentToggle',
+          label: 'Toggle comments',
+          tooltip:
+            'Show number of comments next to file names.',
+        }}
+      />
     </SettingsSection>
   )
 }

src/global.d.ts

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

src/platforms/GitHub/API.ts

@@ -106,6 +106,16 @@ export async function getPullTreeData(
   return await request(url, { accessToken })
 }
 
+export async function getPullComments(
+  userName: string,
+  repoName: string,
+  pullId: string,
+  accessToken?: string,
+): Promise<GitHubAPI.PullComments> {
+  const url = `https://${API_ENDPOINT}/repos/${userName}/${repoName}/pulls/${pullId}/comments`
+  return await request(url, { accessToken })
+}
+
 export async function getPullPageDocument(
   userName: string,
   repoName: string,

src/platforms/GitHub/Request.d.ts

@@ -35,7 +35,12 @@ declare namespace GitHubAPI {
     changed_files: number
   }
 
+  type PullComment = {
+    path: string
+  }
+
   type PullTreeData = PullTreeItem[]
+  type PullComments = PullComment[]
 
   type MetaData = {
     name: string

src/platforms/GitHub/index.ts

@@ -177,9 +177,10 @@ export const GitHub: Platform = {
         GITHUB_API_RESPONSE_LENGTH_LIMIT / GITHUB_API_PAGED_RESPONSE_LENGTH_LIMIT,
       )
       let page = 1
-      const [pullData, treeData] = await Promise.all([
+      const [pullData, treeData, commentData] = await Promise.all([
         API.getPullData(userName, repoName, pullId, accessToken),
         API.getPullTreeData(userName, repoName, pullId, page, accessToken),
+        API.getPullComments(userName, repoName, pullId, accessToken),
       ])
 
       const count = pullData.changed_files
@@ -207,6 +208,7 @@ export const GitHub: Platform = {
           window.location.search
         }#${creator(item.filename) || ''}`,
         sha: item.sha,
+        comments: commentData?.filter(comment => item.filename === comment.path).length,
       }))
 
       const root = processTree(nodes)

src/styles/index.scss

@@ -503,6 +503,14 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
           &.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);
@@ -574,6 +582,21 @@ $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);
+          }
+
           .go-to-button,
           .find-in-folder-button {
             @include icon-button();

src/utils/configHelper.ts

@@ -14,6 +14,7 @@ export type Config = {
   toggleButtonContent: 'logo' | 'octoface'
   recursiveToggleFolder: 'shift' | 'alt'
   searchMode: SearchMode
+  commentToggle: boolean
 }
 
 enum configKeys {
@@ -29,6 +30,7 @@ enum configKeys {
   toggleButtonContent = 'toggleButtonContent',
   recursiveToggleFolder = 'recursiveToggleFolder',
   searchMode = 'searchMode',
+  commentToggle = 'commentToggle',
 }
 
 const defaultConfigs: Config = {
@@ -44,6 +46,7 @@ const defaultConfigs: Config = {
   toggleButtonContent: 'logo',
   recursiveToggleFolder: 'shift',
   searchMode: 'fuzzy',
+  commentToggle: true,
 }
 
 const configKeyArray = Object.values(configKeys)
@@ -85,6 +88,7 @@ async function migrateConfig() {
           'copySnippetButton',
           'intelligentToggle',
           'icons',
+          'commentToggle',
         ])
         if (config && (!('configVersion' in config) || config.configVersion < version)) {
           await storageHelper.set({ platform_GitHub: config, configVersion: version })