feat: make branch name clickable

src/components/MetaBar.tsx

@@ -2,6 +2,8 @@ import { BranchName, Breadcrumb, Flex, Text } from '@primer/components'
 import { GitBranchIcon } from '@primer/octicons-react'
 import { platform } from 'platforms'
 import * as React from 'react'
+import { isOpenInNewWindowClick } from 'utils/general'
+import { loadWithPJAX } from 'utils/hooks/usePJAX'
 
 type Props = {
   metaData: MetaData
@@ -9,7 +11,7 @@ type Props = {
 
 export function MetaBar({ metaData }: Props) {
   const { userName, repoName, branchName } = metaData
-  const { repoUrl, userUrl } = platform.resolveUrlFromMetaData(metaData)
+  const { repoUrl, userUrl, branchUrl } = platform.resolveUrlFromMetaData(metaData)
   return (
     <>
       <Breadcrumb className={'user-and-repo'}>
@@ -22,7 +24,17 @@ export function MetaBar({ metaData }: Props) {
         <div className={'octicon-wrapper'}>
           <GitBranchIcon size="small" />
         </div>
-        <BranchName as="span" className={'branch-name'}>
+        <BranchName
+          href={branchUrl}
+          as="a"
+          className={'branch-name'}
+          onClick={e => {
+            if (isOpenInNewWindowClick(e)) return
+
+            e.preventDefault()
+            loadWithPJAX(branchUrl)
+          }}
+        >
           {branchName || '...'}
         </BranchName>
       </Flex>

src/components/Node.tsx

@@ -1,7 +1,7 @@
 import { useConfigs } from 'containers/ConfigsContext'
 import * as React from 'react'
 import { cx } from 'utils/cx'
-import { OperatingSystems, os } from 'utils/general'
+import { isOpenInNewWindowClick } from 'utils/general'
 import { getFileIconURL, getFolderIconURL } from 'utils/parseIconMapCSV'
 import { Icon } from './Icon'
 
@@ -43,14 +43,7 @@ export function Node({
     <a
       href={node.url}
       onClick={event => {
-        if (
-          (os === OperatingSystems.macOS && event.metaKey) ||
-          (os === OperatingSystems.Linux && event.ctrlKey) ||
-          (os === OperatingSystems.Windows && event.ctrlKey)
-        ) {
-          // The default behavior, open in new tab
-          return
-        }
+        if (isOpenInNewWindowClick(event)) return
 
         onClick(event, node)
       }}

src/platforms/GitHub/index.ts

@@ -142,10 +142,15 @@ export const GitHub: Platform = {
   async getDefaultBranchName({ userName, repoName }, accessToken) {
     return (await API.getRepoMeta(userName, repoName, accessToken)).default_branch
   },
-  resolveUrlFromMetaData({ userName, repoName }) {
+  resolveUrlFromMetaData({ userName, repoName, branchName }) {
+    const repoUrl = `https://${window.location.host}/${userName}/${repoName}`
+    const userUrl = `https://${window.location.host}/${userName}`
+    const pullId = URLHelper.isInPullPage()
+    const branchUrl = pullId ? `${repoUrl}/pull/${pullId}` : `${repoUrl}/tree/${branchName}`
     return {
-      repoUrl: `https://${window.location.host}/${userName}/${repoName}`,
-      userUrl: `https://${window.location.host}/${userName}`,
+      repoUrl,
+      userUrl,
+      branchUrl,
     }
   },
   async getTreeData(metaData, path = '/', recursive, accessToken) {

src/platforms/Gitea/index.ts

@@ -105,10 +105,14 @@ export const Gitea: Platform = {
     const data = await API.getRepoMeta(userName, repoName, accessToken)
     return data.default_branch
   },
-  resolveUrlFromMetaData({ userName, repoName }) {
+  resolveUrlFromMetaData({ userName, repoName, branchName }) {
+    const repoUrl = `${window.location.protocol}//${window.location.host}/${userName}/${repoName}`
+    const userUrl = `${window.location.protocol}//${window.location.host}/${userName}`
+    const branchUrl = `${repoUrl}/src/branch/${branchName}`
     return {
-      repoUrl: `${window.location.protocol}//${window.location.host}/${userName}/${repoName}`,
-      userUrl: `${window.location.protocol}//${window.location.host}/${userName}`,
+      repoUrl,
+      userUrl,
+      branchUrl,
     }
   },
   async getTreeData(metaData, path, recursive, accessToken) {

src/platforms/Gitee/index.ts

@@ -102,10 +102,14 @@ export const Gitee: Platform = {
     const data = await API.getRepoMeta(userName, repoName, accessToken)
     return data.default_branch
   },
-  resolveUrlFromMetaData({ userName, repoName }) {
+  resolveUrlFromMetaData({ userName, repoName, branchName }) {
+    const repoUrl = `https://${window.location.host}/${userName}/${repoName}`
+    const userUrl = `https://${window.location.host}/${userName}`
+    const branchUrl = `${repoUrl}/tree/${branchName}`
     return {
-      repoUrl: `https://${window.location.host}/${userName}/${repoName}`,
-      userUrl: `https://${window.location.host}/${userName}`,
+      repoUrl,
+      userUrl,
+      branchUrl,
     }
   },
   async getTreeData(metaData, path, recursive, accessToken) {

src/platforms/platform.d.ts

@@ -7,9 +7,10 @@ type Platform = {
     metaData: Pick<MetaData, 'userName' | 'repoName'>,
     accessToken?: string,
   ): Promise<string>
-  resolveUrlFromMetaData(metaData: Pick<MetaData, 'userName' | 'repoName'>): {
+  resolveUrlFromMetaData(metaData: MetaData): {
     userUrl: string
     repoUrl: string
+    branchUrl: string
   }
   getTreeData(
     metaData: Pick<MetaData, 'userName' | 'repoName' | 'branchName'>,

src/utils/general.ts

@@ -192,3 +192,11 @@ export function createPromiseQueue() {
     },
   }
 }
+
+export function isOpenInNewWindowClick(event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) {
+  return (
+    (os === OperatingSystems.macOS && event.metaKey) ||
+    (os === OperatingSystems.Linux && event.ctrlKey) ||
+    (os === OperatingSystems.Windows && event.ctrlKey)
+  )
+}