From d447c5bcb6e571aa49b2cdaff517897a7f8eb22a Mon Sep 17 00:00:00 2001
From: EnixCoda <enixcoda@gmail.com>
Date: Sun, 1 May 2022 18:07:55 +0800
Subject: [PATCH 01/93] refactor: update layout

---
 src/components/SideBar.tsx              |  6 +-
 src/components/settings/Footer.tsx      | 29 ++++++++
 src/components/settings/SettingsBar.tsx | 93 +++++++++----------------
 src/styles/index.scss                   | 63 ++++++++---------
 4 files changed, 96 insertions(+), 95 deletions(-)
 create mode 100644 src/components/settings/Footer.tsx

diff --git a/src/components/SideBar.tsx b/src/components/SideBar.tsx
index f2b82d5..f17f11d 100644
--- a/src/components/SideBar.tsx
+++ b/src/components/SideBar.tsx
@@ -2,7 +2,7 @@ import { AccessDeniedDescription } from 'components/AccessDeniedDescription'
 import { FileExplorer } from 'components/FileExplorer'
 import { MetaBar } from 'components/MetaBar'
 import { Portal } from 'components/Portal'
-import { SettingsBar } from 'components/settings/SettingsBar'
+import { Footer } from 'components/settings/Footer'
 import { SideBarBodyWrapper } from 'components/SideBarBodyWrapper'
 import { ToggleShowButton } from 'components/ToggleShowButton'
 import { useConfigs } from 'containers/ConfigsContext'
@@ -23,6 +23,7 @@ import { useToggleSideBarWithKeyboard } from '../utils/hooks/useToggleSideBarWit
 import { Icon } from './Icon'
 import { IIFC } from './IIFC'
 import { LoadingIndicator } from './LoadingIndicator'
+import { SettingsBarContent } from './settings/SettingsBar'
 
 export function SideBar() {
   const metaData = React.useContext(RepoContext)
@@ -206,7 +207,8 @@ export function SideBar() {
                 }
               })}
             </div>
-            <SettingsBar toggleShowSettings={toggleShowSettings} activated={showSettings} />
+            {showSettings && <SettingsBarContent toggleShow={toggleShowSettings} />}
+            <Footer toggleShowSettings={toggleShowSettings} />
           </div>
         </SideBarBodyWrapper>
       </div>
diff --git a/src/components/settings/Footer.tsx b/src/components/settings/Footer.tsx
new file mode 100644
index 0000000..b5772df
--- /dev/null
+++ b/src/components/settings/Footer.tsx
@@ -0,0 +1,29 @@
+import { Link } from '@primer/components'
+import { Icon } from 'components/Icon'
+import { VERSION } from 'env'
+import * as React from 'react'
+import { wikiLinks } from './SettingsBar'
+
+type Props = {
+  toggleShowSettings: () => void
+}
+
+export function Footer(props: Props) {
+  const { toggleShowSettings } = props
+  return (
+    <div className={'gitako-footer'}>
+      <Link
+        className={'version'}
+        fontSize={14}
+        href={wikiLinks.changeLog}
+        target={'_blank'}
+        title={'Check out new features!'}
+      >
+        {VERSION}
+      </Link>
+      <button className={'settings-button'} onClick={toggleShowSettings}>
+        <Icon type={'gear'} className={'show-settings-icon'} />
+      </button>
+    </div>
+  )
+}
diff --git a/src/components/settings/SettingsBar.tsx b/src/components/settings/SettingsBar.tsx
index 4e60491..254215a 100644
--- a/src/components/settings/SettingsBar.tsx
+++ b/src/components/settings/SettingsBar.tsx
@@ -1,6 +1,4 @@
-import { Link } from '@primer/components'
 import { Icon } from 'components/Icon'
-import { VERSION } from 'env'
 import { platform } from 'platforms'
 import { GitHub } from 'platforms/GitHub'
 import * as React from 'react'
@@ -21,42 +19,42 @@ export const wikiLinks = {
   createAccessToken: `${WIKI_HOME_LINK}/Access-token-for-Gitako`,
 }
 
-type Props = {
-  activated: boolean
-  toggleShowSettings: () => void
-}
+const moreFields: SimpleField<'copyFileButton' | 'copySnippetButton' | 'codeFolding'>[] =
+  platform === GitHub
+    ? [
+        {
+          key: 'codeFolding',
+          label: 'Fold source code button',
+          wikiLink: wikiLinks.codeFolding,
+          tooltip: `Read more in Gitako's Wiki`,
+        },
+        {
+          key: 'copyFileButton',
+          label: 'Copy file button',
+          wikiLink: wikiLinks.copyFileButton,
+          tooltip: `Read more in Gitako's Wiki`,
+        },
+        {
+          key: 'copySnippetButton',
+          label: 'Copy snippet button',
+          wikiLink: wikiLinks.copySnippet,
+          tooltip: `Read more in Gitako's Wiki`,
+        },
+      ]
+    : []
 
-function SettingsBarContent() {
+export function SettingsBarContent({ toggleShow }: { toggleShow: () => void }) {
   const useReloadHint = useStateIO<React.ReactNode>('')
   const { value: reloadHint } = useReloadHint
 
-  const moreFields: SimpleField<'copyFileButton' | 'copySnippetButton'|'codeFolding'>[] =
-    platform === GitHub
-      ? [
-          {
-            key: 'codeFolding',
-            label: 'Fold source code button',
-            wikiLink: wikiLinks.codeFolding,
-            tooltip: `Read more in Gitako's Wiki`,
-          },
-          {
-            key: 'copyFileButton',
-            label: 'Copy file button',
-            wikiLink: wikiLinks.copyFileButton,
-            tooltip: `Read more in Gitako's Wiki`,
-          },
-          {
-            key: 'copySnippetButton',
-            label: 'Copy snippet button',
-            wikiLink: wikiLinks.copySnippet,
-            tooltip: `Read more in Gitako's Wiki`,
-          },
-        ]
-      : []
-
   return (
-    <>
-      <h2 className={'gitako-settings-bar-title'}>Settings</h2>
+    <div className={'gitako-settings-bar'}>
+      <div className={'gitako-settings-bar-header'}>
+        <h2 className={'gitako-settings-bar-title'}>Settings</h2>
+        <button className={'settings-button'} onClick={toggleShow}>
+          <Icon type={'chevron-down'} className={'hide-settings-icon'} />
+        </button>
+      </div>
       <div className={'gitako-settings-bar-content'}>
         <div className={'shadow-shelter'} />
         <AccessTokenSettings />
@@ -83,35 +81,6 @@ function SettingsBarContent() {
           </a>
         </SettingsSection>
       </div>
-    </>
-  )
-}
-
-export function SettingsBar(props: Props) {
-  const { toggleShowSettings, activated } = props
-  return (
-    <div className={'gitako-settings-bar'}>
-      {activated && <SettingsBarContent />}
-      <div className={'header-row'}>
-        <Link
-          className={'version'}
-          fontSize={14}
-          href={wikiLinks.changeLog}
-          target={'_blank'}
-          title={'Check out new features!'}
-        >
-          {VERSION}
-        </Link>
-        <div className={'header-right'}>
-          <button className={'settings-button'} onClick={toggleShowSettings}>
-            {activated ? (
-              <Icon type={'chevron-down'} className={'hide-settings-icon'} />
-            ) : (
-              <Icon type={'gear'} className={'show-settings-icon'} />
-            )}
-          </button>
-        </div>
-      </div>
     </div>
   )
 }
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 60570e5..2ce62fb 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -476,6 +476,7 @@ $minimal-z-index: max(
         padding: 6px 10px;
         flex-shrink: 0;
         position: relative; // prevent overlap by outline of other elements
+        border-bottom: 1px solid var(--gitako-border-default);
 
         .user-and-repo {
           display: inline; // would be override by CSS rule of section from @primer/css
@@ -595,9 +596,7 @@ $minimal-z-index: max(
           .search-input {
             width: 100%;
             box-shadow: none; // stay low
-            border-width: 1px 0 1px 0; // remove border on left&right to make UI clear
-            border-color: var(--gitako-border-default);
-            border-radius: 0; // its rounded corner not match with nearby elements
+            border: none;
             color: var(--gitako-fg-default);
             background: var(--gitako-bg-default);
             padding-right: 40px; // save space for actions
@@ -646,6 +645,7 @@ $minimal-z-index: max(
           position: relative;
           flex: 1;
           overflow: hidden;
+          border-top: 1px solid var(--gitako-border-default);
 
           // Put this inside files will help files to get proper size derived from parents, regardless of its content size
           .magic-size-container {
@@ -865,18 +865,23 @@ $minimal-z-index: max(
     }
 
     .#{$name}-settings-bar {
-      z-index: 2;
       background: var(--gitako-bg-subtle);
       display: flex;
       flex-direction: column;
-      max-height: calc(100vh - 120px);
-      &-title {
+      max-height: calc(100vh - 240px);
+      min-height: 240px;
+
+      &-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: flex-start;
         border-top: 1px solid var(--gitako-border-muted);
         padding: 10px;
         box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.2), 0 3px 4px 0 rgba(0, 0, 0, 0.14),
           0 3px 3px -2px rgba(0, 0, 0, 0.12);
         z-index: 1;
       }
+
       &-content {
         padding: 10px 10px;
         flex: 1;
@@ -986,35 +991,31 @@ $minimal-z-index: max(
           @include input();
         }
       }
-      .header-row {
-        flex-shrink: 0;
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        padding: 2px 6px 2px 10px;
-        border-top: 1px solid var(--gitako-border-muted);
+    }
 
-        .version {
-          color: var(--gitako-fg-muted);
-        }
+    .gitako-footer {
+      flex-shrink: 0;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 2px 6px 2px 10px;
+      border-top: 1px solid var(--gitako-border-muted);
 
-        .header-right {
-          display: flex;
-          align-items: center;
-          user-select: none;
-        }
+      .version {
+        color: var(--gitako-fg-muted);
+      }
+    }
 
-        .settings-button {
-          @include icon-button();
-          $size: 32px;
-          width: $size;
-          height: $size;
-          border-radius: $size;
+    .settings-button {
+      @include icon-button();
+      $size: 32px;
+      width: $size;
+      height: $size;
+      border-radius: $size;
+      user-select: none;
 
-          .octicon-wrapper {
-            width: 18px;
-          }
-        }
+      .octicon-wrapper {
+        width: 18px;
       }
     }
   }

From c17da0f1f232d9e103c7c02639adaa6b486103d4 Mon Sep 17 00:00:00 2001
From: EnixCoda <enixcoda@gmail.com>
Date: Sun, 1 May 2022 23:50:45 +0800
Subject: [PATCH 02/93] chore: adjust borders

---
 src/styles/index.scss | 25 +++++++++++++++++++------
 1 file changed, 19 insertions(+), 6 deletions(-)

diff --git a/src/styles/index.scss b/src/styles/index.scss
index 2ce62fb..33abe32 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -262,10 +262,23 @@ $minimal-z-index: max(
   display: none;
 }
 
+@mixin flex($justify: center, $align: center, $inline: true) {
+  @if $inline {
+    display: inline-flex;
+  } @else {
+    display: flex;
+  }
+
+  @if $justify {
+    justify-content: $justify;
+  }
+  @if $align {
+    align-items: $align;
+  }
+}
+
 @mixin flex-center {
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
+  @include flex();
 }
 
 @mixin icon-button(
@@ -551,7 +564,6 @@ $minimal-z-index: max(
         width: 100%;
         height: 100%;
         @include flex-center();
-        border-top: 1px solid var(--gitako-border-default);
 
         .loading-indicator {
           display: flex;
@@ -596,7 +608,9 @@ $minimal-z-index: max(
           .search-input {
             width: 100%;
             box-shadow: none; // stay low
-            border: none;
+            border: none; // reset borders on other sides
+            border-bottom: 1px solid var(--gitako-border-default);
+            border-radius: 0;
             color: var(--gitako-fg-default);
             background: var(--gitako-bg-default);
             padding-right: 40px; // save space for actions
@@ -645,7 +659,6 @@ $minimal-z-index: max(
           position: relative;
           flex: 1;
           overflow: hidden;
-          border-top: 1px solid var(--gitako-border-default);
 
           // Put this inside files will help files to get proper size derived from parents, regardless of its content size
           .magic-size-container {

From 22191fc31cc8691850cc38476b7f1b3028849310 Mon Sep 17 00:00:00 2001
From: EnixCoda <enixcoda@gmail.com>
Date: Sun, 1 May 2022 23:49:35 +0800
Subject: [PATCH 03/93] feat: resolve GitHub commit page

---
 src/global.d.ts                   |  2 +-
 src/platforms/GitHub/API.ts       | 84 +++++++++++++++++++++++------
 src/platforms/GitHub/DOMHelper.ts |  5 ++
 src/platforms/GitHub/Request.d.ts | 85 +++++++++++++++++++++++++++--
 src/platforms/GitHub/URLHelper.ts | 13 +++--
 src/platforms/GitHub/index.ts     | 89 +++++++++++++++++++++++++++++--
 src/platforms/GitHub/utils.ts     | 75 ++++++++++++++++++++++++++
 7 files changed, 327 insertions(+), 26 deletions(-)
 create mode 100644 src/platforms/GitHub/utils.ts

diff --git a/src/global.d.ts b/src/global.d.ts
index 6015caa..668028f 100644
--- a/src/global.d.ts
+++ b/src/global.d.ts
@@ -3,7 +3,7 @@ type MetaData = {
   repoName: string
   defaultBranchName: string
   branchName: string
-  type?: EnumString<'tree' | 'blob' | 'pull'>
+  type?: EnumString<'tree' | 'blob' | 'pull' | 'commit'>
 }
 
 type PartialMetaData = Omit<MakeOptional<MetaData, 'branchName'>, 'defaultBranchName'>
diff --git a/src/platforms/GitHub/API.ts b/src/platforms/GitHub/API.ts
index ffa2911..3ab9af3 100644
--- a/src/platforms/GitHub/API.ts
+++ b/src/platforms/GitHub/API.ts
@@ -17,7 +17,9 @@ async function request(
   url: string,
   {
     accessToken,
+    resolveMode = 'body-json',
   }: {
+    resolveMode?: 'body-json' | 'response'
     accessToken?: string
   } = {},
 ) {
@@ -41,21 +43,28 @@ async function request(
   // True if res.status between 200~299
   // Ref: https://developer.mozilla.org/en-US/docs/Web/API/Response/ok
   if (res.ok) {
-    if (isJson) return res.json()
-    throw new Error(`Response content type is "${contentType}"`)
-  } else {
-    if (res.status === 404 || res.status === 401) throw new Error(errors.NOT_FOUND)
-    else if (res.status === 403) throw new Error(errors.API_RATE_LIMIT)
-    else if (res.status === 500) throw new Error(errors.SERVER_FAULT)
-    else if (isJson) {
-      const content = await res.json()
-      if (apiRateLimitExceeded(content)) throw new Error(errors.API_RATE_LIMIT)
-      if (isEmptyProject(content)) throw new Error(errors.EMPTY_PROJECT)
-      if (isBlockedProject(content)) throw new Error(errors.BLOCKED_PROJECT)
-      throw new Error(`Unknown message content "${content?.message}"`)
-    } else {
-      throw new Error(`Response content type is "${contentType}"`)
+    switch (resolveMode) {
+      case 'body-json': {
+        if (isJson) return res.json()
+        throw new Error(`Response content type is "${contentType}"`)
+      }
+      case 'response':
+        return res
     }
+    throw new Error(`Unknown resolve mode: ${resolveMode}`)
+  }
+
+  if (res.status === 404 || res.status === 401) throw new Error(errors.NOT_FOUND)
+  else if (res.status === 403) throw new Error(errors.API_RATE_LIMIT)
+  else if (res.status === 500) throw new Error(errors.SERVER_FAULT)
+  else if (resolveMode && isJson) {
+    const content = await res.json()
+    if (apiRateLimitExceeded(content)) throw new Error(errors.API_RATE_LIMIT)
+    if (isEmptyProject(content)) throw new Error(errors.EMPTY_PROJECT)
+    if (isBlockedProject(content)) throw new Error(errors.BLOCKED_PROJECT)
+    throw new Error(`Unknown message content "${content?.message}"`)
+  } else {
+    throw new Error(`Response content type is "${contentType}"`)
   }
 }
 
@@ -119,7 +128,7 @@ export async function getPullComments(
 export async function getPullPageDocuments(
   userName: string,
   repoName: string,
-  pullId: string, // not used
+  pullId: string,
 ): Promise<Document[]> {
   // Response of this API contains view of few files but is not complete.
   const filesDOM = await getDOM(
@@ -155,6 +164,36 @@ export async function getPullPageDocuments(
   return diffsDOMs
 }
 
+export async function getCommitPageDocuments(
+  userName: string,
+  repoName: string,
+  commitId: string,
+): Promise<Document[]> {
+  /**
+   *  <include-fragment
+   *    src="/EnixCoda/Gitako/diffs?bytes=444&amp;commentable=true&amp;commit=7de4488d7f00630512e0d494bab209004f2d4a58&amp;lines=202&amp;responsive=true&amp;sha1=022dd1736146a350f1564c40d28234973d47bafc&amp;sha2=7de4488d7f00630512e0d494bab209004f2d4a58&amp;start_entry=1&amp;sticky=false&amp;w=false"
+   *    class="diff-progressive-loader js-diff-progressive-loader mb-4 d-flex flex-items-center flex-justify-center"
+   *    data-targets="diff-file-filter.progressiveLoaders"
+   *    data-action="include-fragment-replace:diff-file-filter#refilterAfterAsyncLoad"
+   *  >
+   */
+  const fragmentSelector = 'include-fragment[data-targets="diff-file-filter.progressiveLoaders"]'
+
+  let doc = document
+  const documents: Document[] = [doc]
+  while (true) {
+    const fragment = doc.querySelector(fragmentSelector) as HTMLElement
+    if (!fragment) break
+    const src = fragment.getAttribute('src')
+    if (!src) break
+    const nextDoc = await getDOM(src)
+    documents.push(nextDoc)
+    doc = nextDoc
+  }
+
+  return documents
+}
+
 async function getDOM(url: string) {
   return new DOMParser().parseFromString(await (await fetch(url)).text(), 'text/html')
 }
@@ -185,3 +224,18 @@ export async function OAuth(code: string): Promise<string | null> {
     return null
   }
 }
+
+export async function getCommitTreeData(
+  userName: string,
+  repoName: string,
+  sha: string,
+  page: number = 1,
+  accessToken?: string,
+): Promise<Response> {
+  const search = new URLSearchParams({
+    per_page: '100',
+    page: `${page}`,
+  })
+  const url = `https://${API_ENDPOINT}/repos/${userName}/${repoName}/commits/${sha}?` + search
+  return await request(url, { accessToken, resolveMode: 'response' })
+}
diff --git a/src/platforms/GitHub/DOMHelper.ts b/src/platforms/GitHub/DOMHelper.ts
index 32478b7..0570899 100644
--- a/src/platforms/GitHub/DOMHelper.ts
+++ b/src/platforms/GitHub/DOMHelper.ts
@@ -36,6 +36,11 @@ export function getIssueTitle() {
   return title?.trim().replace(/\n/g, '')
 }
 
+export function getCommitTitle() {
+  const title = $('.commit-title')?.textContent
+  return title?.trim().replace(/\n/g, '')
+}
+
 export function getCurrentBranch(passive = false) {
   const selectedBranchButtonSelector = [
     '.repository-content #branch-select-menu summary',
diff --git a/src/platforms/GitHub/Request.d.ts b/src/platforms/GitHub/Request.d.ts
index 3ee31cb..3100962 100644
--- a/src/platforms/GitHub/Request.d.ts
+++ b/src/platforms/GitHub/Request.d.ts
@@ -15,19 +15,98 @@ declare namespace GitHubAPI {
     url: string
   }
 
-  type PullTreeItem = {
+  type User = {
+    login: string
+    id: number
+    node_id: string
+    avatar_url: string
+    gravatar_id: string
+    url: string
+    html_url: string
+    followers_url: string
+    following_url: string
+    gists_url: string
+    starred_url: string
+    subscriptions_url: string
+    organizations_url: string
+    repos_url: string
+    events_url: string
+    received_events_url: string
+    type: 'User' | string
+    site_admin: boolean
+  }
+
+  type Commit = {
+    url: string
+    author: {
+      name: string
+      email: string
+      date: string
+    }
+    committer: {
+      name: string
+      email: string
+      date: string
+    }
+    message: string
+    tree: {
+      url: string
+      sha: string
+    }
+    comment_count: number
+    verification: {
+      verified: boolean
+      reason: 'unsigned' | string
+      signature: null
+      payload: null
+    }
+  }
+
+  type CommitResponseData = {
+    url: string
+    sha: string
+    node_id: string
+    html_url: string
+    comments_url: string
+    commit: Commit
+    author: User
+    committer: User
+    parents: {
+      url: string
+      sha: string
+    }[]
+    stats: {
+      additions: number
+      deletions: number
+      total: number
+    }
+    files: CommitTreeItem[]
+  }
+
+  type CommitTreeItem = {
     additions: number
     blob_url: string
     changes: number
-    contents_url: string
     deletions: number
     filename: string
     patch: string
     raw_url: string
-    sha: string
     status: 'modified' | 'added' | 'removed' | 'renamed'
   }
 
+  type PullTreeItem = {
+    additions: number
+    blob_url: string
+    changes: number
+    deletions: number
+    filename: string
+    patch: string
+    raw_url: string
+    status: 'modified' | 'added' | 'removed' | 'renamed'
+    sha: string
+    contents_url: string
+  }
+
   type PullData = {
     state: 'open' | 'closed'
     title: string
diff --git a/src/platforms/GitHub/URLHelper.ts b/src/platforms/GitHub/URLHelper.ts
index 229317d..a98cc6f 100644
--- a/src/platforms/GitHub/URLHelper.ts
+++ b/src/platforms/GitHub/URLHelper.ts
@@ -24,7 +24,7 @@ export function parse(): Partial<Pick<MetaData, 'userName' | 'repoName' | 'type'
 // cannot handle '/' split branch name, should not use when possibly in branch page
 export function parseSHA() {
   const { type, path } = parse()
-  return type === 'blob' || type === 'tree' ? path[0] : undefined
+  return type === 'blob' || type === 'tree' || type === 'commit' ? path[0] : undefined
 }
 
 export function isInPullPage() {
@@ -32,15 +32,20 @@ export function isInPullPage() {
   return type === 'pull' ? path[0] : false
 }
 
-function isCommitPath(path: string[]) {
+export function isInCommitPage() {
+  const { type, path } = parse()
+  return type === 'commit' ? path[0] : false
+}
+
+export function isCommitPath(path: string[]) {
   return path[0] ? isCompleteCommitSHA(path[0]) : false
 }
 
-function isCompleteCommitSHA(sha: string) {
+export function isCompleteCommitSHA(sha: string) {
   return /^[abcdef0-9]{40}$/i.test(sha)
 }
 
-function isPossiblyCommitSHA(sha: string) {
+export function isPossiblyCommitSHA(sha: string) {
   return /^[abcdef0-9]+$/i.test(sha)
 }
 
diff --git a/src/platforms/GitHub/index.ts b/src/platforms/GitHub/index.ts
index e21855c..570ddba 100644
--- a/src/platforms/GitHub/index.ts
+++ b/src/platforms/GitHub/index.ts
@@ -11,6 +11,7 @@ import { useGitHubAttachCopyFileButton } from './hooks/useGitHubAttachCopyFileBu
 import { useGitHubAttachCopySnippetButton } from './hooks/useGitHubAttachCopySnippetButton'
 import { useGitHubCodeFold } from './hooks/useGitHubCodeFold'
 import * as URLHelper from './URLHelper'
+import { resolveHeaderLink } from './utils'
 export { useGitHubCodeFold } from './hooks/useGitHubCodeFold'
 
 function processTree(tree: TreeNode[]): TreeNode {
@@ -131,6 +132,8 @@ export const GitHub: Platform = {
     let branchName
     if (URLHelper.isInPullPage()) {
       branchName = DOMHelper.getIssueTitle()
+    } else if (URLHelper.isInCommitPage()) {
+      branchName = DOMHelper.getCommitTitle() || metaFromURL.path[0]
     } else if (
       DOMHelper.isInCodePage() &&
       !['releases', 'tags'].includes(type || '') // resolve sentry issue #-CK
@@ -153,7 +156,12 @@ export const GitHub: Platform = {
     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}`
+    const commitId = URLHelper.isInCommitPage()
+    const branchUrl = pullId
+      ? `${repoUrl}/pull/${pullId}`
+      : commitId && URLHelper.isPossiblyCommitSHA(commitId)
+      ? `${repoUrl}/tree/${commitId}`
+      : `${repoUrl}/tree/${branchName}`
     return {
       repoUrl,
       userUrl,
@@ -165,14 +173,22 @@ export const GitHub: Platform = {
     if (pullId) {
       return await getPullRequestTreeData(metaData, pullId, accessToken)
     }
+    const commitId = URLHelper.isInCommitPage()
+    if (commitId) {
+      return await getCommitTreeData(metaData, commitId, accessToken)
+    }
 
     return await getRepositoryTreeData(metaData, path, recursive, accessToken)
   },
   shouldShow() {
-    return Boolean(DOMHelper.isInCodePage() || (URLHelper.isInPullPage() && !DOMHelper.isNativePRFileTreeShown()))
+    return Boolean(
+      DOMHelper.isInCodePage() ||
+        URLHelper.isInCommitPage() ||
+        (URLHelper.isInPullPage() && !DOMHelper.isNativePRFileTreeShown()),
+    )
   },
   shouldExpandAll() {
-    return Boolean(URLHelper.isInPullPage())
+    return Boolean(URLHelper.isInPullPage() || URLHelper.isInCommitPage())
   },
   getCurrentPath(branchName) {
     const pathFromURL = URLHelper.parse().path.join('/')
@@ -279,6 +295,73 @@ async function getRepositoryTreeData(
   return { root, defer: treeData.truncated }
 }
 
+async function getCommitTreeData(
+  { userName, repoName }: Pick<MetaData, 'userName' | 'repoName' | 'branchName'>,
+  commitSHA: string,
+  accessToken: string | undefined,
+) {
+  const treeData: GitHubAPI.CommitTreeItem[] = []
+  let page = 1
+  while (true) {
+    const response = await API.getCommitTreeData(userName, repoName, commitSHA, page, accessToken)
+    const { files } = (await response.json()) as GitHubAPI.CommitResponseData
+    treeData.push(...files)
+
+    const headerLink = response.headers.get('link')
+    if (headerLink) {
+      const rels = resolveHeaderLink(headerLink)
+      if (rels) {
+        if (rels.position === 'first') {
+          page++
+        } else if (rels.position === 'middle') {
+          const searchOfLast = new URL(rels.last).searchParams
+          if (`${page}` === searchOfLast.get('page')) {
+            // this should not actually happen because GitHub responds `prev` and `first` for the first page
+            break
+          }
+          page++
+        } else {
+          // i.e. rels.position === 'last'
+          break
+        }
+      } else {
+        // unexpected link header content
+        break
+      }
+    } else {
+      // no link headers if there is <100 files
+      break
+    }
+  }
+
+  const documents = await API.getCommitPageDocuments(userName, repoName, commitSHA)
+
+  const getItemURL = (path: string) => {
+    for (const doc of documents) {
+      const id = doc.querySelector(`[data-path="${path}"]`)?.parentElement?.id
+      if (id) return `#${id}`
+    }
+  }
+
+  const root = processTree(
+    treeData.map(item => ({
+      type: 'blob',
+      path: item.filename,
+      name: item.filename.replace(/^.*\//, ''),
+      url: getItemURL(item.filename) || item.blob_url,
+      sha: item.patch,
+      diff: {
+        status: item.status,
+        additions: item.additions,
+        deletions: item.deletions,
+        changes: item.changes,
+      },
+    })),
+  )
+
+  return { root }
+}
+
 async function getPullRequestTreeData(
   { userName, repoName }: Pick<MetaData, 'userName' | 'repoName' | 'branchName'>,
   pullId: string,
diff --git a/src/platforms/GitHub/utils.ts b/src/platforms/GitHub/utils.ts
new file mode 100644
index 0000000..d112f82
--- /dev/null
+++ b/src/platforms/GitHub/utils.ts
@@ -0,0 +1,75 @@
+/**
+ * Resolved from response header `link`
+ *
+ * Example:
+ * <https://api.github.com/repositories/112069171/commits/7de4488d7f00630512e0d494bab209004f2d4a58?per_page=100&page=2>; rel="next", <https://api.github.com/repositories/112069171/commits/7de4488d7f00630512e0d494bab209004f2d4a58?per_page=100&page=2>; rel="last"
+ *
+ * `rel` existence
+ *
+ * rel  | first page | middle page | last page
+ * next |     ✔      |      ✔      |
+ * last |     ✔      |      ✔      |
+ * prev |            |      ✔      |     ✔
+ * first|            |      ✔      |     ✔
+ *
+ * If there is only 1 page, no `link` header is returned.
+ */
+type Rels = {
+  next?: string
+  last?: string
+  prev?: string
+  first?: string
+}
+
+export function resolveHeaderLink(raw: string) {
+  const rels: Rels = {}
+  raw
+    .split(',')
+    .map(part => part.match(/<(.*?)>; *rel="(.*?)"/))
+    .filter((link: RegExpMatchArray | null): link is RegExpMatchArray => !!link)
+    .forEach(([, url, rel]) => {
+      // It's 2022, is there a smarter way to do this in TS?
+      switch (rel) {
+        case 'next':
+          rels.next = url
+          break
+        case 'last':
+          rels.last = url
+          break
+        case 'prev':
+          rels.prev = url
+          break
+        case 'first':
+          rels.first = url
+          break
+      }
+    })
+
+  if (rels.next && rels.last && !rels.prev && !rels.first) {
+    // first page
+    return {
+      next: rels.next,
+      last: rels.last,
+      position: 'first' as const,
+    }
+  } else if (rels.next && rels.last && rels.prev && rels.first) {
+    // middle page
+    return {
+      next: rels.next,
+      last: rels.last,
+      prev: rels.prev,
+      first: rels.first,
+      position: 'middle' as const,
+    }
+  } else if (!rels.next && !rels.last && rels.prev && rels.first) {
+    // last page
+    return {
+      prev: rels.prev,
+      first: rels.first,
+      position: 'last' as const,
+    }
+  } else {
+    // unexpected link header content
+    return
+  }
+}

From 71af3514a2448090328118b1dd08f03b9a81ec93 Mon Sep 17 00:00:00 2001
From: EnixCoda <enixcoda@gmail.com>
Date: Mon, 2 May 2022 01:05:43 +0800
Subject: [PATCH 04/93] chore: replace regex

---
 src/platforms/GitHub/index.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/platforms/GitHub/index.ts b/src/platforms/GitHub/index.ts
index 570ddba..341646c 100644
--- a/src/platforms/GitHub/index.ts
+++ b/src/platforms/GitHub/index.ts
@@ -271,7 +271,7 @@ async function getRepositoryTreeData(
     treeData.tree.map(item => ({
       path: item.path || '',
       type: item.type || 'blob',
-      name: item.path?.replace(/^.*\//, '') || '',
+      name: item.path?.split('/').pop() || '',
       url:
         item.url && item.type && item.path
           ? getUrlForRedirect(userName, repoName, branchName, item.type, item.path)
@@ -347,7 +347,7 @@ async function getCommitTreeData(
     treeData.map(item => ({
       type: 'blob',
       path: item.filename,
-      name: item.filename.replace(/^.*\//, ''),
+      name: item.filename.split('/').pop() || '',
       url: getItemURL(item.filename) || item.blob_url,
       sha: item.patch,
       diff: {
@@ -418,7 +418,7 @@ async function getPullRequestTreeData(
     ({ filename, sha, additions, deletions, changes, status }) => ({
       path: filename || '',
       type: 'blob',
-      name: filename?.replace(/^.*\//, '') || '',
+      name: filename?.split('/').pop() || '',
       url: `${urlMainPart}${formatHash(getFileElementHash(filename))}`,
       sha: sha,
       comments: run(() => {

From 46cc04b3ee18e0d770dfde4c1774bb5e105b94da Mon Sep 17 00:00:00 2001
From: EnixCoda <enixcoda@gmail.com>
Date: Tue, 3 May 2022 16:22:59 +0800
Subject: [PATCH 05/93] refactor: extract formatters for hash and class name

---
 src/platforms/GitHub/DOMHelper.ts |  6 +++---
 src/platforms/GitHub/index.ts     |  9 +++------
 src/platforms/Gitee/DOMHelper.ts  |  4 ++--
 src/utils/DOMHelper.ts            | 10 +++++++++-
 src/utils/general.ts              |  5 +++++
 5 files changed, 22 insertions(+), 12 deletions(-)

diff --git a/src/platforms/GitHub/DOMHelper.ts b/src/platforms/GitHub/DOMHelper.ts
index 0570899..56a2685 100644
--- a/src/platforms/GitHub/DOMHelper.ts
+++ b/src/platforms/GitHub/DOMHelper.ts
@@ -1,7 +1,7 @@
 import { raiseError } from 'analytics'
 import { Clippy, ClippyClassName } from 'components/Clippy'
 import * as React from 'react'
-import { $ } from 'utils/DOMHelper'
+import { $, formatClass } from 'utils/DOMHelper'
 import { renderReact, run } from 'utils/general'
 import { CopyFileButton, copyFileButtonClassName } from './CopyFileButton'
 
@@ -147,7 +147,7 @@ export function getCodeElement() {
  */
 export function attachCopyFileBtn() {
   const removeButtons = () => {
-    const buttons = document.querySelectorAll(`.${copyFileButtonClassName}`)
+    const buttons = document.querySelectorAll(formatClass(copyFileButtonClassName))
     buttons.forEach(button => {
       button.parentElement?.removeChild(button)
     })
@@ -219,7 +219,7 @@ export function attachCopySnippet() {
           }
         }
         function removeAttachedOnes() {
-          const buttons = document.querySelectorAll(`.${ClippyClassName}`)
+          const buttons = document.querySelectorAll(formatClass(ClippyClassName))
           buttons.forEach(button => {
             button.parentElement?.removeChild(button)
           })
diff --git a/src/platforms/GitHub/index.ts b/src/platforms/GitHub/index.ts
index 341646c..7b8ac61 100644
--- a/src/platforms/GitHub/index.ts
+++ b/src/platforms/GitHub/index.ts
@@ -1,7 +1,8 @@
 import { useConfigs } from 'containers/ConfigsContext'
 import { GITHUB_OAUTH } from 'env'
 import { Base64 } from 'js-base64'
-import { run } from 'utils/general'
+import { formatID } from 'utils/DOMHelper'
+import { formatHash, run } from 'utils/general'
 import { resolveGitModules } from 'utils/gitSubmodule'
 import { sortFoldersToFront } from 'utils/treeParser'
 import * as API from './API'
@@ -339,7 +340,7 @@ async function getCommitTreeData(
   const getItemURL = (path: string) => {
     for (const doc of documents) {
       const id = doc.querySelector(`[data-path="${path}"]`)?.parentElement?.id
-      if (id) return `#${id}`
+      if (id) return formatID(id)
     }
   }
 
@@ -442,7 +443,3 @@ async function getPullRequestTreeData(
   return { root }
 }
 
-function formatHash(hash?: string) {
-  if (hash) return '#' + hash
-  return ''
-}
diff --git a/src/platforms/Gitee/DOMHelper.ts b/src/platforms/Gitee/DOMHelper.ts
index bd1a50f..144837e 100644
--- a/src/platforms/Gitee/DOMHelper.ts
+++ b/src/platforms/Gitee/DOMHelper.ts
@@ -1,7 +1,7 @@
 import { raiseError } from 'analytics'
 import { Clippy, ClippyClassName } from 'components/Clippy'
 import * as React from 'react'
-import { $ } from 'utils/DOMHelper'
+import { $, formatClass } from 'utils/DOMHelper'
 import { renderReact } from 'utils/general'
 
 export function isInRepoPage() {
@@ -70,7 +70,7 @@ export function attachCopySnippet() {
       readmeElement.addEventListener('mouseover', mouseOverCallback)
       return () => {
         readmeElement.removeEventListener('mouseover', mouseOverCallback)
-        const buttons = document.querySelectorAll(`.${ClippyClassName}`)
+        const buttons = document.querySelectorAll(formatClass(ClippyClassName))
         buttons.forEach(button => {
           button.parentElement?.removeChild(button)
         })
diff --git a/src/utils/DOMHelper.ts b/src/utils/DOMHelper.ts
index b369b46..fa56f3a 100644
--- a/src/utils/DOMHelper.ts
+++ b/src/utils/DOMHelper.ts
@@ -60,7 +60,7 @@ export function $(selector: string, existCallback?: any, otherwise?: any) {
  */
 export function insertLogoMountPoint() {
   const logoID = 'gitako-logo-mount-point'
-  const logoSelector = '#' + logoID
+  const logoSelector = formatID(logoID)
   return $(logoSelector, undefined, function createLogoMountPoint() {
     const logoMountElement = document.createElement('div')
     logoMountElement.setAttribute('id', logoID)
@@ -142,3 +142,11 @@ export function setCSSVariable(name: string, value: string | undefined, element:
   if (value === undefined) element.style.removeProperty(name)
   else element.style.setProperty(name, value)
 }
+
+export function formatID(id: string) {
+  return `#${id}`
+}
+
+export function formatClass(className: string) {
+  return `.${className}`
+}
diff --git a/src/utils/general.ts b/src/utils/general.ts
index 619b889..4af8aae 100644
--- a/src/utils/general.ts
+++ b/src/utils/general.ts
@@ -219,3 +219,8 @@ export function resolveDiffGraphMeta(additions: number, deletions: number, chang
     w = 5 - g - r
   return { g, r, w }
 }
+
+export function formatHash(hash?: string) {
+  if (hash) return '#' + hash
+  return ''
+}

From 3cacad133ced8bfef061415c8e1ad46c753e92b3 Mon Sep 17 00:00:00 2001
From: EnixCoda <enixcoda@gmail.com>
Date: Tue, 3 May 2022 16:41:45 +0800
Subject: [PATCH 06/93] refactor: enhance network requests

---
 src/platforms/GitHub/API.ts                   | 178 ++++++++--------
 src/platforms/GitHub/DOMHelper.ts             |   4 +
 src/platforms/GitHub/getCommitTreeData.ts     |  44 ++++
 .../GitHub/getPullRequestTreeData.ts          | 128 ++++++++++++
 src/platforms/GitHub/index.ts                 | 192 +-----------------
 src/platforms/GitHub/utils.ts                 |  51 +++++
 tsconfig.json                                 |   2 +-
 7 files changed, 325 insertions(+), 274 deletions(-)
 create mode 100644 src/platforms/GitHub/getCommitTreeData.ts
 create mode 100644 src/platforms/GitHub/getPullRequestTreeData.ts

diff --git a/src/platforms/GitHub/API.ts b/src/platforms/GitHub/API.ts
index 3ab9af3..c1b4d98 100644
--- a/src/platforms/GitHub/API.ts
+++ b/src/platforms/GitHub/API.ts
@@ -1,7 +1,8 @@
 import { errors } from 'platforms'
 import { isEnterprise } from '.'
+import { continuousLoadPages, getDOM, resolveHeaderLink } from './utils'
 
-function apiRateLimitExceeded(content: any /* safe any */) {
+function isAPIRateLimitExceeded(content: any /* safe any */) {
   return content?.['documentation_url'] === 'https://developer.github.com/v3/#rate-limiting'
 }
 
@@ -13,15 +14,23 @@ function isBlockedProject(content: any /* safe any */) {
   return content?.['message'] === 'Repository access blocked'
 }
 
-async function request(
+export const responseBodyResolvers = {
+  asIs: (response: Response) => response,
+  json(response: Response) {
+    const contentType = response.headers.get('Content-Type') || response.headers.get('content-type')
+    if (contentType?.includes('application/json')) return response.json()
+    throw new Error(`Response content type is "${contentType}"`)
+  },
+}
+
+async function request<T>(
   url: string,
   {
     accessToken,
-    resolveMode = 'body-json',
   }: {
-    resolveMode?: 'body-json' | 'response'
     accessToken?: string
   } = {},
+  bodyResolver: (response: Response) => Async<T> = responseBodyResolvers.json,
 ) {
   const headers = {} as HeadersInit & {
     Authorization?: string
@@ -37,35 +46,25 @@ async function request(
     throw new Error(errors.CONNECTION_BLOCKED)
   }
 
-  const contentType = res.headers.get('Content-Type') || res.headers.get('content-type')
-  const isJson = contentType?.includes('application/json')
   // About res.ok:
   // True if res.status between 200~299
   // Ref: https://developer.mozilla.org/en-US/docs/Web/API/Response/ok
-  if (res.ok) {
-    switch (resolveMode) {
-      case 'body-json': {
-        if (isJson) return res.json()
-        throw new Error(`Response content type is "${contentType}"`)
-      }
-      case 'response':
-        return res
-    }
-    throw new Error(`Unknown resolve mode: ${resolveMode}`)
-  }
+  if (res.ok) return bodyResolver(res)
 
   if (res.status === 404 || res.status === 401) throw new Error(errors.NOT_FOUND)
-  else if (res.status === 403) throw new Error(errors.API_RATE_LIMIT)
-  else if (res.status === 500) throw new Error(errors.SERVER_FAULT)
-  else if (resolveMode && isJson) {
-    const content = await res.json()
-    if (apiRateLimitExceeded(content)) throw new Error(errors.API_RATE_LIMIT)
-    if (isEmptyProject(content)) throw new Error(errors.EMPTY_PROJECT)
-    if (isBlockedProject(content)) throw new Error(errors.BLOCKED_PROJECT)
-    throw new Error(`Unknown message content "${content?.message}"`)
-  } else {
-    throw new Error(`Response content type is "${contentType}"`)
-  }
+  if (res.status === 403) throw new Error(errors.API_RATE_LIMIT)
+  if (res.status === 500) throw new Error(errors.SERVER_FAULT)
+
+  const content = await responseBodyResolvers.json(res)
+  if (isAPIRateLimitExceeded(content)) throw new Error(errors.API_RATE_LIMIT)
+  if (isEmptyProject(content)) throw new Error(errors.EMPTY_PROJECT)
+  if (isBlockedProject(content)) throw new Error(errors.BLOCKED_PROJECT)
+
+  const message =
+    typeof content === 'object'
+      ? (content as Record<string, unknown> | null)?.message
+      : `${content}`
+  throw new Error(`Unknown message content "${message}"`)
 }
 
 const API_ENDPOINT = isEnterprise() ? `${window.location.host}/api/v3` : 'api.github.com'
@@ -103,16 +102,28 @@ export async function getPullData(
   return await request(url, { accessToken })
 }
 
+export async function requestPullTreeData(
+  userName: string,
+  repoName: string,
+  pullId: string,
+  page: number,
+  pageSize?: number,
+  accessToken?: string,
+) {
+  const search = new URLSearchParams({ page: page.toString(), per_page: `${pageSize}` })
+  const url = `https://${API_ENDPOINT}/repos/${userName}/${repoName}/pulls/${pullId}/files?${search}`
+  return await request(url, { accessToken }, responseBodyResolvers.asIs)
+}
+
 export async function getPullTreeData(
   userName: string,
   repoName: string,
   pullId: string,
   page: number,
+  pageSize?: number,
   accessToken?: string,
 ): Promise<GitHubAPI.PullTreeData> {
-  const search = new URLSearchParams({ page: page.toString() })
-  const url = `https://${API_ENDPOINT}/repos/${userName}/${repoName}/pulls/${pullId}/files?${search}`
-  return await request(url, { accessToken })
+  return (await requestPullTreeData(userName, repoName, pullId, page, pageSize, accessToken)).json()
 }
 
 export async function getPullComments(
@@ -129,39 +140,15 @@ export async function getPullPageDocuments(
   userName: string,
   repoName: string,
   pullId: string,
+  document?: Document,
 ): Promise<Document[]> {
   // Response of this API contains view of few files but is not complete.
-  const filesDOM = await getDOM(
-    `https://${window.location.host}/${userName}/${repoName}/pull/${pullId}/files?_pjax=%23js-repo-pjax-container`,
+  return continuousLoadPages(
+    document ||
+      (await getDOM(
+        `https://${window.location.host}/${userName}/${repoName}/pull/${pullId}/files?_pjax=%23js-repo-pjax-container`,
+      )),
   )
-  const hookElement: HTMLDivElement | null = filesDOM.querySelector('div.js-pull-refresh-on-pjax')
-  const hookSearchParams = new URLSearchParams(hookElement?.dataset.url)
-  const [baseSHA, headSHA] = [
-    hookSearchParams.get('start_commit_oid'),
-    hookSearchParams.get('end_commit_oid'),
-  ]
-  if (!baseSHA || !headSHA) throw new Error(`Cannot fetch SHA for comparison`)
-
-  // The SHA used to be retrieved from DOM of the pull page, but they can be unreliable if the PR has conflicts
-  const search = new URLSearchParams(window.location.search)
-  search.set('sha1', baseSHA)
-  search.set('sha2', headSHA)
-  let lines = 0
-  const diffsDOMs: Document[] = []
-  while (true) {
-    search.set('lines', lines.toString())
-    const diffsDOM = await getDOM(
-      `https://${window.location.host}/${userName}/${repoName}/diffs?${search}`,
-    )
-    diffsDOMs.push(diffsDOM)
-
-    if (diffsDOM.querySelector('.js-diff-progressive-container')) {
-      lines += 3000
-    } else {
-      break
-    }
-  }
-  return diffsDOMs
 }
 
 export async function getCommitPageDocuments(
@@ -169,33 +156,8 @@ export async function getCommitPageDocuments(
   repoName: string,
   commitId: string,
 ): Promise<Document[]> {
-  /**
-   *  <include-fragment
-   *    src="/EnixCoda/Gitako/diffs?bytes=444&amp;commentable=true&amp;commit=7de4488d7f00630512e0d494bab209004f2d4a58&amp;lines=202&amp;responsive=true&amp;sha1=022dd1736146a350f1564c40d28234973d47bafc&amp;sha2=7de4488d7f00630512e0d494bab209004f2d4a58&amp;start_entry=1&amp;sticky=false&amp;w=false"
-   *    class="diff-progressive-loader js-diff-progressive-loader mb-4 d-flex flex-items-center flex-justify-center"
-   *    data-targets="diff-file-filter.progressiveLoaders"
-   *    data-action="include-fragment-replace:diff-file-filter#refilterAfterAsyncLoad"
-   *  >
-   */
-  const fragmentSelector = 'include-fragment[data-targets="diff-file-filter.progressiveLoaders"]'
-
-  let doc = document
-  const documents: Document[] = [doc]
-  while (true) {
-    const fragment = doc.querySelector(fragmentSelector) as HTMLElement
-    if (!fragment) break
-    const src = fragment.getAttribute('src')
-    if (!src) break
-    const nextDoc = await getDOM(src)
-    documents.push(nextDoc)
-    doc = nextDoc
-  }
-
-  return documents
-}
-
-async function getDOM(url: string) {
-  return new DOMParser().parseFromString(await (await fetch(url)).text(), 'text/html')
+  // arguments are not used because info are collected from DOM directly
+  return continuousLoadPages(document)
 }
 
 export async function getBlobData(
@@ -225,7 +187,7 @@ export async function OAuth(code: string): Promise<string | null> {
   }
 }
 
-export async function getCommitTreeData(
+export async function requestCommitTreeData(
   userName: string,
   repoName: string,
   sha: string,
@@ -237,5 +199,41 @@ export async function getCommitTreeData(
     page: `${page}`,
   })
   const url = `https://${API_ENDPOINT}/repos/${userName}/${repoName}/commits/${sha}?` + search
-  return await request(url, { accessToken, resolveMode: 'response' })
+  return await request(url, { accessToken }, responseBodyResolvers.asIs)
+}
+
+export async function getPaginatedData<T>(sendRequest: (page: number) => Promise<Response>) {
+  const responses: Response[] = []
+  let page = 1
+  while (true) {
+    const response = await sendRequest(page)
+    responses.push(response)
+
+    const headerLink = response.headers.get('link')
+    if (headerLink) {
+      const rels = resolveHeaderLink(headerLink)
+      if (rels) {
+        if (rels.position === 'first') {
+          page++
+        } else if (rels.position === 'middle') {
+          const searchOfLast = new URL(rels.last).searchParams
+          if (`${page}` === searchOfLast.get('page')) {
+            // this should not actually happen because GitHub responds `prev` and `first` for the first page
+            break
+          }
+          page++
+        } else {
+          // i.e. rels.position === 'last'
+          break
+        }
+      } else {
+        // unexpected link header content
+        break
+      }
+    } else {
+      // no link headers if there is <100 files
+      break
+    }
+  }
+  return Promise.all(responses.map(responseBodyResolvers.json)) as Promise<T[]>
 }
diff --git a/src/platforms/GitHub/DOMHelper.ts b/src/platforms/GitHub/DOMHelper.ts
index 56a2685..e61e012 100644
--- a/src/platforms/GitHub/DOMHelper.ts
+++ b/src/platforms/GitHub/DOMHelper.ts
@@ -31,6 +31,10 @@ export function isInCodePage() {
   return Boolean($(branchListSelector, e => e.offsetWidth > 0 && e.offsetHeight > 0))
 }
 
+export function isInPullFilesPage() {
+  return $('#files_tab_counter')
+}
+
 export function getIssueTitle() {
   const title = $('.gh-header-title')?.textContent
   return title?.trim().replace(/\n/g, '')
diff --git a/src/platforms/GitHub/getCommitTreeData.ts b/src/platforms/GitHub/getCommitTreeData.ts
new file mode 100644
index 0000000..def1892
--- /dev/null
+++ b/src/platforms/GitHub/getCommitTreeData.ts
@@ -0,0 +1,44 @@
+import { formatID } from 'utils/DOMHelper'
+import * as API from './API'
+import { processTree } from './index'
+
+export async function getCommitTreeData(
+  { userName, repoName }: Pick<MetaData, 'userName' | 'repoName' | 'branchName'>,
+  commitSHA: string,
+  accessToken: string | undefined,
+) {
+  const treeData = (
+    await API.getPaginatedData<GitHubAPI.CommitResponseData>(page =>
+      API.requestCommitTreeData(userName, repoName, commitSHA, page, accessToken),
+    )
+  )
+    .map(({ files }) => files)
+    .flat()
+
+  const documents = await API.getCommitPageDocuments(userName, repoName, commitSHA)
+
+  const getItemURL = (path: string) => {
+    for (const doc of documents) {
+      const id = doc.querySelector(`[data-path="${path}"]`)?.parentElement?.id
+      if (id) return formatID(id)
+    }
+  }
+
+  const root = processTree(
+    treeData.map(item => ({
+      type: 'blob',
+      path: item.filename,
+      name: item.filename.split('/').pop() || '',
+      url: getItemURL(item.filename) || item.blob_url,
+      sha: item.patch,
+      diff: {
+        status: item.status,
+        additions: item.additions,
+        deletions: item.deletions,
+        changes: item.changes,
+      },
+    })),
+  )
+
+  return { root }
+}
diff --git a/src/platforms/GitHub/getPullRequestTreeData.ts b/src/platforms/GitHub/getPullRequestTreeData.ts
new file mode 100644
index 0000000..5c3fe47
--- /dev/null
+++ b/src/platforms/GitHub/getPullRequestTreeData.ts
@@ -0,0 +1,128 @@
+import { formatHash } from 'utils/general'
+import * as API from './API'
+import { isInPullFilesPage } from './DOMHelper'
+import { processTree } from './index'
+import { getCommentsMap } from './utils'
+
+export async function getPullRequestTreeData(
+  metaData: Pick<MetaData, 'userName' | 'repoName' | 'branchName'>,
+  pullId: string,
+  accessToken?: string,
+  useSafeRequest = true,
+) {
+  const { userName, repoName } = metaData
+  const [treeData, commentData] = await Promise.all([
+    useSafeRequest
+      ? safeGetPullRequestTreeData(metaData, pullId, accessToken)
+      : fastGetPullRequestTreeData(metaData, pullId, accessToken),
+    API.getPullComments(userName, repoName, pullId, accessToken),
+  ])
+
+  const docs = await API.getPullPageDocuments(userName, repoName, pullId, isInPullFilesPage() ? document : undefined)
+  // query all elements at once to make getFileElementHash run faster
+  const elementsHavePath = docs.map(doc => doc.querySelectorAll(`[data-path]`))
+  const getFileElementHash = (path: string) => {
+    let e
+    for (const group of elementsHavePath) {
+      for (let i = 0; i < group.length; i++) {
+        const element = group[i]
+        if (element.getAttribute('data-path')?.startsWith(path)) {
+          e = element
+          break
+        }
+      }
+      if (e) break
+    }
+    return e?.parentElement?.id
+  }
+
+  const urlMainPart = `https://${window.location.host}/${userName}/${repoName}/pull/${pullId}/files${window.location.search}`
+  const commentsMap = getCommentsMap(commentData)
+  const nodes: TreeNode[] = treeData.map(
+    ({ filename, sha, additions, deletions, changes, status }) => ({
+      path: filename || '',
+      type: 'blob',
+      name: filename?.split('/').pop() || '',
+      url: `${urlMainPart}${formatHash(getFileElementHash(filename))}`,
+      sha: sha,
+      comments: commentsMap.get(filename),
+      diff: {
+        status,
+        additions,
+        deletions,
+        changes,
+      },
+    }),
+  )
+
+  const root = processTree(nodes)
+  return { root }
+}
+
+const GITHUB_API_RESPONSE_LENGTH_LIMIT = 3000
+const GITHUB_API_RESPONSE_MAX_SIZE_PER_PAGE = 100
+const MAX_PAGE = Math.ceil(GITHUB_API_RESPONSE_LENGTH_LIMIT / GITHUB_API_RESPONSE_MAX_SIZE_PER_PAGE)
+
+async function safeGetPullRequestTreeData(
+  { userName, repoName }: Pick<MetaData, 'userName' | 'repoName' | 'branchName'>,
+  pullId: string,
+  accessToken?: string,
+) {
+  return (
+    await API.getPaginatedData<GitHubAPI.PullTreeData>(page =>
+      API.requestPullTreeData(
+        userName,
+        repoName,
+        pullId,
+        page,
+        GITHUB_API_RESPONSE_MAX_SIZE_PER_PAGE,
+        accessToken,
+      ),
+    )
+  ).flat()
+}
+
+async function fastGetPullRequestTreeData(
+  { userName, repoName }: Pick<MetaData, 'userName' | 'repoName' | 'branchName'>,
+  pullId: string,
+  accessToken?: string,
+) {
+  const [pullData, treeData] = await Promise.all([
+    API.getPullData(userName, repoName, pullId, accessToken),
+    API.getPullTreeData(
+      userName,
+      repoName,
+      pullId,
+      1,
+      GITHUB_API_RESPONSE_MAX_SIZE_PER_PAGE,
+      accessToken,
+    ),
+  ])
+
+  const count = pullData.changed_files
+  if (treeData.length < count) {
+    let page = 1
+    const restPages = []
+    while (page * GITHUB_API_RESPONSE_MAX_SIZE_PER_PAGE < count) {
+      restPages.push(++page)
+    }
+    if (page > MAX_PAGE) {
+      // TODO: hint
+    }
+    const moreFiles = await Promise.all(
+      restPages.map(page =>
+        API.getPullTreeData(
+          userName,
+          repoName,
+          pullId,
+          page,
+          GITHUB_API_RESPONSE_MAX_SIZE_PER_PAGE,
+          accessToken,
+        ),
+      ),
+    )
+    treeData.push(...moreFiles.flat())
+  }
+
+  return treeData
+}
diff --git a/src/platforms/GitHub/index.ts b/src/platforms/GitHub/index.ts
index 7b8ac61..99a05a5 100644
--- a/src/platforms/GitHub/index.ts
+++ b/src/platforms/GitHub/index.ts
@@ -1,21 +1,19 @@
 import { useConfigs } from 'containers/ConfigsContext'
 import { GITHUB_OAUTH } from 'env'
 import { Base64 } from 'js-base64'
-import { formatID } from 'utils/DOMHelper'
-import { formatHash, run } from 'utils/general'
 import { resolveGitModules } from 'utils/gitSubmodule'
 import { sortFoldersToFront } from 'utils/treeParser'
 import * as API from './API'
 import * as DOMHelper from './DOMHelper'
+import { getCommitTreeData } from './getCommitTreeData'
+import { getPullRequestTreeData } from './getPullRequestTreeData'
 import { useEnterpriseStatBarStyleFix } from './hooks/useEnterpriseStatBarStyleFix'
 import { useGitHubAttachCopyFileButton } from './hooks/useGitHubAttachCopyFileButton'
 import { useGitHubAttachCopySnippetButton } from './hooks/useGitHubAttachCopySnippetButton'
 import { useGitHubCodeFold } from './hooks/useGitHubCodeFold'
 import * as URLHelper from './URLHelper'
-import { resolveHeaderLink } from './utils'
-export { useGitHubCodeFold } from './hooks/useGitHubCodeFold'
 
-function processTree(tree: TreeNode[]): TreeNode {
+export function processTree(tree: TreeNode[]): TreeNode {
   // nodes are created from items and put onto tree
   const pathToItem = new Map<string, TreeNode>()
   tree.forEach(item => pathToItem.set(item.path, item))
@@ -86,27 +84,6 @@ export function isEnterprise() {
   return !window.location.host.endsWith('github.com')
 }
 
-function resolvePageScope(defaultBranchName?: string) {
-  const parsed = URLHelper.parse()
-  switch (parsed.type) {
-    case 'blob':
-    case 'tree': {
-      // handle URLs like {user}/{repo}/{'tree'|'blob'}/{sha|branch}, issue #131
-      const branchName = DOMHelper.getCurrentBranch()
-      if (branchName && branchName !== defaultBranchName) return `branch-${branchName}`
-      break
-    }
-    case 'tags':
-      return 'tags'
-    case 'releases':
-      return 'releases'
-    case 'pull':
-      const pullId = URLHelper.isInPullPage()
-      if (pullId) return `pull-${pullId}`
-  }
-  return 'general'
-}
-
 const pathSHAMap = new Map<string, string>()
 
 // Try lookup PJAX containers, #js-repo-pjax-container could exist while #repo-content-pjax-container does not.
@@ -169,17 +146,14 @@ export const GitHub: Platform = {
       branchUrl,
     }
   },
-  async getTreeData(metaData, path = '/', recursive, accessToken) {
+  getTreeData(metaData, path = '/', recursive, accessToken) {
     const pullId = URLHelper.isInPullPage()
-    if (pullId) {
-      return await getPullRequestTreeData(metaData, pullId, accessToken)
-    }
-    const commitId = URLHelper.isInCommitPage()
-    if (commitId) {
-      return await getCommitTreeData(metaData, commitId, accessToken)
-    }
+    if (pullId) return getPullRequestTreeData(metaData, pullId, accessToken)
 
-    return await getRepositoryTreeData(metaData, path, recursive, accessToken)
+    const commitId = URLHelper.isInCommitPage()
+    if (commitId) return getCommitTreeData(metaData, commitId, accessToken)
+
+    return getRepositoryTreeData(metaData, path, recursive, accessToken)
   },
   shouldShow() {
     return Boolean(
@@ -295,151 +269,3 @@ async function getRepositoryTreeData(
 
   return { root, defer: treeData.truncated }
 }
-
-async function getCommitTreeData(
-  { userName, repoName }: Pick<MetaData, 'userName' | 'repoName' | 'branchName'>,
-  commitSHA: string,
-  accessToken: string | undefined,
-) {
-  const treeData: GitHubAPI.CommitTreeItem[] = []
-  let page = 1
-  while (true) {
-    const response = await API.getCommitTreeData(userName, repoName, commitSHA, page, accessToken)
-    const { files } = (await response.json()) as GitHubAPI.CommitResponseData
-    treeData.push(...files)
-
-    const headerLink = response.headers.get('link')
-    if (headerLink) {
-      const rels = resolveHeaderLink(headerLink)
-      if (rels) {
-        if (rels.position === 'first') {
-          page++
-        } else if (rels.position === 'middle') {
-          const searchOfLast = new URL(rels.last).searchParams
-          if (`${page}` === searchOfLast.get('page')) {
-            // this should not actually happen because GitHub responds `prev` and `first` for the first page
-            break
-          }
-          page++
-        } else {
-          // i.e. rels.position === 'last'
-          break
-        }
-      } else {
-        // unexpected link header content
-        break
-      }
-    } else {
-      // no link headers if there is <100 files
-      break
-    }
-  }
-
-  const documents = await API.getCommitPageDocuments(userName, repoName, commitSHA)
-
-  const getItemURL = (path: string) => {
-    for (const doc of documents) {
-      const id = doc.querySelector(`[data-path="${path}"]`)?.parentElement?.id
-      if (id) return formatID(id)
-    }
-  }
-
-  const root = processTree(
-    treeData.map(item => ({
-      type: 'blob',
-      path: item.filename,
-      name: item.filename.split('/').pop() || '',
-      url: getItemURL(item.filename) || item.blob_url,
-      sha: item.patch,
-      diff: {
-        status: item.status,
-        additions: item.additions,
-        deletions: item.deletions,
-        changes: item.changes,
-      },
-    })),
-  )
-
-  return { root }
-}
-
-async function getPullRequestTreeData(
-  { userName, repoName }: Pick<MetaData, 'userName' | 'repoName' | 'branchName'>,
-  pullId: string,
-  accessToken?: string,
-) {
-  // https://developer.github.com/v3/pulls/#list-pull-requests-files
-  const GITHUB_API_RESPONSE_LENGTH_LIMIT = 3000
-  const GITHUB_API_PAGED_RESPONSE_LENGTH_LIMIT = 30
-  const MAX_PAGE = Math.ceil(
-    GITHUB_API_RESPONSE_LENGTH_LIMIT / GITHUB_API_PAGED_RESPONSE_LENGTH_LIMIT,
-  )
-  let page = 1
-  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
-  if (treeData.length < count) {
-    const restPages = []
-    while (page * GITHUB_API_PAGED_RESPONSE_LENGTH_LIMIT < count) {
-      restPages.push(++page)
-    }
-    if (page > MAX_PAGE) {
-      // TODO: hint
-    }
-    const moreFiles = await Promise.all(
-      restPages.map(page => API.getPullTreeData(userName, repoName, pullId, page, accessToken)),
-    )
-    treeData.push(...([] as GitHubAPI.PullTreeData).concat(...moreFiles))
-  }
-
-  const docs = await API.getPullPageDocuments(userName, repoName, pullId)
-  // query all elements at once to make getFileElementHash run faster
-  const elementsHavePath = docs.map(doc => doc.querySelectorAll(`[data-path]`))
-  const getFileElementHash = (path: string) => {
-    let e
-    for (const group of elementsHavePath) {
-      for (let i = 0; i < group.length; i++) {
-        const element = group[i]
-        if (element.getAttribute('data-path')?.startsWith(path)) {
-          e = element
-          break
-        }
-      }
-      if (e) break
-    }
-    return e?.parentElement?.id
-  }
-
-  const urlMainPart = `https://${window.location.host}/${userName}/${repoName}/pull/${pullId}/files${window.location.search}`
-  const nodes: TreeNode[] = treeData.map(
-    ({ filename, sha, additions, deletions, changes, status }) => ({
-      path: filename || '',
-      type: 'blob',
-      name: filename?.split('/').pop() || '',
-      url: `${urlMainPart}${formatHash(getFileElementHash(filename))}`,
-      sha: sha,
-      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,
-        deletions,
-        changes,
-      },
-    }),
-  )
-
-  const root = processTree(nodes)
-  return { root }
-}
-
diff --git a/src/platforms/GitHub/utils.ts b/src/platforms/GitHub/utils.ts
index d112f82..bac1be7 100644
--- a/src/platforms/GitHub/utils.ts
+++ b/src/platforms/GitHub/utils.ts
@@ -73,3 +73,54 @@ export function resolveHeaderLink(raw: string) {
     return
   }
 }
+
+export async function getDOM(url: string) {
+  return new DOMParser().parseFromString(await (await fetch(url)).text(), 'text/html')
+}
+
+export async function continuousLoadPages(doc: Document, onReceivePage?: (doc: Document) => void) {
+  /**
+   *  <include-fragment
+   *    src="..."
+   *    class="diff-progressive-loader js-diff-progressive-loader mb-4 d-flex flex-items-center flex-justify-center"
+   *    data-targets="diff-file-filter.progressiveLoaders"
+   *    data-action="include-fragment-replace:diff-file-filter#refilterAfterAsyncLoad"
+   *  >
+   */
+  const fragmentSelector = 'include-fragment[data-targets="diff-file-filter.progressiveLoaders"]'
+  const documents: Document[] = [doc]
+  while (true) {
+    const fragment = doc.querySelector(fragmentSelector) as HTMLElement
+    if (!fragment) break
+    const src = fragment.getAttribute('src')
+    if (!src) break
+    doc = await getDOM(src)
+    documents.push(doc)
+    onReceivePage?.(doc)
+  }
+  return documents
+}
+
+export function getCommentsMap(commentData: GitHubAPI.PullComments) {
+  const commentsMap = new Map<
+    string,
+    {
+      active: number
+      resolved: number
+    }
+  >()
+  commentData.forEach(comment => {
+    let stat = commentsMap.get(comment.path)
+    if (!stat) {
+      stat = {
+        active: 0,
+        resolved: 0,
+      }
+      commentsMap.set(comment.path, stat)
+    }
+
+    if (comment.position === null) stat.active++
+    else stat.resolved++
+  })
+  return commentsMap
+}
diff --git a/tsconfig.json b/tsconfig.json
index 58cdfac..7f2ad7b 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -5,7 +5,7 @@
     "target": "ESNext",
     "jsx": "react",
     "strict": true,
-    "lib": ["dom", "es2017.object", "es2016", "ES2020.String"],
+    "lib": ["dom", "es2017.object", "es2016", "ES2019.Array", "ES2020.String"],
     "baseUrl": "src",
     "resolveJsonModule": true,
     "allowSyntheticDefaultImports": true,

From d14171a6960a2caaf80f355e8ef90f48ac7aeda3 Mon Sep 17 00:00:00 2001
From: EnixCoda <enixcoda@gmail.com>
Date: Tue, 10 May 2022 22:46:50 +0800
Subject: [PATCH 07/93] build: update dependencies

---
 package.json | 10 +++++-----
 yarn.lock    | 50 +++++++++++++++++++++++++++++++++-----------------
 2 files changed, 38 insertions(+), 22 deletions(-)

diff --git a/package.json b/package.json
index 776108c..8da5673 100644
--- a/package.json
+++ b/package.json
@@ -24,17 +24,17 @@
     "@primer/css": "^15.2.0",
     "@primer/octicons-react": "^10.0.0",
     "@sentry/browser": "^6.3.6",
-    "@types/history": "^4.7.5",
-    "@types/ini": "^1.3.30",
-    "@types/js-base64": "^2.3.1",
+    "@types/history": "^5.0.0",
+    "@types/ini": "^1.3.31",
+    "@types/js-base64": "^3.3.1",
     "@types/nprogress": "^0.0.29",
     "@types/react": "^16.8.24",
     "@types/react-dom": "^16.8.5",
     "@types/react-window": "^1.8.1",
     "@types/styled-components": "^5.1.3",
     "@types/styled-system__css": "^5.0.14",
-    "ini": "^1.3.6",
-    "js-base64": "^2.5.1",
+    "ini": "^3.0.0",
+    "js-base64": "^3.7.2",
     "nprogress": "^0.2.0",
     "pjax-api": "^3.33.0",
     "react": "^17.0.1",
diff --git a/yarn.lock b/yarn.lock
index cbbb753..cfeb6f3 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2442,10 +2442,12 @@
   dependencies:
     "@types/node" "*"
 
-"@types/history@^4.7.5":
-  version "4.7.5"
-  resolved "https://registry.yarnpkg.com/@types/history/-/history-4.7.5.tgz#527d20ef68571a4af02ed74350164e7a67544860"
-  integrity sha512-wLD/Aq2VggCJXSjxEwrMafIP51Z+13H78nXIX0ABEuIGhmB5sNGbR113MOKo+yfw+RDo1ZU3DM6yfnnRF/+ouw==
+"@types/history@^5.0.0":
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/@types/history/-/history-5.0.0.tgz#29f919f0c8e302763798118f45b19cab4a886f14"
+  integrity sha512-hy8b7Y1J8OGe6LbAjj3xniQrj3v6lsivCcrmf4TzSgPzLkhIeKgc5IZnT7ReIqmEuodjfO8EYAuoFvIrHi/+jQ==
+  dependencies:
+    history "*"
 
 "@types/hoist-non-react-statics@*":
   version "3.3.1"
@@ -2455,10 +2457,10 @@
     "@types/react" "*"
     hoist-non-react-statics "^3.3.0"
 
-"@types/ini@^1.3.30":
-  version "1.3.30"
-  resolved "https://registry.yarnpkg.com/@types/ini/-/ini-1.3.30.tgz#d1485459c9fad84e937414b832a2adb649eab379"
-  integrity sha512-2+iF8zPSbpU83UKE+PNd4r/MhwNAdyGpk3H+VMgEH3EhjFZq1kouLgRoZrmIcmoGX97xFvqdS44DkICR5Nz3tQ==
+"@types/ini@^1.3.31":
+  version "1.3.31"
+  resolved "https://registry.yarnpkg.com/@types/ini/-/ini-1.3.31.tgz#c78541a187bd88d5c73e990711c9d85214800d1b"
+  integrity sha512-8ecxxaG4AlVEM1k9+BsziMw8UsX0qy3jYI1ad/71RrDZ+rdL6aZB0wLfAuflQiDhkD5o4yJ0uPK3OSUic3fG0w==
 
 "@types/istanbul-lib-coverage@*", "@types/istanbul-lib-coverage@^2.0.0":
   version "2.0.1"
@@ -2500,10 +2502,12 @@
     jest-diff "^26.0.0"
     pretty-format "^26.0.0"
 
-"@types/js-base64@^2.3.1":
-  version "2.3.1"
-  resolved "https://registry.yarnpkg.com/@types/js-base64/-/js-base64-2.3.1.tgz#c39f14f129408a3d96a1105a650d8b2b6eeb4168"
-  integrity sha512-4RKbhIDGC87s4EBy2Cp2/5S2O6kmCRcZnD5KRCq1q9z2GhBte1+BdsfVKCpG8yKpDGNyEE2G6IqFIh6W2YwWPA==
+"@types/js-base64@^3.3.1":
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/@types/js-base64/-/js-base64-3.3.1.tgz#36c2d6dc126277ea28a4d0599d0cafbf547b51e6"
+  integrity sha512-Zw33oQNAvDdAN9b0IE5stH0y2MylYvtU7VVTKEJPxhyM2q57CVaNJhtJW258ah24NRtaiA23tptUmVn3dmTKpw==
+  dependencies:
+    js-base64 "*"
 
 "@types/js-cookie@2.2.6":
   version "2.2.6"
@@ -6284,6 +6288,13 @@ hash.js@^1.0.0, hash.js@^1.0.3:
     inherits "^2.0.3"
     minimalistic-assert "^1.0.1"
 
+history@*:
+  version "5.3.0"
+  resolved "https://registry.yarnpkg.com/history/-/history-5.3.0.tgz#1548abaa245ba47992f063a0783db91ef201c73b"
+  integrity sha512-ZqaKwjjrAYUYfLG+htGaIIZ4nioX2L70ZUMIFysS3xvBsSG4x/n1V6TXV3N8ZYNuFGlDirFg32T7B6WOUPDYcQ==
+  dependencies:
+    "@babel/runtime" "^7.7.6"
+
 hmac-drbg@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/hmac-drbg/-/hmac-drbg-1.0.1.tgz#d2745701025a6c775a6c545793ed502fc0c649a1"
@@ -6550,11 +6561,16 @@ ini@2.0.0, ini@~2.0.0:
   resolved "https://registry.yarnpkg.com/ini/-/ini-2.0.0.tgz#e5fd556ecdd5726be978fa1001862eacb0a94bc5"
   integrity sha512-7PnF4oN3CvZF23ADhA5wRaYEQpJ8qygSkbtTXWBeXWXmEVRXK+1ITciHWwHhsjv1TmW0MgacIv6hEi5pX5NQdA==
 
-ini@^1.3.4, ini@^1.3.5, ini@^1.3.6, ini@~1.3.0:
+ini@^1.3.4, ini@^1.3.5, ini@~1.3.0:
   version "1.3.6"
   resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.6.tgz#f1c46a2a93a253e7b3905115e74d527cd23061a1"
   integrity sha512-IZUoxEjNjubzrmvzZU4lKP7OnYmX72XRl3sqkfJhBKweKi5rnGi5+IUdlj/H1M+Ip5JQ1WzaDMOBRY90Ajc5jg==
 
+ini@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/ini/-/ini-3.0.0.tgz#2f6de95006923aa75feed8894f5686165adc08f1"
+  integrity sha512-TxYQaeNW/N8ymDvwAxPyRbhMBtnEwuvaTYpOQkFx1nSeusgezHniEc/l35Vo4iCq/mMiTJbpD7oYxN98hFlfmw==
+
 inline-style-prefixer@^4.0.0:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/inline-style-prefixer/-/inline-style-prefixer-4.0.2.tgz#d390957d26f281255fe101da863158ac6eb60911"
@@ -7483,10 +7499,10 @@ joi@^17.6.0:
     "@sideway/formula" "^3.0.0"
     "@sideway/pinpoint" "^2.0.0"
 
-js-base64@^2.5.1:
-  version "2.5.1"
-  resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-2.5.1.tgz#1efa39ef2c5f7980bb1784ade4a8af2de3291121"
-  integrity sha512-M7kLczedRMYX4L8Mdh4MzyAMM9O5osx+4FcOQuTvr3A9F2D9S5JXheN0ewNbrvK2UatkTRhL5ejGmGSjNMiZuw==
+js-base64@*, js-base64@^3.7.2:
+  version "3.7.2"
+  resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-3.7.2.tgz#816d11d81a8aff241603d19ce5761e13e41d7745"
+  integrity sha512-NnRs6dsyqUXejqk/yv2aiXlAvOs56sLkX6nUdeaNezI5LFFLlsZjOThmwnrcwh5ZZRwZlCMnVAY3CvhIhoVEKQ==
 
 js-cookie@^2.2.1:
   version "2.2.1"

From e9489803cfc51cbfa91324ae1dc144bd43110000 Mon Sep 17 00:00:00 2001
From: EnixCoda <enixcoda@gmail.com>
Date: Tue, 10 May 2022 23:18:17 +0800
Subject: [PATCH 08/93] fix: decode json

---
 src/platforms/Gitea/index.ts | 1 +
 src/platforms/Gitee/index.ts | 1 +
 2 files changed, 2 insertions(+)

diff --git a/src/platforms/Gitea/index.ts b/src/platforms/Gitea/index.ts
index 2052189..ab58b6a 100644
--- a/src/platforms/Gitea/index.ts
+++ b/src/platforms/Gitea/index.ts
@@ -1,3 +1,4 @@
+import { Base64 } from 'js-base64'
 import { resolveGitModules } from 'utils/gitSubmodule'
 import { useProgressBar } from 'utils/hooks/useProgressBar'
 import { sortFoldersToFront } from 'utils/treeParser'
diff --git a/src/platforms/Gitee/index.ts b/src/platforms/Gitee/index.ts
index edd0872..5769520 100644
--- a/src/platforms/Gitee/index.ts
+++ b/src/platforms/Gitee/index.ts
@@ -1,4 +1,5 @@
 import { GITEE_OAUTH } from 'env'
+import { Base64 } from 'js-base64'
 import { platform } from 'platforms'
 import * as React from 'react'
 import { resolveGitModules } from 'utils/gitSubmodule'

From d0cbc89747403520775d53eece70e23f88f33304 Mon Sep 17 00:00:00 2001
From: EnixCoda <enixcoda@gmail.com>
Date: Tue, 10 May 2022 23:27:24 +0800
Subject: [PATCH 09/93] build: update react-window and fix scroll logic

---
 package.json                    |  4 ++--
 src/components/FileExplorer.tsx |  2 +-
 yarn.lock                       | 16 ++++++++--------
 3 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/package.json b/package.json
index 8da5673..eeb4a60 100644
--- a/package.json
+++ b/package.json
@@ -30,7 +30,7 @@
     "@types/nprogress": "^0.0.29",
     "@types/react": "^16.8.24",
     "@types/react-dom": "^16.8.5",
-    "@types/react-window": "^1.8.1",
+    "@types/react-window": "^1.8.5",
     "@types/styled-components": "^5.1.3",
     "@types/styled-system__css": "^5.0.14",
     "ini": "^3.0.0",
@@ -40,7 +40,7 @@
     "react": "^17.0.1",
     "react-dom": "^17.0.2",
     "react-use": "^15.3.0",
-    "react-window": "^1.8.5",
+    "react-window": "^1.8.7",
     "styled-components": "^5.2.0",
     "webext-domain-permission-toggle": "^1.0.0",
     "webext-dynamic-content-scripts": "^6.0.3",
diff --git a/src/components/FileExplorer.tsx b/src/components/FileExplorer.tsx
index cd472d9..17525a8 100644
--- a/src/components/FileExplorer.tsx
+++ b/src/components/FileExplorer.tsx
@@ -282,7 +282,7 @@ function ListView({ width, height, metaData, expandTo, renderNodeContext }: List
     if (listRef.current && focusedNode?.path) {
       const index = nodes.findIndex(node => node.path === focusedNode.path)
       if (index !== -1) {
-        listRef.current.scrollToItem(index, 'smart')
+        listRef.current.scrollToItem(index, 'auto')
       }
     }
   }, [focusedNode, nodes])
diff --git a/yarn.lock b/yarn.lock
index cfeb6f3..03a8944 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2582,10 +2582,10 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react-window@^1.8.1":
-  version "1.8.1"
-  resolved "https://registry.yarnpkg.com/@types/react-window/-/react-window-1.8.1.tgz#6e1ceab2e6f2f78dbf1f774ee0e00f1bb0364bb3"
-  integrity sha512-V3k1O5cbfZIRa0VVbQ81Ekq/7w42CK1SuiB9U1oPMTxv270D9qUn7rHb3sZoqMkIJFfB1NZxaH7NRDlk+ToDsg==
+"@types/react-window@^1.8.5":
+  version "1.8.5"
+  resolved "https://registry.yarnpkg.com/@types/react-window/-/react-window-1.8.5.tgz#285fcc5cea703eef78d90f499e1457e9b5c02fc1"
+  integrity sha512-V9q3CvhC9Jk9bWBOysPGaWy/Z0lxYcTXLtLipkt2cnRj1JOSFNF7wqGpkScSXMgBwC+fnVRg/7shwgddBG5ICw==
   dependencies:
     "@types/react" "*"
 
@@ -9528,10 +9528,10 @@ react-use@^15.3.0:
     ts-easing "^0.2.0"
     tslib "^2.0.0"
 
-react-window@^1.8.5:
-  version "1.8.5"
-  resolved "https://registry.yarnpkg.com/react-window/-/react-window-1.8.5.tgz#a56b39307e79979721021f5d06a67742ecca52d1"
-  integrity sha512-HeTwlNa37AFa8MDZFZOKcNEkuF2YflA0hpGPiTT9vR7OawEt+GZbfM6wqkBahD3D3pUjIabQYzsnY/BSJbgq6Q==
+react-window@^1.8.7:
+  version "1.8.7"
+  resolved "https://registry.yarnpkg.com/react-window/-/react-window-1.8.7.tgz#5e9fd0d23f48f432d7022cdb327219353a15f0d4"
+  integrity sha512-JHEZbPXBpKMmoNO1bNhoXOOLg/ujhL/BU4IqVU9r8eQPcy5KQnGHIHDRkJ0ns9IM5+Aq5LNwt3j8t3tIrePQzA==
   dependencies:
     "@babel/runtime" "^7.0.0"
     memoize-one ">=3.1.1 <6"

From 7fadb5fd576e007abcc83d18ebde648e723adeee Mon Sep 17 00:00:00 2001
From: EnixCoda <enixcoda@gmail.com>
Date: Thu, 12 May 2022 23:25:00 +0800
Subject: [PATCH 10/93] build: upgrade react

---
 package.json            |  8 +++----
 src/react-override.d.ts | 10 ++++++++
 yarn.lock               | 53 ++++++++++++++++++++++++++++-------------
 3 files changed, 50 insertions(+), 21 deletions(-)
 create mode 100644 src/react-override.d.ts

diff --git a/package.json b/package.json
index eeb4a60..6a57bdb 100644
--- a/package.json
+++ b/package.json
@@ -28,8 +28,8 @@
     "@types/ini": "^1.3.31",
     "@types/js-base64": "^3.3.1",
     "@types/nprogress": "^0.0.29",
-    "@types/react": "^16.8.24",
-    "@types/react-dom": "^16.8.5",
+    "@types/react": "^18.0.9",
+    "@types/react-dom": "^18.0.3",
     "@types/react-window": "^1.8.5",
     "@types/styled-components": "^5.1.3",
     "@types/styled-system__css": "^5.0.14",
@@ -37,8 +37,8 @@
     "js-base64": "^3.7.2",
     "nprogress": "^0.2.0",
     "pjax-api": "^3.33.0",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.2",
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0",
     "react-use": "^15.3.0",
     "react-window": "^1.8.7",
     "styled-components": "^5.2.0",
diff --git a/src/react-override.d.ts b/src/react-override.d.ts
new file mode 100644
index 0000000..f9fc488
--- /dev/null
+++ b/src/react-override.d.ts
@@ -0,0 +1,10 @@
+// Patch the removed `children` prop
+declare namespace React {
+  interface FunctionComponent<P = {}> {
+    (props: PropsWithChildren<P>, context?: any): ReactElement<any, any> | null;
+    propTypes?: WeakValidationMap<P> | undefined;
+    contextTypes?: ValidationMap<any> | undefined;
+    defaultProps?: Partial<P> | undefined;
+    displayName?: string | undefined;
+  }
+}
diff --git a/yarn.lock b/yarn.lock
index 03a8944..30804b6 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2568,10 +2568,10 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react-dom@^16.8.5":
-  version "16.9.0"
-  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-16.9.0.tgz#ba6ddb00bf5de700b0eb91daa452081ffccbfdea"
-  integrity sha512-OL2lk7LYGjxn4b0efW3Pvf2KBVP0y1v3wip1Bp7nA79NkOpElH98q3WdCEdDj93b2b0zaeBG9DvriuKjIK5xDA==
+"@types/react-dom@^18.0.3":
+  version "18.0.3"
+  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.0.3.tgz#a022ea08c75a476fe5e96b675c3e673363853831"
+  integrity sha512-1RRW9kst+67gveJRYPxGmVy8eVJ05O43hg77G2j5m76/RFJtMbcfAs2viQ2UNsvvDg8F7OfQZx8qQcl6ymygaQ==
   dependencies:
     "@types/react" "*"
 
@@ -2589,7 +2589,7 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react@*", "@types/react@^16.8.24":
+"@types/react@*":
   version "16.9.2"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-16.9.2.tgz#6d1765431a1ad1877979013906731aae373de268"
   integrity sha512-jYP2LWwlh+FTqGd9v7ynUKZzjj98T8x7Yclz479QdRhHfuW9yQ+0jjnD31eXSXutmBpppj5PYNLYLRfnZJvcfg==
@@ -2597,6 +2597,20 @@
     "@types/prop-types" "*"
     csstype "^2.2.0"
 
+"@types/react@^18.0.9":
+  version "18.0.9"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.0.9.tgz#d6712a38bd6cd83469603e7359511126f122e878"
+  integrity sha512-9bjbg1hJHUm4De19L1cHiW0Jvx3geel6Qczhjd0qY5VKVE2X5+x77YxAepuCwVh4vrgZJdgEJw48zrhRIeF4Nw==
+  dependencies:
+    "@types/prop-types" "*"
+    "@types/scheduler" "*"
+    csstype "^3.0.2"
+
+"@types/scheduler@*":
+  version "0.16.2"
+  resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.2.tgz#1a62f89525723dde24ba1b01b092bf5df8ad4d39"
+  integrity sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==
+
 "@types/stack-utils@^2.0.0":
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-2.0.1.tgz#20f18294f797f2209b5f65c8e3b5c8e8261d127c"
@@ -9435,14 +9449,13 @@ react-clientside-effect@^1.2.2:
   dependencies:
     "@babel/runtime" "^7.0.0"
 
-react-dom@^17.0.2:
-  version "17.0.2"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.2.tgz#ecffb6845e3ad8dbfcdc498f0d0a939736502c23"
-  integrity sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==
+react-dom@^18.1.0:
+  version "18.1.0"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.1.0.tgz#7f6dd84b706408adde05e1df575b3a024d7e8a2f"
+  integrity sha512-fU1Txz7Budmvamp7bshe4Zi32d0ll7ect+ccxNu9FlObT605GOEB8BfO4tmRJ39R5Zj831VCpvQ05QPBW5yb+w==
   dependencies:
     loose-envify "^1.1.0"
-    object-assign "^4.1.1"
-    scheduler "^0.20.2"
+    scheduler "^0.22.0"
 
 react-focus-lock@^2.1.0:
   version "2.2.1"
@@ -9536,7 +9549,7 @@ react-window@^1.8.7:
     "@babel/runtime" "^7.0.0"
     memoize-one ">=3.1.1 <6"
 
-react@^16.10.2, react@^17, react@^17.0.1:
+react@^16.10.2, react@^17:
   version "17.0.2"
   resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037"
   integrity sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==
@@ -9544,6 +9557,13 @@ react@^16.10.2, react@^17, react@^17.0.1:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
 
+react@^18.1.0:
+  version "18.1.0"
+  resolved "https://registry.yarnpkg.com/react/-/react-18.1.0.tgz#6f8620382decb17fdc5cc223a115e2adbf104890"
+  integrity sha512-4oL8ivCz5ZEPyclFQXaNksK3adutVS8l2xzZU0cqEFrE9Sb7fC0EFK5uEk74wIreL1DERyjvsU915j1pcT2uEQ==
+  dependencies:
+    loose-envify "^1.1.0"
+
 "readable-stream@1 || 2", readable-stream@^2.0.0, readable-stream@^2.0.1, readable-stream@^2.0.2, readable-stream@^2.0.6, readable-stream@^2.1.5, readable-stream@^2.2.2, readable-stream@^2.3.3, readable-stream@^2.3.6, readable-stream@~2.3.6:
   version "2.3.6"
   resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.6.tgz#b11c27d88b8ff1fbe070643cf94b0c79ae1b0aaf"
@@ -9994,13 +10014,12 @@ saxes@^5.0.1:
   dependencies:
     xmlchars "^2.2.0"
 
-scheduler@^0.20.2:
-  version "0.20.2"
-  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.20.2.tgz#4baee39436e34aa93b4874bddcbf0fe8b8b50e91"
-  integrity sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==
+scheduler@^0.22.0:
+  version "0.22.0"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.22.0.tgz#83a5d63594edf074add9a7198b1bae76c3db01b8"
+  integrity sha512-6QAm1BgQI88NPYymgGQLCZgvep4FyePDWFpXVK+zNSUgHwlqpJy8VEh8Et0KxTACS4VWwMousBElAZOH9nkkoQ==
   dependencies:
     loose-envify "^1.1.0"
-    object-assign "^4.1.1"
 
 schema-utils@2.7.0:
   version "2.7.0"

From 771a10ea578db59557922af311ddd630eb00e521 Mon Sep 17 00:00:00 2001
From: EnixCoda <enixcoda@gmail.com>
Date: Thu, 12 May 2022 23:21:33 +0800
Subject: [PATCH 11/93] build: upgrade UI dependencies

---
 package.json                                  |  19 +-
 src/components/FileExplorer.tsx               |   7 +-
 src/components/Icon.tsx                       |   3 -
 src/components/MetaBar.tsx                    |  20 +-
 src/components/SearchBar.tsx                  |   5 +-
 src/components/SideBarBodyWrapper.tsx         |   2 +-
 src/components/SizeObserver.tsx               |  11 +-
 src/components/ToggleShowButton.tsx           |   7 +-
 .../settings/AccessTokenSettings.tsx          |   4 +-
 src/components/settings/Footer.tsx            |   3 +-
 src/components/settings/SidebarSettings.tsx   |  31 +-
 src/containers/ErrorBoundary.tsx              |   2 +-
 src/containers/Theme.tsx                      | 256 +----
 src/styles/index.scss                         |  53 +-
 src/utils/config/helper.ts                    |   3 -
 ...eResizeHandler.tsx => useResizeHandler.ts} |   0
 yarn.lock                                     | 943 ++++++------------
 17 files changed, 361 insertions(+), 1008 deletions(-)
 rename src/utils/hooks/{useResizeHandler.tsx => useResizeHandler.ts} (100%)

diff --git a/package.json b/package.json
index 6a57bdb..fd8de77 100644
--- a/package.json
+++ b/package.json
@@ -12,7 +12,7 @@
     "dev-safari": "TARGET=safari yarn run dev",
     "debug-firefox": "web-ext run --source-dir=dist --firefox-profile=firefox-profile --profile-create-if-missing --keep-profile-changes --start-url github.com/EnixCoda/Gitako",
     "analyse-bundle": "ANALYSE= NODE_ENV=production webpack",
-    "postinstall": "rm -rf node_modules/@types/react-native && node scripts/fix-pjax-api",
+    "postinstall": "node scripts/fix-pjax-api",
     "build": "VERSION=v$(node scripts/get-version.js) NODE_ENV=production webpack",
     "roll": "make release",
     "test": "yarn run test:parallel && yarn run test:non-parallel",
@@ -20,9 +20,9 @@
     "test:non-parallel": "NODE_ENV=test jest --config __tests__/jest.non-parallel.config.js"
   },
   "dependencies": {
-    "@primer/components": "^22.0.2",
-    "@primer/css": "^15.2.0",
-    "@primer/octicons-react": "^10.0.0",
+    "@primer/css": "^20.0.0",
+    "@primer/octicons-react": "^17.1.0",
+    "@primer/react": "^35.2.1",
     "@sentry/browser": "^6.3.6",
     "@types/history": "^5.0.0",
     "@types/ini": "^1.3.31",
@@ -31,17 +31,16 @@
     "@types/react": "^18.0.9",
     "@types/react-dom": "^18.0.3",
     "@types/react-window": "^1.8.5",
-    "@types/styled-components": "^5.1.3",
-    "@types/styled-system__css": "^5.0.14",
+    "@types/styled-components": "^5.1.25",
     "ini": "^3.0.0",
     "js-base64": "^3.7.2",
     "nprogress": "^0.2.0",
     "pjax-api": "^3.33.0",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
-    "react-use": "^15.3.0",
+    "react-use": "^17.3.2",
     "react-window": "^1.8.7",
-    "styled-components": "^5.2.0",
+    "styled-components": "^5.3.5",
     "webext-domain-permission-toggle": "^1.0.0",
     "webext-dynamic-content-scripts": "^6.0.3",
     "webextension-polyfill": "^0.5.0"
@@ -91,7 +90,7 @@
     "arrowParens": "avoid"
   },
   "resolutions": {
-    "react": "^17",
-    "@types/styled-components": "^5.0.0"
+    "@types/react": "^18.0.9",
+    "@types/react-dom": "^18.0.3"
   }
 }
diff --git a/src/components/FileExplorer.tsx b/src/components/FileExplorer.tsx
index 17525a8..0f4fdc5 100644
--- a/src/components/FileExplorer.tsx
+++ b/src/components/FileExplorer.tsx
@@ -1,4 +1,4 @@
-import { Label, Text } from '@primer/components'
+import { Label, Text } from '@primer/react'
 import { LoadingIndicator } from 'components/LoadingIndicator'
 import { Node } from 'components/Node'
 import { SearchBar } from 'components/SearchBar'
@@ -189,9 +189,8 @@ const RawFileExplorer: React.FC<Props & ConnectorState> = function RawFileExplor
                     <div className={'status'}>
                       <Label
                         title="This repository is large. Gitako has switched to Lazy Mode to improve performance. Folders will be loaded when it gets expanded."
-                        bg="yellow.5"
-                        color="gray.6"
                         className={'lazy-mode'}
+                        variant="attention"
                       >
                         Lazy Mode is ON
                       </Label>
@@ -285,7 +284,7 @@ function ListView({ width, height, metaData, expandTo, renderNodeContext }: List
         listRef.current.scrollToItem(index, 'auto')
       }
     }
-  }, [focusedNode, nodes])
+  }, [focusedNode?.path, nodes])
   // For some reason, removing the deps array above results in bug:
   // If scroll fast and far, then clicking on items would result in redirect
   // Not know the reason :(
diff --git a/src/components/Icon.tsx b/src/components/Icon.tsx
index 1204d18..46eabf9 100644
--- a/src/components/Icon.tsx
+++ b/src/components/Icon.tsx
@@ -19,7 +19,6 @@ import {
   HourglassIcon as Hourglass,
   IconProps,
   MarkdownIcon as Markdown,
-  OctofaceIcon as Octoface,
   PinIcon as Pin,
   ReplyIcon as Reply,
   SearchIcon as Search,
@@ -42,7 +41,6 @@ const iconToComponentMap = {
   Hourglass,
   Submodule,
   Grabber,
-  Octoface,
   ChevronDown,
   X,
   Gear,
@@ -66,7 +64,6 @@ const typeToIconComponentMap: {
   hourglass: 'Hourglass',
   submodule: 'Submodule',
   grabber: 'Grabber',
-  octoface: 'Octoface',
   comment: 'Comment',
   x: 'X',
   pin: 'Pin',
diff --git a/src/components/MetaBar.tsx b/src/components/MetaBar.tsx
index bb7e0cc..3f8449d 100644
--- a/src/components/MetaBar.tsx
+++ b/src/components/MetaBar.tsx
@@ -1,8 +1,8 @@
-import { BranchName, Breadcrumb, Flex, Text } from '@primer/components'
 import { GitBranchIcon } from '@primer/octicons-react'
+import { Box, BranchName, Breadcrumbs, Text } from '@primer/react'
 import { platform } from 'platforms'
 import * as React from 'react'
-import { createAnchorClickHandler } from "utils/createAnchorClickHandler"
+import { createAnchorClickHandler } from 'utils/createAnchorClickHandler'
 
 type Props = {
   metaData: MetaData
@@ -13,20 +13,20 @@ export function MetaBar({ metaData }: Props) {
   const { repoUrl, userUrl, branchUrl } = platform.resolveUrlFromMetaData(metaData)
   return (
     <>
-      <Breadcrumb className={'user-and-repo'}>
-        <Breadcrumb.Item className={'user-name'} href={userUrl}>
+      <Breadcrumbs className={'user-and-repo'}>
+        <Breadcrumbs.Item className={'user-name'} href={userUrl}>
           {userName}
-        </Breadcrumb.Item>
-        <Breadcrumb.Item
+        </Breadcrumbs.Item>
+        <Breadcrumbs.Item
           className={'repo-name'}
           href={repoUrl}
           onClick={createAnchorClickHandler(repoUrl)}
           {...platform.delegatePJAXProps?.()}
         >
           <Text fontWeight="bolder">{repoName}</Text>
-        </Breadcrumb.Item>
-      </Breadcrumb>
-      <Flex paddingTop={1} flexWrap="nowrap" alignItems="flex-start">
+        </Breadcrumbs.Item>
+      </Breadcrumbs>
+      <Box display="flex" paddingTop={1} flexWrap="nowrap" alignItems="flex-start">
         <div className={'octicon-wrapper'}>
           <GitBranchIcon size="small" />
         </div>
@@ -39,7 +39,7 @@ export function MetaBar({ metaData }: Props) {
         >
           {branchName || '...'}
         </BranchName>
-      </Flex>
+      </Box>
     </>
   )
 }
diff --git a/src/components/SearchBar.tsx b/src/components/SearchBar.tsx
index 05a1f96..5c353e9 100644
--- a/src/components/SearchBar.tsx
+++ b/src/components/SearchBar.tsx
@@ -1,5 +1,5 @@
-import { TextInput, TextInputProps } from '@primer/components'
 import { SearchIcon } from '@primer/octicons-react'
+import { TextInput, TextInputProps } from '@primer/react'
 import { useConfigs } from 'containers/ConfigsContext'
 import * as React from 'react'
 import { cx } from 'utils/cx'
@@ -24,8 +24,7 @@ export function SearchBar({ onSearch, onFocus, value }: Props) {
   return (
     <div className={'search-input-wrapper'}>
       <TextInput
-        backgroundColor="white"
-        icon={SearchIcon as any}
+        icon={SearchIcon}
         onFocus={e => {
           onFocus(e)
           e.target.select()
diff --git a/src/components/SideBarBodyWrapper.tsx b/src/components/SideBarBodyWrapper.tsx
index e9a6a98..fff4d2a 100644
--- a/src/components/SideBarBodyWrapper.tsx
+++ b/src/components/SideBarBodyWrapper.tsx
@@ -95,7 +95,7 @@ export function SideBarBodyWrapper({
   }, [sizeVariableMountPoint])
 
   const onMouseLeave = React.useCallback(
-    e => {
+    <E extends HTMLElement>(e: React.MouseEvent<E>) => {
       if (blockLeaveRef.current) return
       onLeave?.(e)
     },
diff --git a/src/components/SizeObserver.tsx b/src/components/SizeObserver.tsx
index 9739e2f..0b24933 100644
--- a/src/components/SizeObserver.tsx
+++ b/src/components/SizeObserver.tsx
@@ -6,10 +6,13 @@ type Size = {
   height: number
 }
 
-type Props = {
-  type?: string | React.ComponentType
-  children(size: Partial<Size>): React.ReactNode
-} & React.HTMLAttributes<HTMLElement>
+type Props = Override<
+  React.HTMLAttributes<HTMLElement>,
+  {
+    type?: string | React.ComponentType
+    children(size: Partial<Size>): React.ReactNode
+  }
+>
 
 export function SizeObserver({ type = 'div', children, ...rest }: Props) {
   const ref = React.useRef<any>()
diff --git a/src/components/ToggleShowButton.tsx b/src/components/ToggleShowButton.tsx
index c1ccf0b..baf0fe8 100644
--- a/src/components/ToggleShowButton.tsx
+++ b/src/components/ToggleShowButton.tsx
@@ -4,7 +4,6 @@ import * as React from 'react'
 import { useDebounce, useWindowSize } from 'react-use'
 import { cx } from 'utils/cx'
 import { useResizeHandler } from 'utils/hooks/useResizeHandler'
-import { Icon } from './Icon'
 
 type Props = {
   error?: string | null
@@ -67,11 +66,7 @@ export function ToggleShowButton({ error, className, onClick, onHover }: Props)
         onPointerDown={onPointerDown}
         title={'Gitako (draggable)'}
       >
-        {config.value.toggleButtonContent === 'octoface' ? (
-          <Icon className={'octoface-icon'} type={'octoface'} />
-        ) : (
-          <img className={'tentacle'} draggable={false} src={iconURL} />
-        )}
+        <img className={'tentacle'} draggable={false} src={iconURL} />
       </button>
       {error && <span className={'error-message'}>{error}</span>}
     </div>
diff --git a/src/components/settings/AccessTokenSettings.tsx b/src/components/settings/AccessTokenSettings.tsx
index b675dbe..3f142fa 100644
--- a/src/components/settings/AccessTokenSettings.tsx
+++ b/src/components/settings/AccessTokenSettings.tsx
@@ -1,4 +1,4 @@
-import { Button, Text, TextInput } from '@primer/components'
+import { Button, Text, TextInput } from '@primer/react'
 import { wikiLinks } from 'components/settings/SettingsBar'
 import { useConfigs } from 'containers/ConfigsContext'
 import { platform } from 'platforms'
@@ -109,7 +109,7 @@ export function AccessTokenSettings(props: React.PropsWithChildren<Props>) {
           )}
           <div className={'access-token-input-control'}>
             <TextInput
-              marginRight={1}
+              sx={{ marginRight: 1 }}
               className={'access-token-input'}
               value={accessToken}
               placeholder="Or input here manually"
diff --git a/src/components/settings/Footer.tsx b/src/components/settings/Footer.tsx
index b5772df..23ed12b 100644
--- a/src/components/settings/Footer.tsx
+++ b/src/components/settings/Footer.tsx
@@ -1,4 +1,4 @@
-import { Link } from '@primer/components'
+import { Link } from '@primer/react'
 import { Icon } from 'components/Icon'
 import { VERSION } from 'env'
 import * as React from 'react'
@@ -14,7 +14,6 @@ export function Footer(props: Props) {
     <div className={'gitako-footer'}>
       <Link
         className={'version'}
-        fontSize={14}
         href={wikiLinks.changeLog}
         target={'_blank'}
         title={'Check out new features!'}
diff --git a/src/components/settings/SidebarSettings.tsx b/src/components/settings/SidebarSettings.tsx
index 1370a66..8d2f403 100644
--- a/src/components/settings/SidebarSettings.tsx
+++ b/src/components/settings/SidebarSettings.tsx
@@ -1,9 +1,7 @@
-import { Button, TextInput } from '@primer/components'
-import { Option, SelectInput } from 'components/SelectInput'
+import { Button, TextInput } from '@primer/react'
 import { SimpleToggleField } from 'components/SimpleToggleField'
 import { useConfigs } from 'containers/ConfigsContext'
 import * as React from 'react'
-import { Config } from 'utils/config/helper'
 import { friendlyFormatShortcut } from 'utils/general'
 import { useStateIO } from 'utils/hooks/useStateIO'
 import * as keyHelper from 'utils/keyHelper'
@@ -12,19 +10,6 @@ import { SettingsSection } from './SettingsSection'
 
 type Props = {}
 
-const toggleButtonContentOptions: Option<Config['toggleButtonContent']>[] = [
-  {
-    key: 'logo',
-    value: 'logo',
-    label: `Gitako Logo`,
-  },
-  {
-    key: 'octoface',
-    value: 'octoface',
-    label: `The Classic Octoface`,
-  },
-]
-
 export function SidebarSettings(props: React.PropsWithChildren<Props>) {
   const configContext = useConfigs()
   const useToggleShowSideBarShortcut = useStateIO(configContext.value.shortcut)
@@ -41,7 +26,7 @@ export function SidebarSettings(props: React.PropsWithChildren<Props>) {
         <div className={'toggle-shortcut-input-control'}>
           <TextInput
             id="toggle-sidebar-shortcut"
-            marginRight={1}
+            sx={{ marginRight: 1 }}
             className={'toggle-shortcut-input'}
             onFocus={() => focused.onChange(true)}
             onBlur={() => focused.onChange(false)}
@@ -78,18 +63,6 @@ export function SidebarSettings(props: React.PropsWithChildren<Props>) {
           )}
         </div>
       </Field>
-      <Field id="toggle-button-content" title="Icon of the toggle button">
-        <SelectInput
-          id="toggle-button-content"
-          options={toggleButtonContentOptions}
-          onChange={v => {
-            configContext.onChange({
-              toggleButtonContent: v,
-            })
-          }}
-          value={configContext.value.toggleButtonContent}
-        />
-      </Field>
       <SimpleToggleField
         field={{
           key: 'intelligentToggle',
diff --git a/src/containers/ErrorBoundary.tsx b/src/containers/ErrorBoundary.tsx
index 0f8c74e..1f9ba7c 100644
--- a/src/containers/ErrorBoundary.tsx
+++ b/src/containers/ErrorBoundary.tsx
@@ -1,7 +1,7 @@
 import { raiseError } from 'analytics'
 import * as React from 'react'
 
-export class ErrorBoundary extends React.PureComponent {
+export class ErrorBoundary extends React.PureComponent<React.PropsWithChildren<{}>> {
   componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
     raiseError(error, errorInfo)
   }
diff --git a/src/containers/Theme.tsx b/src/containers/Theme.tsx
index d9c082d..d6818a5 100644
--- a/src/containers/Theme.tsx
+++ b/src/containers/Theme.tsx
@@ -1,237 +1,5 @@
-import { theme } from '@primer/components'
+import { ThemeProvider } from '@primer/react'
 import * as React from 'react'
-import { ThemeProvider } from 'styled-components'
-const { lighten, rgba, desaturate } = require('polished')
-
-// Refactored from https://github.com/primer/components/blob/main/src/theme-preval.js
-export function generateDarkTheme() {
-  const primitives = {
-    black: '#f0f6fc',
-    white: '#010409',
-    gray: [
-      '#0d1117',
-      '#161b22',
-      '#21262d',
-      '#30363d',
-      '#484f58',
-      '#6e7681',
-      '#8b949e',
-      '#b1bac4',
-      '#c9d1d9',
-      '#f0f6fc',
-    ],
-    blue: [
-      '#051d4d',
-      '#0c2d6b',
-      '#0d419d',
-      '#1158c7',
-      '#1f6feb',
-      '#388bfd',
-      '#58a6ff',
-      '#79c0ff',
-      '#a5d6ff',
-      '#cae8ff',
-    ],
-    green: [
-      '#04260f',
-      '#033a16',
-      '#0f5323',
-      '#196c2e',
-      '#238636',
-      '#2ea043',
-      '#3fb950',
-      '#56d364',
-      '#7ee787',
-      '#aff5b4',
-    ],
-    yellow: [
-      '#341a00',
-      '#4b2900',
-      '#693e00',
-      '#845306',
-      '#9e6a03',
-      '#bb8009',
-      '#d29922',
-      '#e3b341',
-      '#f2cc60',
-      '#f8e3a1',
-    ],
-    orange: [
-      '#3d1300',
-      '#5a1e02',
-      '#762d0a',
-      '#9b4215',
-      '#bd561d',
-      '#db6d28',
-      '#f0883e',
-      '#ffa657',
-      '#ffc680',
-      '#ffdfb6',
-    ],
-    red: [
-      '#490202',
-      '#67060c',
-      '#8e1519',
-      '#b62324',
-      '#da3633',
-      '#f85149',
-      '#ff7b72',
-      '#ffa198',
-      '#ffc1ba',
-      '#ffdcd7',
-    ],
-    purple: [
-      '#271052',
-      '#3c1e70',
-      '#553098',
-      '#6e40c9',
-      '#8957e5',
-      '#a371f7',
-      '#bc8cff',
-      '#d2a8ff',
-      '#e2c5ff',
-      '#eddeff',
-    ],
-    pink: [
-      '#42062a',
-      '#5e103e',
-      '#7d2457',
-      '#9e3670',
-      '#bf4b8a',
-      '#db61a2',
-      '#f778ba',
-      '#ff9bce',
-      '#ffbedd',
-      '#ffdaec',
-    ],
-  }
-
-  const { black, white, pink, gray, blue, green, orange, purple, red, yellow } = primitives
-
-  // General
-  // any :(
-  const colors: any = {
-    black,
-    white,
-    gray,
-    blue,
-    green,
-    orange,
-    purple,
-    red,
-    yellow,
-    pink,
-  }
-
-  colors.bodytext = gray[9]
-
-  colors.blackfade15 = rgba(black, 0.15)
-  colors.blackfade30 = rgba(black, 0.3)
-  colors.blackfade50 = rgba(black, 0.5)
-  colors.blackfade70 = rgba(black, 0.7)
-  colors.blackfade85 = rgba(black, 0.85)
-  colors.whitefade15 = rgba(white, 0.15)
-  colors.whitefade30 = rgba(white, 0.3)
-  colors.whitefade50 = rgba(white, 0.5)
-  colors.whitefade70 = rgba(white, 0.7)
-  colors.whitefade85 = rgba(white, 0.85)
-
-  colors.state = {
-    error: red[5],
-    failure: red[5],
-    pending: yellow[7],
-    queued: yellow[7],
-    success: green[5],
-    unknown: gray[4],
-  }
-
-  colors.border = {
-    blackFade: colors.blackfade15,
-    blue: blue[5],
-    blueLight: blue[2],
-    grayLight: lighten(0.03, gray[2]),
-    gray: gray[2],
-    grayDark: gray[3],
-    grayDarker: gray[7],
-    green: green[4],
-    greenLight: desaturate(0.4, green[3]),
-    purple: purple[5],
-    red: red[5],
-    redLight: desaturate(0.6, red[3]),
-    white,
-    whiteFade: colors.whitefade15,
-    yellow: desaturate(0.6, yellow[3]),
-  }
-
-  colors.text = {
-    white,
-    gray: gray[6],
-    grayLight: gray[5],
-    grayDark: gray[8],
-    red: red[6],
-  }
-  colors.bg = {
-    gray: gray[1],
-    grayLight: gray[3],
-    grayDark: gray[9],
-    disabled: gray[2],
-  }
-  colors.accent = orange[5]
-  colors.labels = {
-    gray: gray[2],
-    grayText: gray[9],
-    grayDark: gray[5],
-    grayDarkText: gray[9],
-    blue: blue[5],
-    blueText: blue[5],
-    orange: orange[5],
-    orangeText: orange[6],
-    green: green[5],
-    greenText: green[6],
-    red: red[6],
-    redText: red[6],
-    yellow: yellow[6],
-    yellowText: yellow[9],
-    pink: pink[4],
-    pinkText: pink[6],
-    purple: purple[4],
-  }
-
-  // Components
-
-  const buttons = {
-    default: {
-      color: {
-        default: colors.text.grayDark,
-        disabled: gray[4],
-      },
-      border: {
-        default: rgba(black, 0.12),
-        active: colors.border.grayDark,
-        disabled: colors.border.grayLight,
-      },
-      bg: {
-        default: colors.bg.grayLight,
-        hover: colors.gray[3],
-        active: colors.bg.gray,
-        disabled: colors.bg.grayLight,
-      },
-      shadow: {
-        default: `0 0 transparent, 0 0 transparent`,
-        hover: `0 0 transparent, 0 0 transparent`,
-        active: `0 0 transparent 0 0 transparent`,
-        focus: `0 0 transparent 0 0 transparent`,
-      },
-    },
-  }
-
-  const theme = {
-    colors,
-    buttons,
-  }
-
-  return theme
-}
 
 const getIsPreferDarkTheme = () => {
   const colorMode = document.documentElement.dataset.colorMode
@@ -242,27 +10,19 @@ const getIsPreferDarkTheme = () => {
 }
 // No need to watch the property as it does not change in repo pages
 function usePreferDarkTheme() {
-  const [is, setIs] = React.useState(getIsPreferDarkTheme)
+  const [prefer, setPrefer] = React.useState(getIsPreferDarkTheme)
   React.useEffect(() => {
-    const update = () => {
-      console.log(`updating color scheme`)
-      setIs(getIsPreferDarkTheme())
-    }
     const match = window.matchMedia('(prefers-color-scheme: dark)')
+    const update = () => setPrefer(match.matches) // `.matches` will update on media change
     match.addEventListener('change', update)
     return () => match.removeEventListener('change', update)
   }, [])
-  return is
-}
-
-function useThemeConfig() {
-  const preferDarkTheme = usePreferDarkTheme()
-  return React.useMemo(() => {
-    return preferDarkTheme ? generateDarkTheme() : theme
-  }, [preferDarkTheme])
+  return prefer
 }
 
 export function Theme({ children }: React.PropsWithChildren<{}>) {
-  const theme = useThemeConfig()
-  return <ThemeProvider theme={theme}>{children}</ThemeProvider>
+  const preferDarkTheme = usePreferDarkTheme()
+  return (
+    <ThemeProvider colorMode={preferDarkTheme ? 'night' : 'day'} dayScheme="" {...{ children }} />
+  )
 }
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 33abe32..52ec238 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -91,8 +91,8 @@ $minimal-z-index: max(
   display: block;
   cursor: pointer;
   user-select: none;
-  -webkit-mask-image: url('~@primer/octicons/build/svg/' + $icon-name + '.svg?inline');
-  mask-image: url('~@primer/octicons/build/svg/' + $icon-name + '.svg?inline');
+  -webkit-mask-image: url('~@primer/octicons-react/build/svg/' + $icon-name + '.svg?inline');
+  mask-image: url('~@primer/octicons-react/build/svg/' + $icon-name + '.svg?inline');
   -webkit-mask-size: contain;
   mask-size: contain;
   -webkit-mask-position: center;
@@ -129,10 +129,10 @@ $minimal-z-index: max(
         align-items: center;
 
         &::before {
-          width: 10px;
+          width: 16px;
           height: 20px;
           transition: 0.25s ease;
-          @include pseudo-primer-icon('chevron-down');
+          @include pseudo-primer-icon('chevron-down-16');
         }
 
         @include interactive-background-on-before(
@@ -195,7 +195,7 @@ $minimal-z-index: max(
           width: 100%;
           height: 100%;
           display: block;
-          background-image: url('~@primer/octicons-react/build/svg/clippy-16.svg?inline');
+          background-image: url('~@primer/octicons-react/build/svg/copy-16.svg?inline');
           background-position: center;
           background-repeat: no-repeat;
           &.success {
@@ -330,26 +330,6 @@ $minimal-z-index: max(
       cursor: not-allowed;
     }
 
-    .octoface-icon {
-      @include flex-center();
-
-      width: 32px;
-      height: 32px;
-      padding: 4px;
-      border-radius: 6px;
-      @include interactive-frame;
-      color: var(--gitako-fg-default);
-      &:active {
-        color: var(--gitako-fg-subtle);
-      }
-      transition: all ease 0.3s;
-      font-size: 16px;
-      transform: translateX(8px);
-      &:active,
-      &:hover {
-        transform: translateX(12px);
-      }
-    }
     .tentacle {
       width: 40px;
       height: 40px;
@@ -489,7 +469,6 @@ $minimal-z-index: max(
         padding: 6px 10px;
         flex-shrink: 0;
         position: relative; // prevent overlap by outline of other elements
-        border-bottom: 1px solid var(--gitako-border-default);
 
         .user-and-repo {
           display: inline; // would be override by CSS rule of section from @primer/css
@@ -563,6 +542,7 @@ $minimal-z-index: max(
       .loading-indicator-container {
         width: 100%;
         height: 100%;
+        border-top: 1px solid var(--gitako-border-default);
         @include flex-center();
 
         .loading-indicator {
@@ -592,7 +572,14 @@ $minimal-z-index: max(
         flex-direction: column;
         flex-wrap: nowrap;
         &.freeze {
-          filter: blur(1.5px) opacity(0.6) grayscale(0.9);
+          filter: blur(1.5px) opacity(0.6) grayscale(0.9) brightness(0.8);
+          transition: filter 0.25s ease;
+          &:hover {
+            filter: blur(1.5px) opacity(0.6) grayscale(0.9) brightness(0.9);
+          }
+          &:active {
+            filter: blur(1.5px) opacity(0.6) grayscale(0.9) brightness(0.7);
+          }
           cursor: pointer;
 
           > * {
@@ -608,9 +595,9 @@ $minimal-z-index: max(
           .search-input {
             width: 100%;
             box-shadow: none; // stay low
-            border: none; // reset borders on other sides
-            border-bottom: 1px solid var(--gitako-border-default);
+            border: none;
             border-radius: 0;
+            border-top: 1px solid var(--gitako-border-default);
             color: var(--gitako-fg-default);
             background: var(--gitako-bg-default);
             padding-right: 40px; // save space for actions
@@ -649,6 +636,7 @@ $minimal-z-index: max(
 
         .status {
           padding: 4px;
+          background: var(--gitako-bg-subtle);
 
           .lazy-mode {
             cursor: help;
@@ -659,6 +647,7 @@ $minimal-z-index: max(
           position: relative;
           flex: 1;
           overflow: hidden;
+          border-top: 1px solid var(--gitako-border-default);
 
           // Put this inside files will help files to get proper size derived from parents, regardless of its content size
           .magic-size-container {
@@ -954,14 +943,14 @@ $minimal-z-index: max(
                 position: absolute;
                 right: 6px;
                 top: 8px;
-                width: 10px;
+                width: 16px;
                 height: 20px;
 
                 &::before {
-                  width: 10px;
+                  width: 16px;
                   height: 20px;
                   background-color: var(--gitako-fg-subtle);
-                  @include pseudo-primer-icon('chevron-down');
+                  @include pseudo-primer-icon('chevron-down-16');
                 }
               }
             }
diff --git a/src/utils/config/helper.ts b/src/utils/config/helper.ts
index ea3c369..d643876 100644
--- a/src/utils/config/helper.ts
+++ b/src/utils/config/helper.ts
@@ -12,7 +12,6 @@ export type Config = {
   intelligentToggle: boolean | null // `null` stands for intelligent, boolean for sidebar open state
   icons: 'rich' | 'dim' | 'native'
   toggleButtonVerticalDistance: number
-  toggleButtonContent: 'logo' | 'octoface'
   recursiveToggleFolder: 'shift' | 'alt'
   searchMode: SearchMode
   sidebarToggleMode: 'persistent' | 'float'
@@ -33,7 +32,6 @@ enum configKeys {
   intelligentToggle = 'intelligentToggle',
   icons = 'icons',
   toggleButtonVerticalDistance = 'toggleButtonVerticalDistance',
-  toggleButtonContent = 'toggleButtonContent',
   recursiveToggleFolder = 'recursiveToggleFolder',
   searchMode = 'searchMode',
   sidebarToggleMode = 'sidebarToggleMode',
@@ -57,7 +55,6 @@ export const defaultConfigs: Config = {
   intelligentToggle: null,
   icons: 'rich',
   toggleButtonVerticalDistance: 124, // align with GitHub's navbar items
-  toggleButtonContent: 'logo',
   recursiveToggleFolder: 'shift',
   searchMode: 'fuzzy',
   sidebarToggleMode: 'float',
diff --git a/src/utils/hooks/useResizeHandler.tsx b/src/utils/hooks/useResizeHandler.ts
similarity index 100%
rename from src/utils/hooks/useResizeHandler.tsx
rename to src/utils/hooks/useResizeHandler.ts
diff --git a/yarn.lock b/yarn.lock
index 30804b6..7a27237 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -41,13 +41,6 @@
   dependencies:
     "@babel/highlight" "^7.10.3"
 
-"@babel/code-frame@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.10.4.tgz#168da1a36e90da68ae8d49c0f1b48c7c6249213a"
-  integrity sha512-vG6SvB6oYEhvgisZNFRmRCUkLz11c7rp+tbNTynGqc6mS1d5ATd/sGyV6W0KZZnXRKMTzZDRgQT3Ou9jhpAfUg==
-  dependencies:
-    "@babel/highlight" "^7.10.4"
-
 "@babel/code-frame@^7.12.13", "@babel/code-frame@^7.14.5":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.14.5.tgz#23b08d740e83f49c5e59945fbf1b43e80bbf4edb"
@@ -146,15 +139,6 @@
     lodash "^4.17.13"
     source-map "^0.5.0"
 
-"@babel/generator@^7.11.5":
-  version "7.11.6"
-  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.11.6.tgz#b868900f81b163b4d464ea24545c61cbac4dc620"
-  integrity sha512-DWtQ1PV3r+cLbySoHrwn9RWEgKMBLLma4OBQloPRyDYvc5msJM9kvTLo1YnlJd1P/ZuKbdli3ijr5q3FvAF3uA==
-  dependencies:
-    "@babel/types" "^7.11.5"
-    jsesc "^2.5.1"
-    source-map "^0.5.0"
-
 "@babel/generator@^7.14.5", "@babel/generator@^7.7.2":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.14.5.tgz#848d7b9f031caca9d0cd0af01b063f226f52d785"
@@ -164,6 +148,15 @@
     jsesc "^2.5.1"
     source-map "^0.5.0"
 
+"@babel/generator@^7.17.10":
+  version "7.17.10"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.17.10.tgz#c281fa35b0c349bbe9d02916f4ae08fc85ed7189"
+  integrity sha512-46MJZZo9y3o4kmhBVc7zW7i8dtR1oIK/sdO5NcfcZRhTGYi+KKJRtHNgsU6c4VUcJmUNV/LQdebD/9Dlv4K+Tg==
+  dependencies:
+    "@babel/types" "^7.17.10"
+    "@jridgewell/gen-mapping" "^0.1.0"
+    jsesc "^2.5.1"
+
 "@babel/generator@^7.17.9":
   version "7.17.9"
   resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.17.9.tgz#f4af9fd38fa8de143c29fce3f71852406fc1e2fc"
@@ -184,14 +177,7 @@
     source-map "^0.5.0"
     trim-right "^1.0.1"
 
-"@babel/helper-annotate-as-pure@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.0.0.tgz#323d39dd0b50e10c7c06ca7d7638e6864d8c5c32"
-  integrity sha512-3UYcJUj9kvSLbLbUIfQTqzcy5VX7GRZ/CCDrnOaZorFFM01aXp1+GJwuFGV4NDDoAS+mOUyHcO6UD/RfqOks3Q==
-  dependencies:
-    "@babel/types" "^7.0.0"
-
-"@babel/helper-annotate-as-pure@^7.16.7":
+"@babel/helper-annotate-as-pure@^7.16.0", "@babel/helper-annotate-as-pure@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.16.7.tgz#bb2339a7534a9c128e3102024c60760a3a7f3862"
   integrity sha512-s6t2w/IPQVTAET1HitoowRGXooX8mCgtuP5195wD/QJPV6wYjpujCGF7JuMODVX2ZAJOf1GT6DT9MHEZvLOFSw==
@@ -293,15 +279,6 @@
     "@babel/template" "^7.10.3"
     "@babel/types" "^7.10.3"
 
-"@babel/helper-function-name@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.10.4.tgz#d2d3b20c59ad8c47112fa7d2a94bc09d5ef82f1a"
-  integrity sha512-YdaSyz1n8gY44EmN7x44zBn9zQ1Ry2Y+3GTA+3vH6Mizke1Vw0aWDM66FOYEPw8//qKkmqOckrGgTYa+6sceqQ==
-  dependencies:
-    "@babel/helper-get-function-arity" "^7.10.4"
-    "@babel/template" "^7.10.4"
-    "@babel/types" "^7.10.4"
-
 "@babel/helper-function-name@^7.14.5":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.14.5.tgz#89e2c474972f15d8e233b52ee8c480e2cfcd50c4"
@@ -333,13 +310,6 @@
   dependencies:
     "@babel/types" "^7.10.3"
 
-"@babel/helper-get-function-arity@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/helper-get-function-arity/-/helper-get-function-arity-7.10.4.tgz#98c1cbea0e2332f33f9a4661b8ce1505b2c19ba2"
-  integrity sha512-EkN3YDB+SRDgiIUnNgcmiD361ti+AVbL3f3Henf6dqqUyr5dMsorno0lJWJuLhDhkI5sYEpgj6y9kB8AOU1I2A==
-  dependencies:
-    "@babel/types" "^7.10.4"
-
 "@babel/helper-get-function-arity@^7.14.5":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/helper-get-function-arity/-/helper-get-function-arity-7.14.5.tgz#25fbfa579b0937eee1f3b805ece4ce398c431815"
@@ -382,12 +352,12 @@
   dependencies:
     "@babel/types" "^7.17.0"
 
-"@babel/helper-module-imports@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.0.0.tgz#96081b7111e486da4d2cd971ad1a4fe216cc2e3d"
-  integrity sha512-aP/hlLq01DWNEiDg4Jn23i+CXxW/owM4WpDLFUbpjxe4NS3BhLVZQ5i7E0ZrxuQ/vwekIeciyamgB1UIYxxM6A==
+"@babel/helper-module-imports@^7.0.0", "@babel/helper-module-imports@^7.12.13", "@babel/helper-module-imports@^7.16.0", "@babel/helper-module-imports@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.16.7.tgz#25612a8091a999704461c8a222d0efec5d091437"
+  integrity sha512-LVtS6TqjJHFc+nYeITRo6VLXve70xmq7wPhWTqDJusJEgGmkAACWwMiTNrvfoQo6hEhFwAIixNkvB0jPXDL8Wg==
   dependencies:
-    "@babel/types" "^7.0.0"
+    "@babel/types" "^7.16.7"
 
 "@babel/helper-module-imports@^7.10.1":
   version "7.10.3"
@@ -396,13 +366,6 @@
   dependencies:
     "@babel/types" "^7.10.3"
 
-"@babel/helper-module-imports@^7.12.13", "@babel/helper-module-imports@^7.16.7":
-  version "7.16.7"
-  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.16.7.tgz#25612a8091a999704461c8a222d0efec5d091437"
-  integrity sha512-LVtS6TqjJHFc+nYeITRo6VLXve70xmq7wPhWTqDJusJEgGmkAACWwMiTNrvfoQo6hEhFwAIixNkvB0jPXDL8Wg==
-  dependencies:
-    "@babel/types" "^7.16.7"
-
 "@babel/helper-module-imports@^7.14.5":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.14.5.tgz#6d1a44df6a38c957aa7c312da076429f11b422f3"
@@ -575,13 +538,6 @@
   dependencies:
     "@babel/types" "^7.10.1"
 
-"@babel/helper-split-export-declaration@^7.11.0":
-  version "7.11.0"
-  resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.11.0.tgz#f8a491244acf6a676158ac42072911ba83ad099f"
-  integrity sha512-74Vejvp6mHkGE+m+k5vHY93FX2cAtrw1zXrZXRlG4l410Nm9PxfEiVTn1PjDPV5SnmieiueY4AFg2xqhNFuuZg==
-  dependencies:
-    "@babel/types" "^7.11.0"
-
 "@babel/helper-split-export-declaration@^7.14.5":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.14.5.tgz#22b23a54ef51c2b7605d851930c1976dd0bc693a"
@@ -608,11 +564,6 @@
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.10.3.tgz#60d9847f98c4cea1b279e005fdb7c28be5412d15"
   integrity sha512-bU8JvtlYpJSBPuj1VUmKpFGaDZuLxASky3LhaKj3bmpSTY6VWooSM8msk+Z0CZoErFye2tlABF6yDkT3FOPAXw==
 
-"@babel/helper-validator-identifier@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.10.4.tgz#a78c7a7251e01f616512d31b10adcf52ada5e0d2"
-  integrity sha512-3U9y+43hz7ZM+rzG24Qe2mufW5KhvFg/NhnNph+i9mgCtdTCtMJuI1TMkrIUiK7Ix4PYlRF9I5dhqaLYA/ADXw==
-
 "@babel/helper-validator-identifier@^7.14.5":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.5.tgz#d0f0e277c512e0c938277faa85a3968c9a44c0e8"
@@ -688,15 +639,6 @@
     chalk "^2.0.0"
     js-tokens "^4.0.0"
 
-"@babel/highlight@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.10.4.tgz#7d1bdfd65753538fabe6c38596cdb76d9ac60143"
-  integrity sha512-i6rgnR/YgPEQzZZnbTHHuZdlE8qyoBNalD6F+q4vAFlcMEcqmkoG+mPqJYJCo63qPf74+Y1UZsl3l6f7/RIkmA==
-  dependencies:
-    "@babel/helper-validator-identifier" "^7.10.4"
-    chalk "^2.0.0"
-    js-tokens "^4.0.0"
-
 "@babel/highlight@^7.14.5":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.14.5.tgz#6861a52f03966405001f6aa534a01a24d99e8cd9"
@@ -720,11 +662,6 @@
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.10.3.tgz#7e71d892b0d6e7d04a1af4c3c79d72c1f10f5315"
   integrity sha512-oJtNJCMFdIMwXGmx+KxuaD7i3b8uS7TTFYW/FNG2BT8m+fmGHoiPYoH0Pe3gya07WuFmM5FCDIr1x0irkD/hyA==
 
-"@babel/parser@^7.10.4", "@babel/parser@^7.11.5":
-  version "7.11.5"
-  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.11.5.tgz#c7ff6303df71080ec7a4f5b8c003c58f1cf51037"
-  integrity sha512-X9rD8qqm695vgmeaQ4fvz/o3+Wk4ZzQvSHkDBgpYKxpD4qTAUm88ZKtHkVqIOsYFFbIQ6wQYhC6q7pjqVK0E0Q==
-
 "@babel/parser@^7.14.5", "@babel/parser@^7.14.6", "@babel/parser@^7.14.7", "@babel/parser@^7.7.2":
   version "7.14.7"
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.14.7.tgz#6099720c8839ca865a2637e6c85852ead0bdb595"
@@ -735,6 +672,11 @@
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.17.9.tgz#9c94189a6062f0291418ca021077983058e171ef"
   integrity sha512-vqUSBLP8dQHFPdPi9bc5GK9vRkYHJ49fsZdtoJ8EQ8ibpwk5rPKfvNIwChB0KVXcIjcepEBBd2VHC5r9Gy8ueg==
 
+"@babel/parser@^7.17.10":
+  version "7.17.10"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.17.10.tgz#873b16db82a8909e0fbd7f115772f4b739f6ce78"
+  integrity sha512-n2Q6i+fnJqzOaq2VkdXxy2TCPCWQZHiCo0XqmrCvDWcZQKRyZzYi4Z0yxlBuN0w+r2ZHmre+Q087DSrw3pbJDQ==
+
 "@babel/parser@^7.6.0":
   version "7.6.0"
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.6.0.tgz#3e05d0647432a8326cb28d0de03895ae5a57f39b"
@@ -1439,14 +1381,6 @@
     "@babel/helper-validator-option" "^7.16.7"
     "@babel/plugin-transform-typescript" "^7.16.7"
 
-"@babel/runtime-corejs3@^7.7.4":
-  version "7.8.7"
-  resolved "https://registry.yarnpkg.com/@babel/runtime-corejs3/-/runtime-corejs3-7.8.7.tgz#8209d9dff2f33aa2616cb319c83fe159ffb07b8c"
-  integrity sha512-sc7A+H4I8kTd7S61dgB9RomXu/C+F4IrRr4Ytze4dnfx7AXEpCrejSNpjx7vq6y/Bak9S6Kbk65a/WgMLtg43Q==
-  dependencies:
-    core-js-pure "^3.0.0"
-    regenerator-runtime "^0.13.4"
-
 "@babel/runtime@7.13.9":
   version "7.13.9"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.13.9.tgz#97dbe2116e2630c489f22e0656decd60aaa1fcee"
@@ -1468,17 +1402,17 @@
   dependencies:
     regenerator-runtime "^0.13.2"
 
-"@babel/runtime@^7.7.4", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.4":
-  version "7.8.7"
-  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.8.7.tgz#8fefce9802db54881ba59f90bb28719b4996324d"
-  integrity sha512-+AATMUFppJDw6aiR5NVPHqIQBlV/Pj8wY/EZH+lmvRdUo9xBaz/rF3alAwFJQavvKfeOlPE7oaaDHVbcySbCsg==
+"@babel/runtime@^7.6.2":
+  version "7.17.9"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.17.9.tgz#d19fbf802d01a8cb6cf053a64e472d42c434ba72"
+  integrity sha512-lSiBBvodq29uShpWGNbgFdKYNiFDo5/HIYsaCEY9ff4sb10x9jizo2+pRrSyF4jKZCXqgzuqBOQKbUm90gQwJg==
   dependencies:
     regenerator-runtime "^0.13.4"
 
-"@babel/runtime@^7.8.7":
-  version "7.10.3"
-  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.10.3.tgz#670d002655a7c366540c67f6fd3342cd09500364"
-  integrity sha512-RzGO0RLSdokm9Ipe/YD+7ww8X2Ro79qiXZF3HU9ljrM+qnJmH1Vqth+hbiQZy761LnMJTMitHDuKVYTk3k4dLw==
+"@babel/runtime@^7.7.6", "@babel/runtime@^7.8.4":
+  version "7.8.7"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.8.7.tgz#8fefce9802db54881ba59f90bb28719b4996324d"
+  integrity sha512-+AATMUFppJDw6aiR5NVPHqIQBlV/Pj8wY/EZH+lmvRdUo9xBaz/rF3alAwFJQavvKfeOlPE7oaaDHVbcySbCsg==
   dependencies:
     regenerator-runtime "^0.13.4"
 
@@ -1500,15 +1434,6 @@
     "@babel/parser" "^7.10.3"
     "@babel/types" "^7.10.3"
 
-"@babel/template@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.10.4.tgz#3251996c4200ebc71d1a8fc405fba940f36ba278"
-  integrity sha512-ZCjD27cGJFUB6nmCB1Enki3r+L5kJveX9pq1SvAUKoICy6CZ9yD8xO086YXdYhvNjBdnekm4ZnaP5yC8Cs/1tA==
-  dependencies:
-    "@babel/code-frame" "^7.10.4"
-    "@babel/parser" "^7.10.4"
-    "@babel/types" "^7.10.4"
-
 "@babel/template@^7.14.5", "@babel/template@^7.3.3":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.14.5.tgz#a9bc9d8b33354ff6e55a9c60d1109200a68974f4"
@@ -1589,19 +1514,20 @@
     globals "^11.1.0"
 
 "@babel/traverse@^7.4.5":
-  version "7.11.5"
-  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.11.5.tgz#be777b93b518eb6d76ee2e1ea1d143daa11e61c3"
-  integrity sha512-EjiPXt+r7LiCZXEfRpSJd+jUMnBd4/9OUv7Nx3+0u9+eimMwJmG0Q98lw4/289JCoxSE8OolDMNZaaF/JZ69WQ==
+  version "7.17.10"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.17.10.tgz#1ee1a5ac39f4eac844e6cf855b35520e5eb6f8b5"
+  integrity sha512-VmbrTHQteIdUUQNTb+zE12SHS/xQVIShmBPhlNP12hD5poF2pbITW1Z4172d03HegaQWhLffdkRJYtAzp0AGcw==
   dependencies:
-    "@babel/code-frame" "^7.10.4"
-    "@babel/generator" "^7.11.5"
-    "@babel/helper-function-name" "^7.10.4"
-    "@babel/helper-split-export-declaration" "^7.11.0"
-    "@babel/parser" "^7.11.5"
-    "@babel/types" "^7.11.5"
+    "@babel/code-frame" "^7.16.7"
+    "@babel/generator" "^7.17.10"
+    "@babel/helper-environment-visitor" "^7.16.7"
+    "@babel/helper-function-name" "^7.17.9"
+    "@babel/helper-hoist-variables" "^7.16.7"
+    "@babel/helper-split-export-declaration" "^7.16.7"
+    "@babel/parser" "^7.17.10"
+    "@babel/types" "^7.17.10"
     debug "^4.1.0"
     globals "^11.1.0"
-    lodash "^4.17.19"
 
 "@babel/types@^7.0.0", "@babel/types@^7.3.0", "@babel/types@^7.4.4", "@babel/types@^7.6.0":
   version "7.6.1"
@@ -1621,15 +1547,6 @@
     lodash "^4.17.13"
     to-fast-properties "^2.0.0"
 
-"@babel/types@^7.10.4", "@babel/types@^7.11.0", "@babel/types@^7.11.5":
-  version "7.11.5"
-  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.11.5.tgz#d9de577d01252d77c6800cee039ee64faf75662d"
-  integrity sha512-bvM7Qz6eKnJVFIn+1LPtjlBFPVN5jNDc1XmN15vWe7Q3DPBufWWsLiIvUu7xW87uTG6QoggpIDnUgLQvPheU+Q==
-  dependencies:
-    "@babel/helper-validator-identifier" "^7.10.4"
-    lodash "^4.17.19"
-    to-fast-properties "^2.0.0"
-
 "@babel/types@^7.14.5", "@babel/types@^7.3.3":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.14.5.tgz#3bb997ba829a2104cedb20689c4a5b8121d383ff"
@@ -1646,6 +1563,14 @@
     "@babel/helper-validator-identifier" "^7.16.7"
     to-fast-properties "^2.0.0"
 
+"@babel/types@^7.17.10":
+  version "7.17.10"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.17.10.tgz#d35d7b4467e439fcf06d195f8100e0fea7fc82c4"
+  integrity sha512-9O26jG0mBYfGkUYCYZRnBwbVLd1UZOICEr2Em6InB6jVfsAv1GKgwXHmrSg+WFWDmeKTA6vyTZiN8tCSM5Oo3A==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.16.7"
+    to-fast-properties "^2.0.0"
+
 "@bcoe/v8-coverage@^0.2.3":
   version "0.2.3"
   resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
@@ -1676,17 +1601,17 @@
     node-forge "^0.10.0"
     split "~0.3.3"
 
-"@emotion/is-prop-valid@^0.8.8":
-  version "0.8.8"
-  resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz#db28b1c4368a259b60a97311d6a952d4fd01ac1a"
-  integrity sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==
+"@emotion/is-prop-valid@^1.1.0":
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-1.1.2.tgz#34ad6e98e871aa6f7a20469b602911b8b11b3a95"
+  integrity sha512-3QnhqeL+WW88YjYbQL5gUIkthuMw7a0NGbZ7wfFVk2kg/CK5w8w5FFa0RzWjyY1+sujN0NWbtSHH6OJmWHtJpQ==
   dependencies:
-    "@emotion/memoize" "0.7.4"
+    "@emotion/memoize" "^0.7.4"
 
-"@emotion/memoize@0.7.4":
-  version "0.7.4"
-  resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.4.tgz#19bf0f5af19149111c40d98bb0cf82119f5d9eeb"
-  integrity sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==
+"@emotion/memoize@^0.7.4":
+  version "0.7.5"
+  resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.5.tgz#2c40f81449a4e554e9fc6396910ed4843ec2be50"
+  integrity sha512-igX9a37DR2ZPGYtV6suZ6whr8pTFtyHL3K/oLUotxpSVO2ASaprmAe2Dkq7tBo7CRY7MMDrAa9nuQP9/YG8FxQ==
 
 "@emotion/stylis@^0.8.4":
   version "0.8.5"
@@ -1935,25 +1860,6 @@
     source-map "^0.6.1"
     write-file-atomic "^3.0.0"
 
-"@jest/types@^24.9.0":
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/@jest/types/-/types-24.9.0.tgz#63cb26cb7500d069e5a389441a7c6ab5e909fc59"
-  integrity sha512-XKK7ze1apu5JWQ5eZjHITP66AX+QsLlbaJRBGYr8pNzwcAE2JVkwnf0yqjHTsDRcjR0mujy/NmZMXw5kl+kGBw==
-  dependencies:
-    "@types/istanbul-lib-coverage" "^2.0.0"
-    "@types/istanbul-reports" "^1.1.1"
-    "@types/yargs" "^13.0.0"
-
-"@jest/types@^25.1.0":
-  version "25.1.0"
-  resolved "https://registry.yarnpkg.com/@jest/types/-/types-25.1.0.tgz#b26831916f0d7c381e11dbb5e103a72aed1b4395"
-  integrity sha512-VpOtt7tCrgvamWZh1reVsGADujKigBUFTi19mlRjqEGsE8qH4r3s+skY33dNdXOwyZIvuftZ5tqdF1IgsMejMA==
-  dependencies:
-    "@types/istanbul-lib-coverage" "^2.0.0"
-    "@types/istanbul-reports" "^1.1.1"
-    "@types/yargs" "^15.0.0"
-    chalk "^3.0.0"
-
 "@jest/types@^26.6.2":
   version "26.6.2"
   resolved "https://registry.yarnpkg.com/@jest/types/-/types-26.6.2.tgz#bef5a532030e1d88a2f5a6d933f84e97226ed48e"
@@ -2028,81 +1934,73 @@
   resolved "https://registry.yarnpkg.com/@nicolo-ribaudo/chokidar-2/-/chokidar-2-2.1.8-no-fsevents.3.tgz#323d72dd25103d0c4fbdce89dadf574a787b1f9b"
   integrity sha512-s88O1aVtXftvp5bCPB7WnmXc5IwOZZ7YPuwNPt+GtOOXpPvad1LfbmjYv+qII7zP6RU2QGnqve27dnLycEnyEQ==
 
-"@primer/components@^22.0.2":
-  version "22.0.2"
-  resolved "https://registry.yarnpkg.com/@primer/components/-/components-22.0.2.tgz#8ab8a36bd36072cecbf6dc36031cb5889673a3bf"
-  integrity sha512-zyPYuHltrn4FPkTvqdGix98zdKXRWh4W+xburLjX6i4rSQ2uy64sMMeC/Fpr9vQx125t10OAewj8cJzjv7/UEg==
+"@primer/behaviors@1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@primer/behaviors/-/behaviors-1.1.1.tgz#51e2f02ebfe297c4c05f503cdc52ae8b4ce5794c"
+  integrity sha512-wvF1PYjyxKNTr6+5w4uR5Gkz53t1fsRDgKjWxDKk7wmlh0cwiILBo4dDFjjVhWRF1mBSjaIxxJGB4WGaP7ct2Q==
+
+"@primer/css@^20.0.0":
+  version "20.0.0"
+  resolved "https://registry.yarnpkg.com/@primer/css/-/css-20.0.0.tgz#315075ff9c41c9cf0f09e9a2b962ac86da7e3738"
+  integrity sha512-bzKJEgKM68GqwwLPfXEK1g5xb1sfZ7dKpnMAAWDWl1hVAADrmL0lcQ6xm29DCCi90RTT2bFF2CgU49d0g7PlTg==
   dependencies:
-    "@primer/octicons-react" "^10.0.0"
-    "@primer/primitives" "3.0.0"
-    "@reach/dialog" "0.3.0"
+    "@primer/primitives" "^7.7.0"
+
+"@primer/octicons-react@16.1.1":
+  version "16.1.1"
+  resolved "https://registry.yarnpkg.com/@primer/octicons-react/-/octicons-react-16.1.1.tgz#6a9eaffbbf46cb44d344a37a5ff2384973b82d3f"
+  integrity sha512-xCxQ5z23ol7yDuJs85Lc4ARzyoay+b3zOhAKkEMU7chk0xi2hT2OnRP23QUudNNDPTGozX268RGYLexUa6P4xw==
+
+"@primer/octicons-react@^17.1.0":
+  version "17.1.0"
+  resolved "https://registry.yarnpkg.com/@primer/octicons-react/-/octicons-react-17.1.0.tgz#a152212e0080b1fda07ceeb3da3f10b467e032ab"
+  integrity sha512-LSVCGCdvWvWiU+Yu2iqT2TVLX2EOpLPlU+PY0hoztQ7LFfB9Un5qJi8yooaZ2n6kzetG5FsZLSjwLz3RcMjkjA==
+
+"@primer/primitives@7.6.0":
+  version "7.6.0"
+  resolved "https://registry.yarnpkg.com/@primer/primitives/-/primitives-7.6.0.tgz#942efe38b6e09bf6d0351c045436e628e32c3ddb"
+  integrity sha512-cu28QLjectVf2rT4P7m6zS9v4g4yHtErRuPfsgEWEJhbXVIII6vDBm6elJzYixGpTNxpVtSUNezxUXv16l1ejQ==
+
+"@primer/primitives@^7.7.0":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@primer/primitives/-/primitives-7.8.3.tgz#de7e03492cf977e99f2417490d76421db9715e9f"
+  integrity sha512-04ZwfJhpZ0QFwDrJfCuLX6iOh0BflWDTvuoRA80lQH9xk0RtIg16INbruwwtnbSgnKKXXRSykRRJ5BbxnqufRA==
+
+"@primer/react@^35.2.1":
+  version "35.2.1"
+  resolved "https://registry.yarnpkg.com/@primer/react/-/react-35.2.1.tgz#fe35510b650b249cd36207d4854a60786fd5cc3f"
+  integrity sha512-aa5N0bGgOWPkUCjW5qqVtAxcaUxWe6pT4TjG6YCfoUjuY/OkngENSoBipXhNNThFfE78z7moP7UwxvxY7JW8mA==
+  dependencies:
+    "@primer/behaviors" "1.1.1"
+    "@primer/octicons-react" "16.1.1"
+    "@primer/primitives" "7.6.0"
+    "@radix-ui/react-polymorphic" "0.0.14"
+    "@react-aria/ssr" "3.1.0"
     "@styled-system/css" "5.1.5"
-    "@styled-system/prop-types" "5.1.2"
-    "@styled-system/props" "5.1.4"
+    "@styled-system/props" "5.1.5"
     "@styled-system/theme-get" "5.1.2"
-    "@testing-library/react" "9.4.0"
-    "@types/styled-components" "^4.4.0"
-    "@types/styled-system" "5.1.2"
-    classnames "^2.2.5"
-    polished "3.5.2"
-    react "^16.10.2"
-    react-is "16.10.2"
-    styled-system "5.1.2"
+    "@types/styled-components" "5.1.11"
+    "@types/styled-system" "5.1.12"
+    "@types/styled-system__css" "5.0.16"
+    "@types/styled-system__theme-get" "5.0.1"
+    classnames "2.3.1"
+    color2k "1.2.4"
+    deepmerge "4.2.2"
+    focus-visible "5.2.0"
+    history "5.0.0"
+    styled-system "5.1.5"
 
-"@primer/css@^15.2.0":
-  version "15.2.0"
-  resolved "https://registry.yarnpkg.com/@primer/css/-/css-15.2.0.tgz#ddf9651a9db2b9be03e7dfccfa612284ba1325ae"
-  integrity sha512-/vNDchWrxlXqd6E+SWQcChPHJVzGia9aCaTYoz8O9sJTnUSiTKOgSNCQuOXyUInPruTRSqj+z3MZxayKcTsWhA==
+"@radix-ui/react-polymorphic@0.0.14":
+  version "0.0.14"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-polymorphic/-/react-polymorphic-0.0.14.tgz#fc6cefee6686db8c5a7ff14c8c1b9b5abdee325b"
+  integrity sha512-9nsMZEDU3LeIUeHJrpkkhZVxu/9Fc7P2g2I3WR+uA9mTbNC3hGaabi0dV6wg0CfHb+m4nSs1pejbE/5no3MJTA==
+
+"@react-aria/ssr@3.1.0":
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/@react-aria/ssr/-/ssr-3.1.0.tgz#b7163e6224725c30121932a8d1422ef91d1fab22"
+  integrity sha512-RxqQKmE8sO7TGdrcSlHTcVzMP450hqowtBSd2bBS9oPlcokVkaGq28c3Rwa8ty5ctw4EBCjXqjP7xdcKMGDzug==
   dependencies:
-    "@primer/octicons" "^9.1.1"
-
-"@primer/octicons-react@^10.0.0":
-  version "10.0.0"
-  resolved "https://registry.yarnpkg.com/@primer/octicons-react/-/octicons-react-10.0.0.tgz#82f0d64b4276778fb51468afac00aa0c420ad230"
-  integrity sha512-I+m7Srg/Ivo5VuXoKwKCJ6YJya+lr6EVzp/WGnDlwBSpy0m4WfYAmZigt3A0i4JMqgLRFDlK+8AgqT66E9bOOw==
-
-"@primer/octicons@^9.1.1":
-  version "9.5.0"
-  resolved "https://registry.yarnpkg.com/@primer/octicons/-/octicons-9.5.0.tgz#36e9422a6f790afde6b49a7d2d6daf1402076afd"
-  integrity sha512-GZw9p9c6GdxcvtU6ENvAgYIAi8E3by/3D+ZwZWan0+QnA55/KQQXPgeOh/rm70BbiSHU0mu1gRKyRO2XUnfKjQ==
-  dependencies:
-    object-assign "^4.1.1"
-
-"@primer/primitives@3.0.0":
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/@primer/primitives/-/primitives-3.0.0.tgz#ccfb324b478b2373733535ec49f8de29e238c55d"
-  integrity sha512-ISXB43vcA+kg5pmGtGo3lPlHmY5Mg9nLhliePJu3Y5aP7g28TO+9cC99gL240pZHYsO0aVyU26WZwUXn6UIqJQ==
-
-"@reach/component-component@^0.3.0":
-  version "0.3.0"
-  resolved "https://registry.yarnpkg.com/@reach/component-component/-/component-component-0.3.0.tgz#ccf593e26132cbec0ad92774b80356dcf544d5c5"
-  integrity sha512-E93eOotshNv8dnXtOA/f7fMqGUJFTakBG1zEqmBo6BeLJhgP9t9wQrnkiyoU4HL/ou5LYfou8G4P3wQXbDoFFg==
-  dependencies:
-    prop-types "^15.7.2"
-
-"@reach/dialog@0.3.0":
-  version "0.3.0"
-  resolved "https://registry.yarnpkg.com/@reach/dialog/-/dialog-0.3.0.tgz#4c2037d4164193a09efcc359ba51c20652091142"
-  integrity sha512-m994HoNlpwJSPBkTi3IVTJpKQ+Gbc5yOa7RawSYPBuScpxeigFEYpE1CCIz/KhS6hVf4St+iymohWBCGjO34RQ==
-  dependencies:
-    "@reach/component-component" "^0.3.0"
-    "@reach/portal" "^0.3.0"
-    "@reach/utils" "^0.3.0"
-    prop-types "^15.7.2"
-    react-focus-lock "^2.1.0"
-    react-remove-scroll "^2.0.4"
-
-"@reach/portal@^0.3.0":
-  version "0.3.0"
-  resolved "https://registry.yarnpkg.com/@reach/portal/-/portal-0.3.0.tgz#2f44180026830679dd1dd9d5e3b807f637fe96bf"
-  integrity sha512-et9AeykzUaCuGnkzViQRxe4FjQQp4PPm1nMZqizX4KnsVwvi66PpKCE7hC3Gsh2036lGl0xtqmuRW+dTVSjb2A==
-  dependencies:
-    "@reach/component-component" "^0.3.0"
-
-"@reach/utils@^0.3.0":
-  version "0.3.0"
-  resolved "https://registry.yarnpkg.com/@reach/utils/-/utils-0.3.0.tgz#2098181aab751f2275cacf219b02a6a8b455be85"
-  integrity sha512-dQA1acyNpwqy5ia5yt1lNjaAhm9rrzSurFtlJPoz7ARVPMV1yZ0yfmNotMwwgVbE5q1HnONqszK7oagH86m7Qw==
+    "@babel/runtime" "^7.6.2"
 
 "@sentry/browser@^6.3.6":
   version "6.3.6"
@@ -2168,11 +2066,6 @@
     "@sentry/types" "6.3.6"
     tslib "^1.9.3"
 
-"@sheerun/mutationobserver-shim@^0.3.2":
-  version "0.3.3"
-  resolved "https://registry.yarnpkg.com/@sheerun/mutationobserver-shim/-/mutationobserver-shim-0.3.3.tgz#5405ee8e444ed212db44e79351f0c70a582aae25"
-  integrity sha512-DetpxZw1fzPD5xUBrIAoplLChO2VB8DlL5Gg+I1IR9b2wPqYIca2WSUxL5g1vLeR4MsQq1NeWriXAVffV+U1Fw==
-
 "@sideway/address@^4.1.3":
   version "4.1.4"
   resolved "https://registry.yarnpkg.com/@sideway/address/-/address-4.1.4.tgz#03dccebc6ea47fdc226f7d3d1ad512955d4783f0"
@@ -2223,7 +2116,7 @@
   dependencies:
     "@styled-system/core" "^5.1.2"
 
-"@styled-system/border@^5.1.2", "@styled-system/border@^5.1.5":
+"@styled-system/border@^5.1.5":
   version "5.1.5"
   resolved "https://registry.yarnpkg.com/@styled-system/border/-/border-5.1.5.tgz#0493d4332d2b59b74bb0d57d08c73eb555761ba6"
   integrity sha512-JvddhNrnhGigtzWRCVuAHepniyVi6hBlimxWDVAdcTuk7aRn9BYJUwfHslURtwYFsF5FoEs8Zmr1oZq2M1AP0A==
@@ -2277,19 +2170,12 @@
   dependencies:
     "@styled-system/core" "^5.1.2"
 
-"@styled-system/prop-types@5.1.2":
-  version "5.1.2"
-  resolved "https://registry.yarnpkg.com/@styled-system/prop-types/-/prop-types-5.1.2.tgz#252898644aa277fcdb1bb916c3b354c78b78155a"
-  integrity sha512-q2hnuZrOjZdCRYvSoMF5VIDRfpqPHDSgqajoMH0iy7BszPAkZZcIC7L4PzJTIcGSBrB9OJTBitWo9s7N60tgtA==
+"@styled-system/props@5.1.5":
+  version "5.1.5"
+  resolved "https://registry.yarnpkg.com/@styled-system/props/-/props-5.1.5.tgz#f50bf40e8fc8393726f06cbcd096a39a7d779ce4"
+  integrity sha512-FXhbzq2KueZpGaHxaDm8dowIEWqIMcgsKs6tBl6Y6S0njG9vC8dBMI6WSLDnzMoSqIX3nSKHmOmpzpoihdDewg==
   dependencies:
-    prop-types "^15.7.2"
-
-"@styled-system/props@5.1.4":
-  version "5.1.4"
-  resolved "https://registry.yarnpkg.com/@styled-system/props/-/props-5.1.4.tgz#a0b76bb3be64cb152db3db33a031f33a43977bab"
-  integrity sha512-ysQJ6YFhWbnbMaG11RSqXPbOePUl6vEPkcSz1WiySSu4vvh7OQl5UPdkSnYS1E35kSkomSpO5drbFtWRrA+o7Q==
-  dependencies:
-    styled-system "^5.1.4"
+    styled-system "^5.1.5"
 
 "@styled-system/shadow@^5.1.2":
   version "5.1.2"
@@ -2319,7 +2205,7 @@
   dependencies:
     "@styled-system/core" "^5.1.2"
 
-"@styled-system/variant@^5.1.2", "@styled-system/variant@^5.1.5":
+"@styled-system/variant@^5.1.5":
   version "5.1.5"
   resolved "https://registry.yarnpkg.com/@styled-system/variant/-/variant-5.1.5.tgz#8446d8aad06af3a4c723d717841df2dbe4ddeafd"
   integrity sha512-Yn8hXAFoWIro8+Q5J8YJd/mP85Teiut3fsGVR9CAxwgNfIAiqlYxsk5iHU7VHJks/0KjL4ATSjmbtCDC/4l1qw==
@@ -2334,28 +2220,6 @@
   dependencies:
     defer-to-connect "^1.0.1"
 
-"@testing-library/dom@^6.11.0":
-  version "6.15.0"
-  resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-6.15.0.tgz#042abea7b4685b70d9a919100da9024507dc20bb"
-  integrity sha512-8N24c4XwOigPicwc8n4ECgEoJW2/mMzRJBxu4Uo0zhLERZTbNzqpL5fyCigu7JGUXX+ITuiK4z9/lnHbYRHLwQ==
-  dependencies:
-    "@babel/runtime" "^7.8.4"
-    "@sheerun/mutationobserver-shim" "^0.3.2"
-    "@types/testing-library__dom" "^6.12.1"
-    aria-query "^4.0.2"
-    dom-accessibility-api "^0.3.0"
-    pretty-format "^25.1.0"
-    wait-for-expect "^3.0.2"
-
-"@testing-library/react@9.4.0":
-  version "9.4.0"
-  resolved "https://registry.yarnpkg.com/@testing-library/react/-/react-9.4.0.tgz#b021ac8cb987c8dc54c6841875f745bf9b2e88e5"
-  integrity sha512-XdhDWkI4GktUPsz0AYyeQ8M9qS/JFie06kcSnUVcpgOwFjAu9vhwR83qBl+lw9yZWkbECjL8Hd+n5hH6C0oWqg==
-  dependencies:
-    "@babel/runtime" "^7.7.6"
-    "@testing-library/dom" "^6.11.0"
-    "@types/testing-library__react" "^9.1.2"
-
 "@tootallnate/once@1":
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/@tootallnate/once/-/once-1.1.2.tgz#ccb91445360179a04e7fe6aff78c00ffc1eeaf82"
@@ -2479,14 +2343,6 @@
   dependencies:
     "@types/istanbul-lib-coverage" "*"
 
-"@types/istanbul-reports@^1.1.1":
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/@types/istanbul-reports/-/istanbul-reports-1.1.1.tgz#7a8cbf6a406f36c8add871625b278eaf0b0d255a"
-  integrity sha512-UpYjBi8xefVChsCoBpKShdxTllC9pwISirfoZsUa2AAdQg/Jd2KQGtSbw+ya7GPo7x/wAPlH6JBhKhAsXUEZNA==
-  dependencies:
-    "@types/istanbul-lib-coverage" "*"
-    "@types/istanbul-lib-report" "*"
-
 "@types/istanbul-reports@^3.0.0":
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/@types/istanbul-reports/-/istanbul-reports-3.0.1.tgz#9153fe98bba2bd565a63add9436d6f0d7f8468ff"
@@ -2509,10 +2365,10 @@
   dependencies:
     js-base64 "*"
 
-"@types/js-cookie@2.2.6":
-  version "2.2.6"
-  resolved "https://registry.yarnpkg.com/@types/js-cookie/-/js-cookie-2.2.6.tgz#f1a1cb35aff47bc5cfb05cb0c441ca91e914c26f"
-  integrity sha512-+oY0FDTO2GYKEV0YPvSshGq9t7YozVkgvXLty7zogQNuCxBhT9/3INX9Q7H1aRZ4SUDRXAKlJuA4EA5nTt7SNw==
+"@types/js-cookie@^2.2.6":
+  version "2.2.7"
+  resolved "https://registry.yarnpkg.com/@types/js-cookie/-/js-cookie-2.2.7.tgz#226a9e31680835a6188e887f3988e60c04d3f6a3"
+  integrity sha512-aLkWa0C0vO5b4Sr798E26QgOkss68Un0bLjs7u9qxzPT5CG+8DuNTffWES58YzJs3hrVAOs1wonycqEBqNJubA==
 
 "@types/json-schema@^7.0.4", "@types/json-schema@^7.0.5":
   version "7.0.11"
@@ -2561,13 +2417,6 @@
   dependencies:
     "@types/node" "*"
 
-"@types/react-dom@*":
-  version "16.9.5"
-  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-16.9.5.tgz#5de610b04a35d07ffd8f44edad93a71032d9aaa7"
-  integrity sha512-BX6RQ8s9D+2/gDhxrj8OW+YD4R+8hj7FEM/OJHGNR0KipE1h1mSsf39YeyC81qafkq+N3rU3h3RFbLSwE5VqUg==
-  dependencies:
-    "@types/react" "*"
-
 "@types/react-dom@^18.0.3":
   version "18.0.3"
   resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.0.3.tgz#a022ea08c75a476fe5e96b675c3e673363853831"
@@ -2575,13 +2424,6 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react-native@*":
-  version "0.61.20"
-  resolved "https://registry.yarnpkg.com/@types/react-native/-/react-native-0.61.20.tgz#937d8ed9768bdfc982e785563c07b4905ba0fd1f"
-  integrity sha512-EEtaP15gpDhpB1N8G3a+nWAzSa3HiLAZvfFkvczCluQXiB2vXAVJyxWls1i3Q9TERVWE3JbOuufgCY6bV1qTzw==
-  dependencies:
-    "@types/react" "*"
-
 "@types/react-window@^1.8.5":
   version "1.8.5"
   resolved "https://registry.yarnpkg.com/@types/react-window/-/react-window-1.8.5.tgz#285fcc5cea703eef78d90f499e1457e9b5c02fc1"
@@ -2589,15 +2431,7 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react@*":
-  version "16.9.2"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-16.9.2.tgz#6d1765431a1ad1877979013906731aae373de268"
-  integrity sha512-jYP2LWwlh+FTqGd9v7ynUKZzjj98T8x7Yclz479QdRhHfuW9yQ+0jjnD31eXSXutmBpppj5PYNLYLRfnZJvcfg==
-  dependencies:
-    "@types/prop-types" "*"
-    csstype "^2.2.0"
-
-"@types/react@^18.0.9":
+"@types/react@*", "@types/react@^18.0.9":
   version "18.0.9"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-18.0.9.tgz#d6712a38bd6cd83469603e7359511126f122e878"
   integrity sha512-9bjbg1hJHUm4De19L1cHiW0Jvx3geel6Qczhjd0qY5VKVE2X5+x77YxAepuCwVh4vrgZJdgEJw48zrhRIeF4Nw==
@@ -2616,58 +2450,48 @@
   resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-2.0.1.tgz#20f18294f797f2209b5f65c8e3b5c8e8261d127c"
   integrity sha512-Hl219/BT5fLAaz6NDkSuhzasy49dwQS/DSdu4MdggFB8zcXv7vflBI3xp7FEmkmdDkBUI2bPUNeMttp2knYdxw==
 
-"@types/styled-components@^4.4.0", "@types/styled-components@^5.0.0", "@types/styled-components@^5.1.3":
-  version "5.1.3"
-  resolved "https://registry.yarnpkg.com/@types/styled-components/-/styled-components-5.1.3.tgz#6fab3d9c8f7d9a15cbb89d379d850c985002f363"
-  integrity sha512-HGpirof3WOhiX17lb61Q/tpgqn48jxO8EfZkdJ8ueYqwLbK2AHQe/G08DasdA2IdKnmwOIP1s9X2bopxKXgjRw==
+"@types/styled-components@5.1.11":
+  version "5.1.11"
+  resolved "https://registry.yarnpkg.com/@types/styled-components/-/styled-components-5.1.11.tgz#a3a1bc0f2cdad7318d8ce219ee507e6b353503b5"
+  integrity sha512-u8g3bSw9KUiZY+S++gh+LlURGraqBe3MC5I5dygrNjGDHWWQfsmZZRTJ9K9oHU2CqWtxChWmJkDI/gp+TZPQMw==
   dependencies:
     "@types/hoist-non-react-statics" "*"
     "@types/react" "*"
-    "@types/react-native" "*"
     csstype "^3.0.2"
 
-"@types/styled-system@5.1.2":
-  version "5.1.2"
-  resolved "https://registry.yarnpkg.com/@types/styled-system/-/styled-system-5.1.2.tgz#d75c40bc4a3bb0d0022eb3dcae58854129e9dd32"
-  integrity sha512-Byh33qthYnI6+qS0TRr4vqd+N/ax6ic1NFE6ZA16xuVr/EvYvSB8+diEP1lTSE7sP/MTdQpl+KaONREnyalDUA==
+"@types/styled-components@^5.1.25":
+  version "5.1.25"
+  resolved "https://registry.yarnpkg.com/@types/styled-components/-/styled-components-5.1.25.tgz#0177c4ab5fa7c6ed0565d36f597393dae3f380ad"
+  integrity sha512-fgwl+0Pa8pdkwXRoVPP9JbqF0Ivo9llnmsm+7TCI330kbPIFd9qv1Lrhr37shf4tnxCOSu+/IgqM7uJXLWZZNQ==
   dependencies:
-    csstype "^2.6.4"
+    "@types/hoist-non-react-statics" "*"
+    "@types/react" "*"
+    csstype "^3.0.2"
 
-"@types/styled-system__css@^5.0.14":
-  version "5.0.14"
-  resolved "https://registry.yarnpkg.com/@types/styled-system__css/-/styled-system__css-5.0.14.tgz#97559d823216d475f716fb5b8dd1766f2d3eeafa"
-  integrity sha512-dvhSQ5upz6TqiQmWLNF0sqdoL5nTomza58vtTSklpE9lDS+5w/ew8PQ+HPSRaXMGrmPGUiL7F0vwryVdxHWfpA==
+"@types/styled-system@5.1.12":
+  version "5.1.12"
+  resolved "https://registry.yarnpkg.com/@types/styled-system/-/styled-system-5.1.12.tgz#4f3ca8da3dffe3c5a6cc3b2a97f51b41464c104a"
+  integrity sha512-7x4BYKKfK9QewfsFC2x5r9BK/OrfX+JF/1P21jKPMHruawDw9gvG7bTZgTVk6YkzDO2JUlsk4i8hdiAepAhD0g==
   dependencies:
     csstype "^3.0.2"
 
-"@types/testing-library__dom@*", "@types/testing-library__dom@^6.12.1":
-  version "6.12.1"
-  resolved "https://registry.yarnpkg.com/@types/testing-library__dom/-/testing-library__dom-6.12.1.tgz#37af28fae051f9e3feed5684535b1540c97ae28b"
-  integrity sha512-cgqnEjxKk31tQt29j4baSWaZPNjQf3bHalj2gcHQTpW5SuHRal76gOpF0vypeEo6o+sS5inOvvNdzLY0B3FB2A==
+"@types/styled-system__css@5.0.16":
+  version "5.0.16"
+  resolved "https://registry.yarnpkg.com/@types/styled-system__css/-/styled-system__css-5.0.16.tgz#cae75cef03dfa1020703e842a8b1c14d8f9a8f33"
+  integrity sha512-Cji5miCIpR27m8yzH6y3cLU6106N4GVyPgUhBQ4nL7VxgoeAtRdAriKdGTnRgJzSpT3HyB7h5G//cDWOl0M1jQ==
   dependencies:
-    pretty-format "^24.3.0"
+    csstype "^3.0.2"
 
-"@types/testing-library__react@^9.1.2":
-  version "9.1.3"
-  resolved "https://registry.yarnpkg.com/@types/testing-library__react/-/testing-library__react-9.1.3.tgz#35eca61cc6ea923543796f16034882a1603d7302"
-  integrity sha512-iCdNPKU3IsYwRK9JieSYAiX0+aYDXOGAmrC/3/M7AqqSDKnWWVv07X+Zk1uFSL7cMTUYzv4lQRfohucEocn5/w==
-  dependencies:
-    "@types/react-dom" "*"
-    "@types/testing-library__dom" "*"
-    pretty-format "^25.1.0"
+"@types/styled-system__theme-get@5.0.1":
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/@types/styled-system__theme-get/-/styled-system__theme-get-5.0.1.tgz#c3884e8f15641603503dc1d49f9d282dce11e5fb"
+  integrity sha512-+i4VZ5wuYKMU8oKPmUlzc9r2RhpSNOK061Khtrr7X0sOQEcIyhUtrDusuMkp5ZR3D05Xopn3zybTPyUSQkKGAA==
 
 "@types/yargs-parser@*":
   version "15.0.0"
   resolved "https://registry.yarnpkg.com/@types/yargs-parser/-/yargs-parser-15.0.0.tgz#cb3f9f741869e20cce330ffbeb9271590483882d"
   integrity sha512-FA/BWv8t8ZWJ+gEOnLLd8ygxH/2UFbAvgEonyfN6yWGLKc7zVjbpl2Y4CTjid9h2RfgPP6SEt6uHwEOply00yw==
 
-"@types/yargs@^13.0.0":
-  version "13.0.8"
-  resolved "https://registry.yarnpkg.com/@types/yargs/-/yargs-13.0.8.tgz#a38c22def2f1c2068f8971acb3ea734eb3c64a99"
-  integrity sha512-XAvHLwG7UQ+8M4caKIH0ZozIOYay5fQkAgyIXegXT9jPtdIGdhga+sUEdAr1CiG46aB+c64xQEYyEzlwWVTNzA==
-  dependencies:
-    "@types/yargs-parser" "*"
-
 "@types/yargs@^15.0.0":
   version "15.0.4"
   resolved "https://registry.yarnpkg.com/@types/yargs/-/yargs-15.0.4.tgz#7e5d0f8ca25e9d5849f2ea443cf7c402decd8299"
@@ -2842,7 +2666,7 @@
     "@webassemblyjs/wast-parser" "1.8.5"
     "@xtuc/long" "4.2.2"
 
-"@xobotyi/scrollbar-width@1.9.5":
+"@xobotyi/scrollbar-width@^1.9.5":
   version "1.9.5"
   resolved "https://registry.yarnpkg.com/@xobotyi/scrollbar-width/-/scrollbar-width-1.9.5.tgz#80224a6919272f405b87913ca13b92929bdf3c4d"
   integrity sha512-N8tkAACJx2ww8vFMneJmaAgmjAG1tnVBZJRLRcx061tmsLRZHSEZSLuGWnwPtunsSLvSqXQ2wfp7Mgqg1I+2dQ==
@@ -3056,7 +2880,7 @@ ansi-regex@^3.0.0:
   resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-3.0.0.tgz#ed0317c322064f79466c02966bddb605ab37d998"
   integrity sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=
 
-ansi-regex@^4.0.0, ansi-regex@^4.1.0:
+ansi-regex@^4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-4.1.0.tgz#8b9f8f08cf1acb843756a839ca8c7e3168c51997"
   integrity sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==
@@ -3150,14 +2974,6 @@ argparse@^2.0.1:
   resolved "https://registry.yarnpkg.com/argparse/-/argparse-2.0.1.tgz#246f50f3ca78a3240f6c997e8a9bd1eac49e4b38"
   integrity sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==
 
-aria-query@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-4.0.2.tgz#250687b4ccde1ab86d127da0432ae3552fc7b145"
-  integrity sha512-S1G1V790fTaigUSM/Gd0NngzEfiMy9uTUfMyHhKhVyy4cH5O/eTuR01ydhGL0z4Za1PXFTRGH3qL8VhUQuEO5w==
-  dependencies:
-    "@babel/runtime" "^7.7.4"
-    "@babel/runtime-corejs3" "^7.7.4"
-
 arr-diff@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/arr-diff/-/arr-diff-4.0.0.tgz#d6461074febfec71e7e15235761a329a5dc7c520"
@@ -3393,15 +3209,16 @@ babel-plugin-polyfill-regenerator@^0.3.0:
   dependencies:
     "@babel/helper-define-polyfill-provider" "^0.3.1"
 
-"babel-plugin-styled-components@>= 1":
-  version "1.11.1"
-  resolved "https://registry.yarnpkg.com/babel-plugin-styled-components/-/babel-plugin-styled-components-1.11.1.tgz#5296a9e557d736c3186be079fff27c6665d63d76"
-  integrity sha512-YwrInHyKUk1PU3avIRdiLyCpM++18Rs1NgyMXEAQC33rIXs/vro0A+stf4sT0Gf22Got+xRWB8Cm0tw+qkRzBA==
+"babel-plugin-styled-components@>= 1.12.0":
+  version "2.0.7"
+  resolved "https://registry.yarnpkg.com/babel-plugin-styled-components/-/babel-plugin-styled-components-2.0.7.tgz#c81ef34b713f9da2b7d3f5550df0d1e19e798086"
+  integrity sha512-i7YhvPgVqRKfoQ66toiZ06jPNA3p6ierpfUuEWxNF+fV27Uv5gxBkf8KZLHUCc1nFA9j6+80pYoIpqCeyW3/bA==
   dependencies:
-    "@babel/helper-annotate-as-pure" "^7.0.0"
-    "@babel/helper-module-imports" "^7.0.0"
+    "@babel/helper-annotate-as-pure" "^7.16.0"
+    "@babel/helper-module-imports" "^7.16.0"
     babel-plugin-syntax-jsx "^6.18.0"
     lodash "^4.17.11"
+    picomatch "^2.3.0"
 
 babel-plugin-syntax-jsx@^6.18.0:
   version "6.18.0"
@@ -3601,11 +3418,6 @@ boolbase@^1.0.0:
   resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
   integrity sha1-aN/1++YMUes3cl6p4+0xDcwed24=
 
-bowser@^1.7.3:
-  version "1.9.4"
-  resolved "https://registry.yarnpkg.com/bowser/-/bowser-1.9.4.tgz#890c58a2813a9d3243704334fa81b96a5c150c9a"
-  integrity sha512-9IdMmj2KjigRq6oWhmwv1W36pDuA4STQZ8q6YO9um+x07xgYNCD3Oou+WP/3L1HNz7iqythGet3/p4wvc8AAwQ==
-
 boxen@^5.0.0:
   version "5.1.2"
   resolved "https://registry.yarnpkg.com/boxen/-/boxen-5.1.2.tgz#788cb686fc83c1f486dfa8a40c68fc2b831d2b50"
@@ -3922,14 +3734,6 @@ chalk@^1.1.3:
     strip-ansi "^3.0.0"
     supports-color "^2.0.0"
 
-chalk@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/chalk/-/chalk-3.0.0.tgz#3f73c2bf526591f574cc492c51e2456349f844e4"
-  integrity sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==
-  dependencies:
-    ansi-styles "^4.1.0"
-    supports-color "^7.1.0"
-
 char-regex@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/char-regex/-/char-regex-1.0.2.tgz#d744358226217f981ed58f479b1d6bcc29545dcf"
@@ -4073,10 +3877,10 @@ class-utils@^0.3.5:
     isobject "^3.0.0"
     static-extend "^0.1.1"
 
-classnames@^2.2.5:
-  version "2.2.6"
-  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.6.tgz#43935bffdd291f326dad0a205309b38d00f650ce"
-  integrity sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q==
+classnames@2.3.1:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.1.tgz#dfcfa3891e306ec1dad105d0e88f4417b8535e8e"
+  integrity sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA==
 
 cli-boxes@^2.2.1:
   version "2.2.1"
@@ -4180,6 +3984,11 @@ color-name@~1.1.4:
   resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
   integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
 
+color2k@1.2.4:
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/color2k/-/color2k-1.2.4.tgz#af34950ac58e23cf224a01cb8dd0c9911a79605e"
+  integrity sha512-DiwdBwc0BryPFFXoCrW8XQGXl2rEtMToODybxZjKnN5IJXt/tV/FsN02pCK/b7KcWvJEioz3c74lQSmayFvS4Q==
+
 columnify@1.6.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/columnify/-/columnify-1.6.0.tgz#6989531713c9008bb29735e61e37acf5bd553cf3"
@@ -4348,10 +4157,10 @@ copy-descriptor@^0.1.0:
   resolved "https://registry.yarnpkg.com/copy-descriptor/-/copy-descriptor-0.1.1.tgz#676f6eb3c39997c2ee1ac3a924fd6124748f578d"
   integrity sha1-Z29us8OZl8LuGsOpJP1hJHSPV40=
 
-copy-to-clipboard@^3.2.0:
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/copy-to-clipboard/-/copy-to-clipboard-3.2.0.tgz#d2724a3ccbfed89706fac8a894872c979ac74467"
-  integrity sha512-eOZERzvCmxS8HWzugj4Uxl8OJxa7T2k1Gi0X5qavwydHIfuSHq2dTD09LOg/XyGq4Zpb5IsR/2OJ5lbOegz78w==
+copy-to-clipboard@^3.3.1:
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/copy-to-clipboard/-/copy-to-clipboard-3.3.1.tgz#115aa1a9998ffab6196f93076ad6da3b913662ae"
+  integrity sha512-i13qo6kIHTTpCm8/Wup+0b1mVWETvu2kIMzKoK8FpkLkFxlt0znUAHcMzox+T8sPlqtZXq3CulEjQHsYiGFJUw==
   dependencies:
     toggle-selection "^1.0.6"
 
@@ -4381,11 +4190,6 @@ core-js-compat@^3.20.2, core-js-compat@^3.21.0:
     browserslist "^4.20.2"
     semver "7.0.0"
 
-core-js-pure@^3.0.0:
-  version "3.6.4"
-  resolved "https://registry.yarnpkg.com/core-js-pure/-/core-js-pure-3.6.4.tgz#4bf1ba866e25814f149d4e9aaa08c36173506e3a"
-  integrity sha512-epIhRLkXdgv32xIUFaaAry2wdxZYBi6bgM7cB136dzzXXa+dFyRLTZeLUJxnd8ShrmyVXBub63n2NHo2JAt8Cw==
-
 core-js@3.21.0:
   version "3.21.0"
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.21.0.tgz#f479dbfc3dffb035a0827602dd056839a774aa71"
@@ -4535,12 +4339,12 @@ css-to-react-native@^3.0.0:
     css-color-keywords "^1.0.0"
     postcss-value-parser "^4.0.2"
 
-css-tree@^1.0.0-alpha.28:
-  version "1.0.0-alpha.37"
-  resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-1.0.0-alpha.37.tgz#98bebd62c4c1d9f960ec340cf9f7522e30709a22"
-  integrity sha512-DMxWJg0rnz7UgxKT0Q1HU/L9BeJI0M6ksor0OgqOnF+aRCDWg/N2641HmVyU9KVIu0OVVWOb2IpC9A+BJRnejg==
+css-tree@^1.1.2:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-1.1.3.tgz#eb4870fb6fd7707327ec95c2ff2ab09b5e8db91d"
+  integrity sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==
   dependencies:
-    mdn-data "2.0.4"
+    mdn-data "2.0.14"
     source-map "^0.6.1"
 
 css-what@^6.0.1:
@@ -4570,26 +4374,16 @@ cssstyle@^2.3.0:
   dependencies:
     cssom "~0.3.6"
 
-csstype@^2.2.0:
-  version "2.6.6"
-  resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.6.tgz#c34f8226a94bbb10c32cc0d714afdf942291fc41"
-  integrity sha512-RpFbQGUE74iyPgvr46U9t1xoQBM8T4BL8SxrN66Le2xYAPSaDJJKeztV3awugusb3g3G9iL8StmkBBXhcbbXhg==
-
-csstype@^2.5.5:
-  version "2.6.7"
-  resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.7.tgz#20b0024c20b6718f4eda3853a1f5a1cce7f5e4a5"
-  integrity sha512-9Mcn9sFbGBAdmimWb2gLVDtFJzeKtDGIr76TUqmjZrw9LFXBMSU70lcs+C0/7fyCd6iBDqmksUcCOUIkisPHsQ==
-
-csstype@^2.6.4:
-  version "2.6.9"
-  resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.9.tgz#05141d0cd557a56b8891394c1911c40c8a98d098"
-  integrity sha512-xz39Sb4+OaTsULgUERcCk+TJj8ylkL4aSVDQiX/ksxbELSqwkgt4d4RD7fovIdgJGSuNYqwZEiVjYY5l0ask+Q==
-
 csstype@^3.0.2:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.3.tgz#2b410bbeba38ba9633353aff34b05d9755d065f8"
   integrity sha512-jPl+wbWPOWJ7SXsWyqGRk3lGecbar0Cb0OvZF/r/ZU011R4YqiRehgkQ9p4eQfo9DSDLqLL3wHwfxeJiuIsNag==
 
+csstype@^3.0.6:
+  version "3.0.11"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.11.tgz#d66700c5eacfac1940deb4e3ee5642792d85cd33"
+  integrity sha512-sa6P2wJ+CAbgyy4KFssIb/JNMLxFvKF1pCYCSXS8ZMuqZnMsrxqI2E5sPyoTpxoPU/gVZMzr2zjOfg8GIZOMsw==
+
 cwd@^0.10.0:
   version "0.10.0"
   resolved "https://registry.yarnpkg.com/cwd/-/cwd-0.10.0.tgz#172400694057c22a13b0cf16162c7e4b7a7fe567"
@@ -4819,11 +4613,6 @@ detect-newline@^3.0.0:
   resolved "https://registry.yarnpkg.com/detect-newline/-/detect-newline-3.1.0.tgz#576f5dfc63ae1a192ff192d8ad3af6308991b651"
   integrity sha512-TLz+x/vEXm/Y7P7wn1EJFNLxYpUD4TgMosxY6fAVJUnJMbupHBOncxyWUG9OpTaH9EBD7uFI5LfEgmMOc54DsA==
 
-detect-node@^2.0.4:
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/detect-node/-/detect-node-2.0.4.tgz#014ee8f8f669c5c58023da64b8179c083a28c46c"
-  integrity sha512-ZIzRpLJrOj7jjP2miAtgqIfmzbxa4ZOr5jJc601zklsfEx9oTzmmj2nVpIPRpNlRTIh8lc1kyViIY7BWSGNmKw==
-
 devtools-protocol@0.0.883894:
   version "0.0.883894"
   resolved "https://registry.yarnpkg.com/devtools-protocol/-/devtools-protocol-0.0.883894.tgz#d403f2c75cd6d71c916aee8dde9258da988a4da9"
@@ -4862,11 +4651,6 @@ doctrine@^3.0.0:
   dependencies:
     esutils "^2.0.2"
 
-dom-accessibility-api@^0.3.0:
-  version "0.3.0"
-  resolved "https://registry.yarnpkg.com/dom-accessibility-api/-/dom-accessibility-api-0.3.0.tgz#511e5993dd673b97c87ea47dba0e3892f7e0c983"
-  integrity sha512-PzwHEmsRP3IGY4gv/Ug+rMeaTIyTJvadCb+ujYXYeIylbHJezIyNToe8KfEgHTCEYyC+/bUghYOGg8yMGlZ6vA==
-
 dom-serializer@^1.0.1, dom-serializer@^1.3.2:
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-1.3.2.tgz#6206437d32ceefaec7161803230c7a20bc1b4d91"
@@ -5092,12 +4876,12 @@ error-ex@^1.3.1:
   dependencies:
     is-arrayish "^0.2.1"
 
-error-stack-parser@^2.0.4:
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/error-stack-parser/-/error-stack-parser-2.0.4.tgz#a757397dc5d9de973ac9a5d7d4e8ade7cfae9101"
-  integrity sha512-fZ0KkoxSjLFmhW5lHbUT3tLwy3nX1qEzMYo8koY1vrsAco53CMT1djnBSeC/wUjTEZRhZl9iRw7PaMaxfJ4wzQ==
+error-stack-parser@^2.0.6:
+  version "2.0.7"
+  resolved "https://registry.yarnpkg.com/error-stack-parser/-/error-stack-parser-2.0.7.tgz#b0c6e2ce27d0495cf78ad98715e0cad1219abb57"
+  integrity sha512-chLOW0ZGRf4s8raLrDxa5sdkvPec5YdvwbFnqJme4rk0rFajP8mPtrDL1+I+CwrQDCjswDA5sREX7jYQDQs9vA==
   dependencies:
-    stackframe "^1.1.0"
+    stackframe "^1.1.1"
 
 es6-error@4.1.1:
   version "4.1.1"
@@ -5528,10 +5312,10 @@ fast-shallow-equal@^1.0.0:
   resolved "https://registry.yarnpkg.com/fast-shallow-equal/-/fast-shallow-equal-1.0.0.tgz#d4dcaf6472440dcefa6f88b98e3251e27f25628b"
   integrity sha512-HPtaa38cPgWvaCFmRNhlc6NG7pv6NUHqjPgVAkWGoB9mQMwYB27/K0CvOM5Czy+qpT3e8XJ6Q4aPAnzpNpzNaw==
 
-fastest-stable-stringify@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/fastest-stable-stringify/-/fastest-stable-stringify-1.0.1.tgz#9122d406d4c9d98bea644a6b6853d5874b87b028"
-  integrity sha1-kSLUBtTJ2YvqZEpraFPVh0uHsCg=
+fastest-stable-stringify@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/fastest-stable-stringify/-/fastest-stable-stringify-2.0.2.tgz#3757a6774f6ec8de40c4e86ec28ea02417214c76"
+  integrity sha512-bijHueCGd0LqqNK9b5oCMHc0MluJAx0cwqASgbWMvkO01lCYgIhacVRLcaDz3QnyYIRNJRDwMb41VuT6pHJ91Q==
 
 fb-watchman@^2.0.0:
   version "2.0.1"
@@ -5711,10 +5495,10 @@ flush-write-stream@^1.0.0:
     inherits "^2.0.3"
     readable-stream "^2.3.6"
 
-focus-lock@^0.6.6:
-  version "0.6.6"
-  resolved "https://registry.yarnpkg.com/focus-lock/-/focus-lock-0.6.6.tgz#98119a755a38cfdbeda0280eaa77e307eee850c7"
-  integrity sha512-Dx69IXGCq1qsUExWuG+5wkiMqVM/zGx/reXSJSLogECwp3x6KeNQZ+NAetgxEFpnC41rD8U3+jRCW68+LNzdtw==
+focus-visible@5.2.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/focus-visible/-/focus-visible-5.2.0.tgz#3a9e41fccf587bd25dcc2ef045508284f0a4d6b3"
+  integrity sha512-Rwix9pBtC1Nuy5wysTmKy+UjbDJpIfg8eHjw0rjZ1mX4GNLz1Bmd16uDpI3Gk1i70Fgcs8Csg2lPm8HULFg9DQ==
 
 follow-redirects@^1.14.7:
   version "1.14.9"
@@ -6309,6 +6093,13 @@ history@*:
   dependencies:
     "@babel/runtime" "^7.7.6"
 
+history@5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/history/-/history-5.0.0.tgz#0cabbb6c4bbf835addb874f8259f6d25101efd08"
+  integrity sha512-3NyRMKIiFSJmIPdq7FxkNMJkQ7ZEtVblOQ38VtKaA0zZMW1Eo6Q6W8oDKEflr1kNNTItSnk4JMCO1deeSgbLLg==
+  dependencies:
+    "@babel/runtime" "^7.7.6"
+
 hmac-drbg@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/hmac-drbg/-/hmac-drbg-1.0.1.tgz#d2745701025a6c775a6c545793ed502fc0c649a1"
@@ -6585,12 +6376,11 @@ ini@^3.0.0:
   resolved "https://registry.yarnpkg.com/ini/-/ini-3.0.0.tgz#2f6de95006923aa75feed8894f5686165adc08f1"
   integrity sha512-TxYQaeNW/N8ymDvwAxPyRbhMBtnEwuvaTYpOQkFx1nSeusgezHniEc/l35Vo4iCq/mMiTJbpD7oYxN98hFlfmw==
 
-inline-style-prefixer@^4.0.0:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/inline-style-prefixer/-/inline-style-prefixer-4.0.2.tgz#d390957d26f281255fe101da863158ac6eb60911"
-  integrity sha512-N8nVhwfYga9MiV9jWlwfdj1UDIaZlBFu4cJSJkIr7tZX7sHpHhGR5su1qdpW+7KPL8ISTvCIkcaFi/JdBknvPg==
+inline-style-prefixer@^6.0.0:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/inline-style-prefixer/-/inline-style-prefixer-6.0.1.tgz#c5c0e43ba8831707afc5f5bbfd97edf45c1fa7ae"
+  integrity sha512-AsqazZ8KcRzJ9YPN1wMH2aNM7lkWQ8tSPrW5uDk1ziYwiAPWSZnUsC7lfZq+BDqLqz0B4Pho5wscWcJzVvRzDQ==
   dependencies:
-    bowser "^1.7.3"
     css-in-js-utils "^2.0.0"
 
 interpret@1.2.0:
@@ -6598,7 +6388,7 @@ interpret@1.2.0:
   resolved "https://registry.yarnpkg.com/interpret/-/interpret-1.2.0.tgz#d5061a6224be58e8083985f5014d844359576296"
   integrity sha512-mT34yGKMNceBQUoVn7iCDKDntA7SC6gycMAWzGx1z/CMCTV7b2AAtXlo3nRyHZ1FelRkQbQjprHSYGwzLtkVbw==
 
-invariant@^2.2.2, invariant@^2.2.4:
+invariant@^2.2.2:
   version "2.2.4"
   resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6"
   integrity sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==
@@ -7922,12 +7712,12 @@ lodash.once@^4.0.0:
   resolved "https://registry.yarnpkg.com/lodash.once/-/lodash.once-4.1.1.tgz#0dd3971213c7c56df880977d504c88fb471a97ac"
   integrity sha1-DdOXEhPHxW34gJd9UEyI+0cal6w=
 
-lodash@^4.17.11, lodash@^4.17.13, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.21, lodash@^4.17.4, lodash@^4.7.0:
+lodash@^4.17.11, lodash@^4.17.13, lodash@^4.17.15, lodash@^4.17.21, lodash@^4.17.4, lodash@^4.7.0:
   version "4.17.21"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
 
-loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.4.0:
+loose-envify@^1.0.0, loose-envify@^1.1.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
   integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
@@ -8023,10 +7813,10 @@ md5.js@^1.3.4:
     inherits "^2.0.1"
     safe-buffer "^5.1.2"
 
-mdn-data@2.0.4:
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.4.tgz#699b3c38ac6f1d728091a64650b65d388502fd5b"
-  integrity sha512-iV3XNKw06j5Q7mi6h+9vbx23Tv7JkjEVgKHW4pimwyDGWm0OIQntJJ+u1C6mg6mK1EaTv42XQ7w76yuzH7M2cA==
+mdn-data@2.0.14:
+  version "2.0.14"
+  resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.14.tgz#7113fc4281917d63ce29b43446f701e68c25ba50"
+  integrity sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==
 
 media-typer@0.3.0:
   version "0.3.0"
@@ -8329,19 +8119,19 @@ nan@^2.12.1, nan@^2.14.0:
   resolved "https://registry.yarnpkg.com/nan/-/nan-2.14.0.tgz#7818f722027b2459a86f0295d434d1fc2336c52c"
   integrity sha512-INOFj37C7k3AfaNTtX8RhsTw7qRy7eLET14cROi9+5HAVbbHuIWUHEauBv5qT4Av2tWasiTY1Jw6puUNqRJXQg==
 
-nano-css@^5.2.1:
-  version "5.2.1"
-  resolved "https://registry.yarnpkg.com/nano-css/-/nano-css-5.2.1.tgz#73b8470fa40b028a134d3393ae36bbb34b9fa332"
-  integrity sha512-T54okxMAha0+de+W8o3qFtuWhTxYvqQh2ku1cYEqTTP9mR62nWV2lLK9qRuAGWmoaYWhU7K4evT9Lc1iF65wuw==
+nano-css@^5.3.1:
+  version "5.3.4"
+  resolved "https://registry.yarnpkg.com/nano-css/-/nano-css-5.3.4.tgz#40af6a83a76f84204f346e8ccaa9169cdae9167b"
+  integrity sha512-wfcviJB6NOxDIDfr7RFn/GlaN7I/Bhe4d39ZRCJ3xvZX60LVe2qZ+rDqM49nm4YT81gAjzS+ZklhKP/Gnfnubg==
   dependencies:
-    css-tree "^1.0.0-alpha.28"
-    csstype "^2.5.5"
-    fastest-stable-stringify "^1.0.1"
-    inline-style-prefixer "^4.0.0"
-    rtl-css-js "^1.9.0"
-    sourcemap-codec "^1.4.1"
-    stacktrace-js "^2.0.0"
-    stylis "3.5.0"
+    css-tree "^1.1.2"
+    csstype "^3.0.6"
+    fastest-stable-stringify "^2.0.2"
+    inline-style-prefixer "^6.0.0"
+    rtl-css-js "^1.14.0"
+    sourcemap-codec "^1.4.8"
+    stacktrace-js "^2.0.2"
+    stylis "^4.0.6"
 
 nanoid@^3.3.1:
   version "3.3.2"
@@ -8968,7 +8758,7 @@ picomatch@^2.0.4, picomatch@^2.0.7:
   resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.2.1.tgz#21bac888b6ed8601f831ce7816e335bc779f0a4a"
   integrity sha512-ISBaA8xQNmwELC7eOjqFKMESB2VIqt4PPDD0nsS95b/9dZXvVKOlz9keMSnoGGKcOHXfTvDD6WMaRoSc9UuhRA==
 
-picomatch@^2.2.1:
+picomatch@^2.2.1, picomatch@^2.3.0:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42"
   integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==
@@ -9043,13 +8833,6 @@ pkg-dir@^3.0.0:
   dependencies:
     find-up "^3.0.0"
 
-polished@3.5.2:
-  version "3.5.2"
-  resolved "https://registry.yarnpkg.com/polished/-/polished-3.5.2.tgz#ca132b8cd68f7ffa95ae9d423f03e7a14fda1062"
-  integrity sha512-vWoRDg3gY5RQBtUfcj9MRN10VCIf4EkdUikGxyXItg2Hnwk+eIVtdBiLajN0ldFeT3Vq4r/QNbjrQdhqBKrTug==
-  dependencies:
-    "@babel/runtime" "^7.8.7"
-
 posix-character-classes@^0.1.0:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/posix-character-classes/-/posix-character-classes-0.1.1.tgz#01eac0fe3b5af71a2a6c02feabb8c1fef7e00eab"
@@ -9102,9 +8885,9 @@ postcss-value-parser@^3.3.0, postcss-value-parser@^3.3.1:
   integrity sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==
 
 postcss-value-parser@^4.0.2:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz#443f6a20ced6481a2bda4fa8532a6e55d789a2cb"
-  integrity sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ==
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514"
+  integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==
 
 postcss@8.4.12:
   version "8.4.12"
@@ -9143,26 +8926,6 @@ prepend-http@^2.0.0:
   resolved "https://registry.yarnpkg.com/prepend-http/-/prepend-http-2.0.0.tgz#e92434bfa5ea8c19f41cdfd401d741a3c819d897"
   integrity sha1-6SQ0v6XqjBn0HN/UAddBo8gZ2Jc=
 
-pretty-format@^24.3.0:
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-24.9.0.tgz#12fac31b37019a4eea3c11aa9a959eb7628aa7c9"
-  integrity sha512-00ZMZUiHaJrNfk33guavqgvfJS30sLYf0f8+Srklv0AMPodGGHcoHgksZ3OThYnIvOd+8yMCn0YiEOogjlgsnA==
-  dependencies:
-    "@jest/types" "^24.9.0"
-    ansi-regex "^4.0.0"
-    ansi-styles "^3.2.0"
-    react-is "^16.8.4"
-
-pretty-format@^25.1.0:
-  version "25.1.0"
-  resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-25.1.0.tgz#ed869bdaec1356fc5ae45de045e2c8ec7b07b0c8"
-  integrity sha512-46zLRSGLd02Rp+Lhad9zzuNZ+swunitn8zIpfD2B4OPCRLXbM87RJT2aBLBWYOznNUML/2l/ReMyWNC80PJBUQ==
-  dependencies:
-    "@jest/types" "^25.1.0"
-    ansi-regex "^5.0.0"
-    ansi-styles "^4.0.0"
-    react-is "^16.12.0"
-
 pretty-format@^26.0.0, pretty-format@^26.6.2:
   version "26.6.2"
   resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-26.6.2.tgz#e35c2705f14cb7fe2fe94fa078345b444120fc93"
@@ -9245,15 +9008,6 @@ prompts@^2.4.2:
     kleur "^3.0.3"
     sisteransi "^1.0.5"
 
-prop-types@^15.6.2, prop-types@^15.7.2:
-  version "15.7.2"
-  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
-  integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
-  dependencies:
-    loose-envify "^1.4.0"
-    object-assign "^4.1.1"
-    react-is "^16.8.1"
-
 proxy-addr@~2.0.5:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-2.0.5.tgz#34cbd64a2d81f4b1fd21e76f9f06c8a45299ee34"
@@ -9442,13 +9196,6 @@ rc@^1.2.7, rc@^1.2.8:
     minimist "^1.2.0"
     strip-json-comments "~2.0.1"
 
-react-clientside-effect@^1.2.2:
-  version "1.2.2"
-  resolved "https://registry.yarnpkg.com/react-clientside-effect/-/react-clientside-effect-1.2.2.tgz#6212fb0e07b204e714581dd51992603d1accc837"
-  integrity sha512-nRmoyxeok5PBO6ytPvSjKp9xwXg9xagoTK1mMjwnQxqM9Hd7MNPl+LS1bOSOe+CV2+4fnEquc7H/S8QD3q697A==
-  dependencies:
-    "@babel/runtime" "^7.0.0"
-
 react-dom@^18.1.0:
   version "18.1.0"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.1.0.tgz#7f6dd84b706408adde05e1df575b3a024d7e8a2f"
@@ -9457,89 +9204,40 @@ react-dom@^18.1.0:
     loose-envify "^1.1.0"
     scheduler "^0.22.0"
 
-react-focus-lock@^2.1.0:
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/react-focus-lock/-/react-focus-lock-2.2.1.tgz#1d12887416925dc53481914b7cedd39494a3b24a"
-  integrity sha512-47g0xYcCTZccdzKRGufepY8oZ3W1Qg+2hn6u9SHZ0zUB6uz/4K4xJe7yYFNZ1qT6m+2JDm82F6QgKeBTbjW4PQ==
-  dependencies:
-    "@babel/runtime" "^7.0.0"
-    focus-lock "^0.6.6"
-    prop-types "^15.6.2"
-    react-clientside-effect "^1.2.2"
-    use-callback-ref "^1.2.1"
-    use-sidecar "^1.0.1"
-
-react-is@16.10.2:
-  version "16.10.2"
-  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.10.2.tgz#984120fd4d16800e9a738208ab1fba422d23b5ab"
-  integrity sha512-INBT1QEgtcCCgvccr5/86CfD71fw9EPmDxgiJX4I2Ddr6ZsV6iFXsuby+qWJPtmNuMY0zByTsG4468P7nHuNWA==
-
-react-is@^16.12.0, react-is@^16.7.0, react-is@^16.8.4:
+react-is@^16.7.0:
   version "16.13.0"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.0.tgz#0f37c3613c34fe6b37cd7f763a0d6293ab15c527"
   integrity sha512-GFMtL0vHkiBv9HluwNZTggSn/sCyEt9n02aM0dSAjGGyqyNlAyftYm4phPxdvCigG15JreC5biwxCgTAJZ7yAA==
 
-react-is@^16.8.1:
-  version "16.9.0"
-  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.9.0.tgz#21ca9561399aad0ff1a7701c01683e8ca981edcb"
-  integrity sha512-tJBzzzIgnnRfEm046qRcURvwQnZVXmuCbscxUO5RWrGTXpon2d4c8mI0D8WE6ydVIm29JiLB6+RslkIvym9Rjw==
-
 react-is@^17.0.1:
   version "17.0.2"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
   integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
 
-react-remove-scroll-bar@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/react-remove-scroll-bar/-/react-remove-scroll-bar-2.0.0.tgz#94437a7f3dbda99817ff64b928ee206e298ba157"
-  integrity sha512-HSdWZ+6vV6X1btLRhQlIcFulaMePCyg0Un2oXMmDdq8lK9KPUMSnWYINYWVCdgT35em9hiUaR8frBN1PYYLLpQ==
-  dependencies:
-    react-style-singleton "^2.0.0"
-    tslib "^1.0.0"
-
-react-remove-scroll@^2.0.4:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/react-remove-scroll/-/react-remove-scroll-2.2.0.tgz#f42e6a4791ebfcce2c96f970d24deb1399fa9550"
-  integrity sha512-bT29xAkNuhS2tnsxhLNJrmmb6Rn8VsnlOfSoRaKdKi90DbhRcQfJ9vHG1TtgfkCP+rx059vCGIScPZaCWsyIKA==
-  dependencies:
-    react-remove-scroll-bar "^2.0.0"
-    react-style-singleton "^2.0.0"
-    tslib "^1.0.0"
-    use-callback-ref "^1.2.1"
-    use-sidecar "^1.0.1"
-
-react-style-singleton@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/react-style-singleton/-/react-style-singleton-2.0.0.tgz#fdc9ff3a82674c256f0033d140b7b1d9d37e7f17"
-  integrity sha512-1Kw9G/b7EqLspjtiKsC9jtoqkx+RAti+8PmBe47ioKTcdhB3gtaKw2Lc3Hsud/VrXh+QECZKmr2yDCwR7ObNtA==
-  dependencies:
-    invariant "^2.2.4"
-    tslib "^1.0.0"
-
 react-universal-interface@^0.6.2:
   version "0.6.2"
   resolved "https://registry.yarnpkg.com/react-universal-interface/-/react-universal-interface-0.6.2.tgz#5e8d438a01729a4dbbcbeeceb0b86be146fe2b3b"
   integrity sha512-dg8yXdcQmvgR13RIlZbTRQOoUrDciFVoSBZILwjE2LFISxZZ8loVJKAkuzswl5js8BHda79bIb2b84ehU8IjXw==
 
-react-use@^15.3.0:
-  version "15.3.8"
-  resolved "https://registry.yarnpkg.com/react-use/-/react-use-15.3.8.tgz#ca839ac7fb3d696e5ccbeabbc8dadc2698969d30"
-  integrity sha512-GeGcrmGuUvZrY5wER3Lnph9DSYhZt5nEjped4eKDq8BRGr2CnLf9bDQWG9RFc7oCPphnscUUdOovzq0E5F2c6Q==
+react-use@^17.3.2:
+  version "17.3.2"
+  resolved "https://registry.yarnpkg.com/react-use/-/react-use-17.3.2.tgz#448abf515f47c41c32455024db28167cb6e53be8"
+  integrity sha512-bj7OD0/1wL03KyWmzFXAFe425zziuTf7q8olwCYBfOeFHY1qfO1FAMjROQLsLZYwG4Rx63xAfb7XAbBrJsZmEw==
   dependencies:
-    "@types/js-cookie" "2.2.6"
-    "@xobotyi/scrollbar-width" "1.9.5"
-    copy-to-clipboard "^3.2.0"
+    "@types/js-cookie" "^2.2.6"
+    "@xobotyi/scrollbar-width" "^1.9.5"
+    copy-to-clipboard "^3.3.1"
     fast-deep-equal "^3.1.3"
     fast-shallow-equal "^1.0.0"
     js-cookie "^2.2.1"
-    nano-css "^5.2.1"
+    nano-css "^5.3.1"
     react-universal-interface "^0.6.2"
     resize-observer-polyfill "^1.5.1"
-    screenfull "^5.0.0"
+    screenfull "^5.1.0"
     set-harmonic-interval "^1.0.1"
-    throttle-debounce "^2.1.0"
+    throttle-debounce "^3.0.1"
     ts-easing "^0.2.0"
-    tslib "^2.0.0"
+    tslib "^2.1.0"
 
 react-window@^1.8.7:
   version "1.8.7"
@@ -9549,14 +9247,6 @@ react-window@^1.8.7:
     "@babel/runtime" "^7.0.0"
     memoize-one ">=3.1.1 <6"
 
-react@^16.10.2, react@^17:
-  version "17.0.2"
-  resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037"
-  integrity sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==
-  dependencies:
-    loose-envify "^1.1.0"
-    object-assign "^4.1.1"
-
 react@^18.1.0:
   version "18.1.0"
   resolved "https://registry.yarnpkg.com/react/-/react-18.1.0.tgz#6f8620382decb17fdc5cc223a115e2adbf104890"
@@ -9931,10 +9621,10 @@ ripemd160@^2.0.0, ripemd160@^2.0.1:
     hash-base "^3.0.0"
     inherits "^2.0.1"
 
-rtl-css-js@^1.9.0:
-  version "1.13.1"
-  resolved "https://registry.yarnpkg.com/rtl-css-js/-/rtl-css-js-1.13.1.tgz#80deabf6e8f36d6767d495cd3eb60fecb20c67e1"
-  integrity sha512-jgkIDj6Xi25kAEm5oYM3ZMFiOQhpLEcXi2LY/6bVr91cVz73hciHKneL5AMVPxOcks/JuizSaaNsvNRkeAWe3w==
+rtl-css-js@^1.14.0:
+  version "1.15.0"
+  resolved "https://registry.yarnpkg.com/rtl-css-js/-/rtl-css-js-1.15.0.tgz#680ed816e570a9ebccba9e1cd0f202c6a8bb2dc0"
+  integrity sha512-99Cu4wNNIhrI10xxUaABHsdDqzalrSRTie4GeCmbGVuehm4oj+fIy8fTzB+16pmKe8Bv9rl+hxIBez6KxExTew==
   dependencies:
     "@babel/runtime" "^7.1.2"
 
@@ -10064,10 +9754,10 @@ schema-utils@^2.6.5:
     ajv "^6.12.4"
     ajv-keywords "^3.5.2"
 
-screenfull@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/screenfull/-/screenfull-5.0.0.tgz#5c2010c0e84fd4157bf852877698f90b8cbe96f6"
-  integrity sha512-yShzhaIoE9OtOhWVyBBffA6V98CDCoyHTsp8228blmqYy1Z5bddzE/4FPiJKlr8DVR4VBiiUyfPzIQPIYDkeMA==
+screenfull@^5.1.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/screenfull/-/screenfull-5.2.0.tgz#6533d524d30621fc1283b9692146f3f13a93d1ba"
+  integrity sha512-9BakfsO2aUQN2K9Fdbj87RJIEZ82Q9IGim7FqM5OsebfoFC6ZHXgDq/KvniuLTPdeM8wY2o6Dj3WQ7KeQCj3cA==
 
 semver-diff@^3.1.1:
   version "3.1.1"
@@ -10404,10 +10094,10 @@ source-map@^0.7.3:
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.7.3.tgz#5302f8169031735226544092e64981f751750383"
   integrity sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==
 
-sourcemap-codec@^1.4.1:
-  version "1.4.6"
-  resolved "https://registry.yarnpkg.com/sourcemap-codec/-/sourcemap-codec-1.4.6.tgz#e30a74f0402bad09807640d39e971090a08ce1e9"
-  integrity sha512-1ZooVLYFxC448piVLBbtOxFcXwnymH9oUF8nRd3CuYDVvkRBxRl6pB4Mtas5a4drtL+E8LDgFkQNcgIw6tc8Hg==
+sourcemap-codec@^1.4.8:
+  version "1.4.8"
+  resolved "https://registry.yarnpkg.com/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz#ea804bd94857402e6992d05a38ef1ae35a9ab4c4"
+  integrity sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==
 
 spawn-sync@1.0.15:
   version "1.0.15"
@@ -10472,12 +10162,12 @@ ssri@^6.0.1:
   dependencies:
     figgy-pudding "^3.5.1"
 
-stack-generator@^2.0.4:
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/stack-generator/-/stack-generator-2.0.4.tgz#027513eab2b195bbb43b9c8360ba2dd0ab54de09"
-  integrity sha512-ha1gosTNcgxwzo9uKTQ8zZ49aUp5FIUW58YHFxCqaAHtE0XqBg0chGFYA1MfmW//x1KWq3F4G7Ug7bJh4RiRtg==
+stack-generator@^2.0.5:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/stack-generator/-/stack-generator-2.0.5.tgz#fb00e5b4ee97de603e0773ea78ce944d81596c36"
+  integrity sha512-/t1ebrbHkrLrDuNMdeAcsvynWgoH/i4o8EGGfX7dEYDoTXOYVAkEpFdtshlvabzc6JlJ8Kf9YdFEoz7JkzGN9Q==
   dependencies:
-    stackframe "^1.1.0"
+    stackframe "^1.1.1"
 
 stack-utils@^2.0.3:
   version "2.0.3"
@@ -10486,27 +10176,27 @@ stack-utils@^2.0.3:
   dependencies:
     escape-string-regexp "^2.0.0"
 
-stackframe@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/stackframe/-/stackframe-1.1.0.tgz#e3fc2eb912259479c9822f7d1f1ff365bd5cbc83"
-  integrity sha512-Vx6W1Yvy+AM1R/ckVwcHQHV147pTPBKWCRLrXMuPrFVfvBUc3os7PR1QLIWCMhPpRg5eX9ojzbQIMLGBwyLjqg==
+stackframe@^1.1.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/stackframe/-/stackframe-1.2.1.tgz#1033a3473ee67f08e2f2fc8eba6aef4f845124e1"
+  integrity sha512-h88QkzREN/hy8eRdyNhhsO7RSJ5oyTqxxmmn0dzBIMUclZsjpfmrsg81vp8mjjAs2vAZ72nyWxRUwSwmh0e4xg==
 
-stacktrace-gps@^3.0.3:
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/stacktrace-gps/-/stacktrace-gps-3.0.3.tgz#b89f84cc13bb925b96607e737b617c8715facf57"
-  integrity sha512-51Rr7dXkyFUKNmhY/vqZWK+EvdsfFSRiQVtgHTFlAdNIYaDD7bVh21yBHXaNWAvTD+w+QSjxHg7/v6Tz4veExA==
+stacktrace-gps@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/stacktrace-gps/-/stacktrace-gps-3.0.4.tgz#7688dc2fc09ffb3a13165ebe0dbcaf41bcf0c69a"
+  integrity sha512-qIr8x41yZVSldqdqe6jciXEaSCKw1U8XTXpjDuy0ki/apyTn/r3w9hDAAQOhZdxvsC93H+WwwEu5cq5VemzYeg==
   dependencies:
     source-map "0.5.6"
-    stackframe "^1.1.0"
+    stackframe "^1.1.1"
 
-stacktrace-js@^2.0.0:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/stacktrace-js/-/stacktrace-js-2.0.1.tgz#ebdb0e9a16e6f171f96ca7878404e7f15c3d42ba"
-  integrity sha512-13oDNgBSeWtdGa4/2BycNyKqe+VktCoJ8VLx4pDoJkwGGJVtiHdfMOAj3aW9xTi8oR2v34z9IcvfCvT6XNdNAw==
+stacktrace-js@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/stacktrace-js/-/stacktrace-js-2.0.2.tgz#4ca93ea9f494752d55709a081d400fdaebee897b"
+  integrity sha512-Je5vBeY4S1r/RnLydLl0TBTi3F2qdfWmYsGvtfZgEI+SCprPppaIhQf5nGcal4gI4cGpCV/duLcAzT1np6sQqg==
   dependencies:
-    error-stack-parser "^2.0.4"
-    stack-generator "^2.0.4"
-    stacktrace-gps "^3.0.3"
+    error-stack-parser "^2.0.6"
+    stack-generator "^2.0.5"
+    stacktrace-gps "^3.0.4"
 
 static-extend@^0.1.1:
   version "0.1.2"
@@ -10715,42 +10405,23 @@ strip-json-comments@~2.0.1:
   resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-2.0.1.tgz#3c531942e908c2697c0ec344858c286c7ca0a60a"
   integrity sha1-PFMZQukIwml8DsNEhYwobHygpgo=
 
-styled-components@^5.2.0:
-  version "5.2.0"
-  resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-5.2.0.tgz#6dcb5aa8a629c84b8d5ab34b7167e3e0c6f7ed74"
-  integrity sha512-9qE8Vgp8C5cpGAIdFaQVAl89Zgx1TDM4Yf4tlHbO9cPijtpSXTMLHy9lmP0lb+yImhgPFb1AmZ1qMUubmg3HLg==
+styled-components@^5.3.5:
+  version "5.3.5"
+  resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-5.3.5.tgz#a750a398d01f1ca73af16a241dec3da6deae5ec4"
+  integrity sha512-ndETJ9RKaaL6q41B69WudeqLzOpY1A/ET/glXkNZ2T7dPjPqpPCXXQjDFYZWwNnE5co0wX+gTCqx9mfxTmSIPg==
   dependencies:
     "@babel/helper-module-imports" "^7.0.0"
     "@babel/traverse" "^7.4.5"
-    "@emotion/is-prop-valid" "^0.8.8"
+    "@emotion/is-prop-valid" "^1.1.0"
     "@emotion/stylis" "^0.8.4"
     "@emotion/unitless" "^0.7.4"
-    babel-plugin-styled-components ">= 1"
+    babel-plugin-styled-components ">= 1.12.0"
     css-to-react-native "^3.0.0"
     hoist-non-react-statics "^3.0.0"
     shallowequal "^1.1.0"
     supports-color "^5.5.0"
 
-styled-system@5.1.2:
-  version "5.1.2"
-  resolved "https://registry.yarnpkg.com/styled-system/-/styled-system-5.1.2.tgz#26a105a4b9110874b5857bb34de20dada8695130"
-  integrity sha512-gbiohoqYYtvg9Q6nA3EagQSouHI9ylmcKUHHaUvCQrPpnPeJlUJAvj9vfyDgsJjw/oBogggfojF1X9EShfPffg==
-  dependencies:
-    "@styled-system/background" "^5.1.2"
-    "@styled-system/border" "^5.1.2"
-    "@styled-system/color" "^5.1.2"
-    "@styled-system/core" "^5.1.2"
-    "@styled-system/flexbox" "^5.1.2"
-    "@styled-system/grid" "^5.1.2"
-    "@styled-system/layout" "^5.1.2"
-    "@styled-system/position" "^5.1.2"
-    "@styled-system/shadow" "^5.1.2"
-    "@styled-system/space" "^5.1.2"
-    "@styled-system/typography" "^5.1.2"
-    "@styled-system/variant" "^5.1.2"
-    object-assign "^4.1.1"
-
-styled-system@^5.1.4:
+styled-system@5.1.5, styled-system@^5.1.5:
   version "5.1.5"
   resolved "https://registry.yarnpkg.com/styled-system/-/styled-system-5.1.5.tgz#e362d73e1dbb5641a2fd749a6eba1263dc85075e"
   integrity sha512-7VoD0o2R3RKzOzPK0jYrVnS8iJdfkKsQJNiLRDjikOpQVqQHns/DXWaPZOH4tIKkhAT7I6wIsy9FWTWh2X3q+A==
@@ -10769,10 +10440,10 @@ styled-system@^5.1.4:
     "@styled-system/variant" "^5.1.5"
     object-assign "^4.1.1"
 
-stylis@3.5.0:
-  version "3.5.0"
-  resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.5.0.tgz#016fa239663d77f868fef5b67cf201c4b7c701e1"
-  integrity sha512-pP7yXN6dwMzAR29Q0mBrabPCe0/mNO1MSr93bhay+hcZondvMMTpeGyd8nbhYJdyperNT2DRxONQuUGcJr5iPw==
+stylis@^4.0.6:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.1.1.tgz#e46c6a9bbf7c58db1e65bb730be157311ae1fe12"
+  integrity sha512-lVrM/bNdhVX2OgBFNa2YJ9Lxj7kPzylieHd3TNjuGE0Re9JB7joL5VUKOVH1kdNNJTgGPpT8hmwIAPLaSyEVFQ==
 
 supports-color@6.1.0:
   version "6.1.0"
@@ -10936,10 +10607,10 @@ throat@^6.0.1:
   resolved "https://registry.yarnpkg.com/throat/-/throat-6.0.1.tgz#d514fedad95740c12c2d7fc70ea863eb51ade375"
   integrity sha512-8hmiGIJMDlwjg7dlJ4yKGLK8EsYqKgPWbG3b4wjJddKNwc7N7Dpn08Df4szr/sZdMVeOstrdYSsqzX6BYbcB+w==
 
-throttle-debounce@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/throttle-debounce/-/throttle-debounce-2.1.0.tgz#257e648f0a56bd9e54fe0f132c4ab8611df4e1d5"
-  integrity sha512-AOvyNahXQuU7NN+VVvOOX+uW6FPaWdAOdRP5HfwYxAfCzXTFKRMoIMk+n+po318+ktcChx+F1Dd91G3YHeMKyg==
+throttle-debounce@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/throttle-debounce/-/throttle-debounce-3.0.1.tgz#32f94d84dfa894f786c9a1f290e7a645b6a19abb"
+  integrity sha512-dTEWWNu6JmeVXY0ZYoPuH5cRIwc0MeGbJwah9KUNYSJwommQpCzTySTpEe8Gs1J23aeWEuAobe4Ag7EHVt/LOg==
 
 through2@^2.0.0:
   version "2.0.5"
@@ -11084,21 +10755,11 @@ ts-easing@^0.2.0:
   resolved "https://registry.yarnpkg.com/ts-easing/-/ts-easing-0.2.0.tgz#c8a8a35025105566588d87dbda05dd7fbfa5a4ec"
   integrity sha512-Z86EW+fFFh/IFB1fqQ3/+7Zpf9t2ebOAxNI/V6Wo7r5gqiqtxmgTlQ1qbqQcjLKYeSHPTsEmvlJUDg/EuL0uHQ==
 
-tslib@^1.0.0:
-  version "1.11.1"
-  resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.11.1.tgz#eb15d128827fbee2841549e171f45ed338ac7e35"
-  integrity sha512-aZW88SY8kQbU7gpV19lN24LtXh/yD4ZZg6qieAJDDg+YBsJcSmLGK9QpnUjAKVG/xefmvJGd1WUmfpT/g6AJGA==
-
 tslib@^1.9.0, tslib@^1.9.3:
   version "1.10.0"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.10.0.tgz#c3c19f95973fb0a62973fb09d90d961ee43e5c8a"
   integrity sha512-qOebF53frne81cf0S9B41ByenJ3/IuH8yJKngAX35CmiZySA0khhkovshKK+jGCaMnVomla7gVlIcc3EvKPbTQ==
 
-tslib@^2.0.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.2.0.tgz#fb2c475977e35e241311ede2693cee1ec6698f5c"
-  integrity sha512-gS9GVHRU+RGn5KQM2rllAlR3dU6m7AcpJKdtH8gFvQiC4Otgk98XnmMU+nZenHt/+VhnBPWwgrJsyrdcw6i23w==
-
 tslib@^2.1.0:
   version "2.4.0"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.4.0.tgz#7cecaa7f073ce680a05847aa77be941098f36dc3"
@@ -11387,19 +11048,6 @@ url@^0.11.0:
     punycode "1.3.2"
     querystring "0.2.0"
 
-use-callback-ref@^1.2.1:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/use-callback-ref/-/use-callback-ref-1.2.1.tgz#898759ccb9e14be6c7a860abafa3ffbd826c89bb"
-  integrity sha512-C3nvxh0ZpaOxs9RCnWwAJ+7bJPwQI8LHF71LzbQ3BvzH5XkdtlkMadqElGevg5bYBDFip4sAnD4m06zAKebg1w==
-
-use-sidecar@^1.0.1:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/use-sidecar/-/use-sidecar-1.0.2.tgz#e72f582a75842f7de4ef8becd6235a4720ad8af6"
-  integrity sha512-287RZny6m5KNMTb/Kq9gmjafi7lQL0YHO1lYolU6+tY1h9+Z3uCtkJJ3OSOq3INwYf2hBryCcDh4520AhJibMA==
-  dependencies:
-    detect-node "^2.0.4"
-    tslib "^1.9.3"
-
 use@^3.1.0:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/use/-/use-3.1.1.tgz#d50c8cac79a19fbc20f2911f56eb973f4e10070f"
@@ -11491,11 +11139,6 @@ w3c-xmlserializer@^2.0.0:
   dependencies:
     xml-name-validator "^3.0.0"
 
-wait-for-expect@^3.0.2:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/wait-for-expect/-/wait-for-expect-3.0.2.tgz#d2f14b2f7b778c9b82144109c8fa89ceaadaa463"
-  integrity sha512-cfS1+DZxuav1aBYbaO/kE06EOS8yRw7qOFoD3XtjTkYvCvh3zUvNST8DXK/nPaeqIzIv3P3kL3lRJn8iwOiSag==
-
 wait-on@^6.0.0:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/wait-on/-/wait-on-6.0.1.tgz#16bbc4d1e4ebdd41c5b4e63a2e16dbd1f4e5601e"

From 23c0b8118a34d36dcde493d2c423e61251eae307 Mon Sep 17 00:00:00 2001
From: EnixCoda <enixcoda@gmail.com>
Date: Sat, 14 May 2022 23:00:52 +0800
Subject: [PATCH 12/93] refactor: extract hooks

---
 src/components/FileExplorer.tsx               | 315 ------------------
 .../{ => FileExplorer}/DiffStatGraph.tsx      |   2 +-
 .../{ => FileExplorer}/DiffStatText.tsx       |   2 +-
 src/components/FileExplorer/ListView.tsx      |  65 ++++
 src/components/{ => FileExplorer}/Node.tsx    |   2 +-
 src/components/FileExplorer/VirtualNode.tsx   |  30 ++
 src/components/FileExplorer/index.tsx         | 217 ++++++++++++
 .../FileExplorer/useNodeRenderers.tsx         | 103 ++++++
 src/utils/general.ts                          |   4 +
 9 files changed, 422 insertions(+), 318 deletions(-)
 delete mode 100644 src/components/FileExplorer.tsx
 rename src/components/{ => FileExplorer}/DiffStatGraph.tsx (97%)
 rename src/components/{ => FileExplorer}/DiffStatText.tsx (96%)
 create mode 100644 src/components/FileExplorer/ListView.tsx
 rename src/components/{ => FileExplorer}/Node.tsx (98%)
 create mode 100644 src/components/FileExplorer/VirtualNode.tsx
 create mode 100644 src/components/FileExplorer/index.tsx
 create mode 100644 src/components/FileExplorer/useNodeRenderers.tsx

diff --git a/src/components/FileExplorer.tsx b/src/components/FileExplorer.tsx
deleted file mode 100644
index 0f4fdc5..0000000
--- a/src/components/FileExplorer.tsx
+++ /dev/null
@@ -1,315 +0,0 @@
-import { Label, Text } from '@primer/react'
-import { LoadingIndicator } from 'components/LoadingIndicator'
-import { Node } from 'components/Node'
-import { SearchBar } from 'components/SearchBar'
-import { useConfigs } from 'containers/ConfigsContext'
-import { connect } from 'driver/connect'
-import { FileExplorerCore } from 'driver/core'
-import { ConnectorState, Props } from 'driver/core/FileExplorer'
-import { platform } from 'platforms'
-import * as React from 'react'
-import { FixedSizeList, ListChildComponentProps } from 'react-window'
-import { cx } from 'utils/cx'
-import { focusFileExplorer } from 'utils/DOMHelper'
-import { run } from 'utils/general'
-import { useLoadedContext } from 'utils/hooks/useLoadedContext'
-import { useOnLocationChange } from 'utils/hooks/useOnLocationChange'
-import { useOnPJAXDone } from 'utils/hooks/usePJAX'
-import { useSequentialEffect } from 'utils/hooks/useSequentialEffect'
-import { VisibleNodes } from 'utils/VisibleNodesGenerator'
-import { SideBarStateContext } from '../containers/SideBarState'
-import { DiffStatGraph } from './DiffStatGraph'
-import { DiffStatText } from './DiffStatText'
-import { Icon } from './Icon'
-import { SearchMode, searchModes } from './searchModes'
-import { SizeObserver } from './SizeObserver'
-
-type renderNodeContext = {
-  onNodeClick: (event: React.MouseEvent<HTMLElement, MouseEvent>, node: TreeNode) => void
-  renderLabelText: (node: TreeNode) => React.ReactNode
-  renderActions: ((node: TreeNode) => React.ReactNode) | undefined
-  visibleNodes: VisibleNodes
-}
-
-const RawFileExplorer: React.FC<Props & ConnectorState> = function RawFileExplorer(props) {
-  const {
-    visibleNodes,
-    visibleNodesGenerator,
-    freeze,
-    onNodeClick,
-    searchKey,
-    updateSearchKey,
-    onFocusSearchBar,
-    goTo,
-    handleKeyDown,
-    metaData,
-    expandTo,
-    setUpTree,
-    defer,
-    searched,
-  } = props
-  const {
-    value: {
-      accessToken,
-      compressSingletonFolder,
-      searchMode,
-      commentToggle,
-      restoreExpandedFolders,
-      showDiffInText,
-    },
-  } = useConfigs()
-
-  const onSearch = React.useCallback(
-    (searchKey: string, searchMode: SearchMode) => {
-      updateSearchKey(searchKey)
-      if (visibleNodesGenerator) {
-        visibleNodesGenerator.search(
-          searchModes[searchMode].getSearchParams(searchKey),
-          restoreExpandedFolders,
-        )
-      }
-    },
-    [updateSearchKey, visibleNodesGenerator, restoreExpandedFolders],
-  )
-
-  const stateContext = useLoadedContext(SideBarStateContext)
-  const state = stateContext.value
-
-  useSequentialEffect(
-    checker => {
-      setUpTree(
-        {
-          metaData,
-          config: {
-            compressSingletonFolder,
-            accessToken,
-          },
-          stateContext,
-        },
-        checker,
-      )
-    },
-    [setUpTree, metaData, compressSingletonFolder, accessToken],
-  )
-
-  React.useEffect(() => {
-    focusFileExplorer()
-  }, [])
-
-  const renderActions: ((node: TreeNode) => React.ReactNode) | undefined = React.useMemo(() => {
-    const renderGoToButton = (node: TreeNode): React.ReactNode => (
-      <button
-        title={'Reveal in file tree'}
-        className={'go-to-button'}
-        onClick={e => {
-          e.stopPropagation()
-          e.preventDefault()
-          goTo(node.path.split('/'))
-        }}
-      >
-        <Icon type="go-to" />
-      </button>
-    )
-    const renderFindInFolderButton = (node: TreeNode): React.ReactNode =>
-      node.type === 'tree' ? (
-        <button
-          title={'Find in folder...'}
-          className={'find-in-folder-button'}
-          onClick={e => {
-            e.stopPropagation()
-            e.preventDefault()
-            onSearch(node.path + '/', searchMode)
-          }}
-        >
-          <Icon type="search" />
-        </button>
-      ) : undefined
-    const renderFileCommentAmounts = (node: TreeNode): React.ReactNode =>
-      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
-          className={'node-item-diff'}
-          title={`${diff.status}, ${diff.changes} changes: +${diff.additions} & -${diff.deletions}`}
-        >
-          {showDiffInText ? <DiffStatText diff={diff} /> : <DiffStatGraph diff={diff} />}
-        </span>
-      )
-
-    const renders: ((node: TreeNode) => React.ReactNode)[] = []
-    if (searchMode === 'fuzzy') renders.push(renderFindInFolderButton)
-    if (searched) renders.push(renderGoToButton)
-    if (commentToggle) renders.push(renderFileCommentAmounts)
-    renders.push(renderFileStatus)
-
-    return renders.length
-      ? node => renders.map((render, i) => <React.Fragment key={i}>{render(node)}</React.Fragment>)
-      : undefined
-  }, [goTo, onSearch, searched, searchMode, commentToggle, showDiffInText])
-
-  const renderLabelText = React.useCallback(
-    (node: TreeNode) => searchModes[searchMode].renderNodeLabelText(node, searchKey),
-    [searchKey, searchMode],
-  )
-
-  const renderNodeContext: renderNodeContext | null = React.useMemo(
-    () =>
-      visibleNodes && {
-        onNodeClick,
-        renderActions,
-        renderLabelText,
-        visibleNodes,
-      },
-    [onNodeClick, renderActions, renderLabelText, visibleNodes],
-  )
-
-  return (
-    <div className={cx(`file-explorer`, { freeze })} tabIndex={-1} onKeyDown={handleKeyDown}>
-      {run(() => {
-        switch (state) {
-          case 'tree-loading':
-            return <LoadingIndicator text={'Fetching File List...'} />
-          case 'tree-rendering':
-            return <LoadingIndicator text={'Rendering File List...'} />
-          case 'tree-rendered':
-            return (
-              visibleNodes &&
-              renderNodeContext && (
-                <>
-                  {defer && (
-                    <div className={'status'}>
-                      <Label
-                        title="This repository is large. Gitako has switched to Lazy Mode to improve performance. Folders will be loaded when it gets expanded."
-                        className={'lazy-mode'}
-                        variant="attention"
-                      >
-                        Lazy Mode is ON
-                      </Label>
-                    </div>
-                  )}
-                  <SearchBar value={searchKey} onSearch={onSearch} onFocus={onFocusSearchBar} />
-                  {searched && visibleNodes.nodes.length === 0 && (
-                    <>
-                      <Text marginTop={6} textAlign="center" color="text.gray">
-                        No results found.
-                      </Text>
-                      {defer && (
-                        <Text textAlign="center" color="gray.4" fontSize="12px">
-                          Search results are limited to loaded folders in Lazy Mode.
-                        </Text>
-                      )}
-                    </>
-                  )}
-                  <SizeObserver className={'files'}>
-                    {({ width = 0, height = 0 }) => (
-                      <div className={'magic-size-container'}>
-                        <ListView
-                          height={height}
-                          width={width}
-                          renderNodeContext={renderNodeContext}
-                          expandTo={expandTo}
-                          metaData={metaData}
-                        />
-                      </div>
-                    )}
-                  </SizeObserver>
-                </>
-              )
-            )
-        }
-      })}
-    </div>
-  )
-}
-
-RawFileExplorer.defaultProps = {
-  freeze: false,
-  searchKey: '',
-  visibleNodes: null,
-}
-
-export const FileExplorer = connect(FileExplorerCore)(RawFileExplorer)
-
-const VirtualNode = React.memo(function VirtualNode({
-  index,
-  style,
-  data: { onNodeClick, renderLabelText, renderActions, visibleNodes },
-}: Override<ListChildComponentProps, { data: renderNodeContext }>) {
-  if (!visibleNodes) return null
-
-  const { nodes, focusedNode, expandedNodes, loading, depths } = visibleNodes as VisibleNodes
-  const node = nodes[index]
-
-  return (
-    <Node
-      style={style}
-      key={node.path}
-      node={node}
-      depth={depths.get(node) || 0}
-      focused={focusedNode?.path === node.path}
-      loading={loading.has(node.path)}
-      expanded={expandedNodes.has(node.path)}
-      onClick={onNodeClick}
-      renderLabelText={renderLabelText}
-      renderActions={renderActions}
-    />
-  )
-})
-
-type ListViewProps = {
-  height: number
-  width: number
-  renderNodeContext: renderNodeContext
-} & Pick<Props, 'metaData'> &
-  Pick<ConnectorState, 'expandTo'>
-
-function ListView({ width, height, metaData, expandTo, renderNodeContext }: ListViewProps) {
-  const { visibleNodes } = renderNodeContext
-  const { focusedNode, nodes } = visibleNodes
-  const listRef = React.useRef<FixedSizeList>(null)
-  // the change of depths indicates switch into/from search state
-  React.useEffect(() => {
-    if (listRef.current && focusedNode?.path) {
-      const index = nodes.findIndex(node => node.path === focusedNode.path)
-      if (index !== -1) {
-        listRef.current.scrollToItem(index, 'auto')
-      }
-    }
-  }, [focusedNode?.path, nodes])
-  // For some reason, removing the deps array above results in bug:
-  // If scroll fast and far, then clicking on items would result in redirect
-  // Not know the reason :(
-
-  const goToCurrentItem = React.useCallback(() => {
-    const targetPath = platform.getCurrentPath(metaData.branchName)
-    if (targetPath) expandTo(targetPath)
-  }, [metaData.branchName])
-
-  useOnLocationChange(goToCurrentItem)
-  useOnPJAXDone(goToCurrentItem)
-
-  const { compactFileTree } = useConfigs().value
-
-  return (
-    <FixedSizeList
-      ref={listRef}
-      itemKey={(index, { visibleNodes }) => visibleNodes?.nodes[index]?.path}
-      itemData={renderNodeContext}
-      itemCount={visibleNodes.nodes.length}
-      itemSize={compactFileTree ? 24 : 37}
-      height={height}
-      width={width}
-    >
-      {VirtualNode}
-    </FixedSizeList>
-  )
-}
diff --git a/src/components/DiffStatGraph.tsx b/src/components/FileExplorer/DiffStatGraph.tsx
similarity index 97%
rename from src/components/DiffStatGraph.tsx
rename to src/components/FileExplorer/DiffStatGraph.tsx
index 7aaa2dd..2a93095 100644
--- a/src/components/DiffStatGraph.tsx
+++ b/src/components/FileExplorer/DiffStatGraph.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { resolveDiffGraphMeta } from 'utils/general'
-import { Icon } from './Icon'
+import { Icon } from '../Icon'
 
 export function DiffStatGraph({
   diff: { status, changes, additions, deletions },
diff --git a/src/components/DiffStatText.tsx b/src/components/FileExplorer/DiffStatText.tsx
similarity index 96%
rename from src/components/DiffStatText.tsx
rename to src/components/FileExplorer/DiffStatText.tsx
index 2f8715c..338535d 100644
--- a/src/components/DiffStatText.tsx
+++ b/src/components/FileExplorer/DiffStatText.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { Icon } from './Icon'
+import { Icon } from '../Icon'
 
 export function DiffStatText({
   diff: { status, changes, additions, deletions },
diff --git a/src/components/FileExplorer/ListView.tsx b/src/components/FileExplorer/ListView.tsx
new file mode 100644
index 0000000..ee2ed1b
--- /dev/null
+++ b/src/components/FileExplorer/ListView.tsx
@@ -0,0 +1,65 @@
+import { useConfigs } from 'containers/ConfigsContext'
+import { ConnectorState, Props } from 'driver/core/FileExplorer'
+import { platform } from 'platforms'
+import * as React from 'react'
+import { Align as ReactWindowAlign, FixedSizeList } from 'react-window'
+import { useOnLocationChange } from 'utils/hooks/useOnLocationChange'
+import { useOnPJAXDone } from 'utils/hooks/usePJAX'
+import { NodeRendererContext } from '.'
+import { VirtualNode } from './VirtualNode'
+
+type ListViewProps = {
+  height: number
+  width: number
+  nodeRendererContext: NodeRendererContext
+  scrollMode: ReactWindowAlign
+} & Pick<Props, 'metaData'> &
+  Pick<ConnectorState, 'expandTo'>
+
+export function ListView({
+  width,
+  height,
+  metaData,
+  expandTo,
+  nodeRendererContext,
+  scrollMode,
+}: ListViewProps) {
+  const { visibleNodes } = nodeRendererContext
+  const { focusedNode, nodes } = visibleNodes
+  const listRef = React.useRef<FixedSizeList>(null)
+  // the change of depths indicates switch into/from search state
+  React.useEffect(() => {
+    if (listRef.current && focusedNode?.path) {
+      const index = nodes.findIndex(node => node.path === focusedNode.path)
+      if (index !== -1) {
+        listRef.current.scrollToItem(index, scrollMode)
+      }
+    }
+  }, [focusedNode?.path, nodes])
+  // For some reason, removing the deps array above results in bug:
+  // If scroll fast and far, then clicking on items would result in redirect
+  // Not know the reason :(
+  const goToCurrentItem = React.useCallback(() => {
+    const targetPath = platform.getCurrentPath(metaData.branchName)
+    if (targetPath) expandTo(targetPath)
+  }, [metaData.branchName])
+
+  useOnLocationChange(goToCurrentItem)
+  useOnPJAXDone(goToCurrentItem)
+
+  const { compactFileTree } = useConfigs().value
+
+  return (
+    <FixedSizeList
+      ref={listRef}
+      itemKey={(index, { visibleNodes }) => visibleNodes?.nodes[index]?.path}
+      itemData={nodeRendererContext}
+      itemCount={visibleNodes.nodes.length}
+      itemSize={compactFileTree ? 24 : 37}
+      height={height}
+      width={width}
+    >
+      {VirtualNode}
+    </FixedSizeList>
+  )
+}
diff --git a/src/components/Node.tsx b/src/components/FileExplorer/Node.tsx
similarity index 98%
rename from src/components/Node.tsx
rename to src/components/FileExplorer/Node.tsx
index 77117a4..51368f3 100644
--- a/src/components/Node.tsx
+++ b/src/components/FileExplorer/Node.tsx
@@ -3,7 +3,7 @@ import { platform } from 'platforms'
 import * as React from 'react'
 import { cx } from 'utils/cx'
 import { getFileIconURL, getFolderIconURL } from 'utils/parseIconMapCSV'
-import { Icon } from './Icon'
+import { Icon } from '../Icon'
 
 function getIconType(node: TreeNode) {
   switch (node.type) {
diff --git a/src/components/FileExplorer/VirtualNode.tsx b/src/components/FileExplorer/VirtualNode.tsx
new file mode 100644
index 0000000..8b7ff50
--- /dev/null
+++ b/src/components/FileExplorer/VirtualNode.tsx
@@ -0,0 +1,30 @@
+import { Node } from 'components/FileExplorer/Node'
+import * as React from 'react'
+import { ListChildComponentProps } from 'react-window'
+import { NodeRendererContext } from '.'
+
+export const VirtualNode = React.memo(function VirtualNode({
+  index,
+  style,
+  data: { onNodeClick, renderLabelText, renderActions, visibleNodes },
+}: Override<ListChildComponentProps, { data: NodeRendererContext }>) {
+  if (!visibleNodes) return null
+
+  const { nodes, focusedNode, expandedNodes, loading, depths } = visibleNodes
+  const node = nodes[index]
+
+  return (
+    <Node
+      style={style}
+      key={node.path}
+      node={node}
+      depth={depths.get(node) || 0}
+      focused={focusedNode?.path === node.path}
+      loading={loading.has(node.path)}
+      expanded={expandedNodes.has(node.path)}
+      onClick={onNodeClick}
+      renderLabelText={renderLabelText}
+      renderActions={renderActions}
+    />
+  )
+})
diff --git a/src/components/FileExplorer/index.tsx b/src/components/FileExplorer/index.tsx
new file mode 100644
index 0000000..621ff78
--- /dev/null
+++ b/src/components/FileExplorer/index.tsx
@@ -0,0 +1,217 @@
+import { Label, Text } from '@primer/react'
+import { LoadingIndicator } from 'components/LoadingIndicator'
+import { SearchBar } from 'components/SearchBar'
+import { useConfigs } from 'containers/ConfigsContext'
+import { connect } from 'driver/connect'
+import { FileExplorerCore } from 'driver/core'
+import { ConnectorState, Props } from 'driver/core/FileExplorer'
+import * as React from 'react'
+import { Align as ReactWindowAlign } from 'react-window'
+import { cx } from 'utils/cx'
+import * as DOMHelper from 'utils/DOMHelper'
+import { run } from 'utils/general'
+import { useLoadedContext } from 'utils/hooks/useLoadedContext'
+import { useSequentialEffect } from 'utils/hooks/useSequentialEffect'
+import { useStateIO } from 'utils/hooks/useStateIO'
+import { VisibleNodes, VisibleNodesGenerator } from 'utils/VisibleNodesGenerator'
+import { SideBarStateContext } from '../../containers/SideBarState'
+import { SearchMode, searchModes } from '../searchModes'
+import { SizeObserver } from '../SizeObserver'
+import { ListView } from './ListView'
+import {
+  NodeRenderer,
+  useNodeRenderers,
+  useRenderFileCommentAmounts,
+  useRenderFileStatus,
+  useRenderFindInFolderButton,
+  useRenderGoToButton
+} from './useNodeRenderers'
+
+export type NodeRendererContext = {
+  onNodeClick: (event: React.MouseEvent<HTMLElement, MouseEvent>, node: TreeNode) => void
+  renderLabelText: NodeRenderer
+  renderActions: NodeRenderer | undefined
+  visibleNodes: VisibleNodes
+}
+
+function useSetupTree(setUpTree: ConnectorState['setUpTree'], metaData: MetaData) {
+  const stateContext = useLoadedContext(SideBarStateContext)
+  const {
+    value: { accessToken, compressSingletonFolder },
+  } = useConfigs()
+
+  useSequentialEffect(
+    checker => {
+      setUpTree(
+        {
+          metaData,
+          config: {
+            compressSingletonFolder,
+            accessToken,
+          },
+          stateContext,
+        },
+        checker,
+      )
+    },
+    [setUpTree, metaData, compressSingletonFolder, accessToken],
+  )
+}
+
+function useFocusFileExplorerOnFirstRender() {
+  React.useEffect(() => {
+    DOMHelper.focusFileExplorer()
+  }, [])
+}
+
+function useReactWindowAlignMode(searched: boolean) {
+  const scrollMode = useStateIO<ReactWindowAlign>('auto')
+  React.useEffect(() => {
+    // Use `auto` as default mode to prevent initial misalignment
+    // Switch to `smart` mode when start searching to make sure alignment is user-friendly when jump to files
+    if (scrollMode.value === 'auto' && searched) scrollMode.onChange('smart')
+  }, [searched])
+  return scrollMode
+}
+
+function useOnSearch(
+  updateSearchKey: (searchKey: string) => void,
+  visibleNodesGenerator: VisibleNodesGenerator | null,
+) {
+  const {
+    value: { restoreExpandedFolders },
+  } = useConfigs()
+  return React.useCallback(
+    (searchKey: string, searchMode: SearchMode) => {
+      updateSearchKey(searchKey)
+      if (visibleNodesGenerator) {
+        visibleNodesGenerator.search(
+          searchModes[searchMode].getSearchParams(searchKey),
+          restoreExpandedFolders,
+        )
+      }
+    },
+    [updateSearchKey, visibleNodesGenerator, restoreExpandedFolders],
+  )
+}
+
+function useRenderLabelText(searchKey: string) {
+  const {
+    value: { searchMode },
+  } = useConfigs()
+  return React.useCallback(
+    (node: TreeNode) => searchModes[searchMode].renderNodeLabelText(node, searchKey),
+    [searchKey, searchMode],
+  )
+}
+
+const RawFileExplorer: React.FC<Props & ConnectorState> = function RawFileExplorer({
+  visibleNodes,
+  visibleNodesGenerator,
+  freeze,
+  onNodeClick,
+  searchKey,
+  updateSearchKey,
+  onFocusSearchBar,
+  goTo,
+  handleKeyDown,
+  metaData,
+  expandTo,
+  setUpTree,
+  defer,
+  searched,
+}) {
+  useSetupTree(setUpTree, metaData)
+  useFocusFileExplorerOnFirstRender()
+
+  const onSearch = useOnSearch(updateSearchKey, visibleNodesGenerator)
+  const renderActions = useNodeRenderers([
+    useRenderGoToButton(searched, goTo),
+    useRenderFindInFolderButton(onSearch),
+    useRenderFileCommentAmounts(),
+    useRenderFileStatus(),
+  ])
+
+  const renderLabelText = useRenderLabelText(searchKey)
+
+  const nodeRendererContext: NodeRendererContext | null = React.useMemo(
+    () =>
+      visibleNodes && {
+        onNodeClick,
+        renderActions,
+        renderLabelText,
+        visibleNodes,
+      },
+    [onNodeClick, renderActions, renderLabelText, visibleNodes],
+  )
+
+  const alignMode = useReactWindowAlignMode(searched)
+  const state = useLoadedContext(SideBarStateContext).value
+
+  return (
+    <div className={cx(`file-explorer`, { freeze })} tabIndex={-1} onKeyDown={handleKeyDown}>
+      {run(() => {
+        switch (state) {
+          case 'tree-loading':
+            return <LoadingIndicator text={'Fetching File List...'} />
+          case 'tree-rendering':
+            return <LoadingIndicator text={'Rendering File List...'} />
+          case 'tree-rendered':
+            return (
+              visibleNodes &&
+              nodeRendererContext && (
+                <>
+                  {defer && (
+                    <div className={'status'}>
+                      <Label
+                        title="This repository is large. Gitako has switched to Lazy Mode to improve performance. Folders will be loaded when it gets expanded."
+                        className={'lazy-mode'}
+                        variant="attention"
+                      >
+                        Lazy Mode is ON
+                      </Label>
+                    </div>
+                  )}
+                  <SearchBar value={searchKey} onSearch={onSearch} onFocus={onFocusSearchBar} />
+                  {searched && visibleNodes.nodes.length === 0 && (
+                    <>
+                      <Text marginTop={6} textAlign="center" color="text.gray">
+                        No results found.
+                      </Text>
+                      {defer && (
+                        <Text textAlign="center" color="gray.4" fontSize="12px">
+                          Search results are limited to loaded folders in Lazy Mode.
+                        </Text>
+                      )}
+                    </>
+                  )}
+                  <SizeObserver className={'files'}>
+                    {({ width = 0, height = 0 }) => (
+                      <div className={'magic-size-container'}>
+                        <ListView
+                          height={height}
+                          width={width}
+                          nodeRendererContext={nodeRendererContext}
+                          expandTo={expandTo}
+                          metaData={metaData}
+                          scrollMode={alignMode.value}
+                        />
+                      </div>
+                    )}
+                  </SizeObserver>
+                </>
+              )
+            )
+        }
+      })}
+    </div>
+  )
+}
+
+RawFileExplorer.defaultProps = {
+  freeze: false,
+  searchKey: '',
+  visibleNodes: null,
+}
+
+export const FileExplorer = connect(FileExplorerCore)(RawFileExplorer)
diff --git a/src/components/FileExplorer/useNodeRenderers.tsx b/src/components/FileExplorer/useNodeRenderers.tsx
new file mode 100644
index 0000000..7a386e3
--- /dev/null
+++ b/src/components/FileExplorer/useNodeRenderers.tsx
@@ -0,0 +1,103 @@
+import { useConfigs } from 'containers/ConfigsContext'
+import * as React from 'react'
+import { isNotFalsy } from 'utils/general'
+import { Icon } from '../Icon'
+import { SearchMode } from '../searchModes'
+import { DiffStatGraph } from './DiffStatGraph'
+import { DiffStatText } from './DiffStatText'
+
+export type NodeRenderer = (node: TreeNode) => React.ReactNode
+
+export function useNodeRenderers(allRenderers: (NodeRenderer | null | undefined)[]) {
+  return React.useMemo(() => {
+    const renderers: NodeRenderer[] = allRenderers.filter(isNotFalsy)
+    return renderers.length
+      ? (node: TreeNode) =>
+          renderers.map((render, i) => <React.Fragment key={i}>{render(node)}</React.Fragment>)
+      : undefined
+  }, allRenderers)
+}
+
+export function useRenderFileStatus() {
+  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>
+      )
+    )
+  }
+  const {
+    value: { showDiffInText },
+  } = useConfigs()
+  return React.useMemo(() => renderFileStatus, [])
+}
+
+export function useRenderFileCommentAmounts() {
+  function renderFileCommentAmounts(node: TreeNode) {
+    return 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 {
+    value: { commentToggle },
+  } = useConfigs()
+  return React.useMemo(() => (commentToggle ? renderFileCommentAmounts : null), [])
+}
+
+export function useRenderFindInFolderButton(
+  onSearch: (searchKey: string, searchMode: SearchMode) => void,
+) {
+  function renderFindInFolderButton(node: TreeNode) {
+    return node.type === 'tree' ? (
+      <button
+        title={'Find in folder...'}
+        className={'find-in-folder-button'}
+        onClick={e => {
+          e.stopPropagation()
+          e.preventDefault()
+          onSearch(node.path + '/', searchMode)
+        }}
+      >
+        <Icon type="search" />
+      </button>
+    ) : null
+  }
+  const {
+    value: { searchMode },
+  } = useConfigs()
+  return React.useMemo(
+    () => (searchMode === 'fuzzy' ? renderFindInFolderButton : null),
+    [searchMode],
+  )
+}
+
+export function useRenderGoToButton(searched: boolean, goTo: (path: string[]) => void) {
+  function renderGoToButton(node: TreeNode): React.ReactNode {
+    return (
+      <button
+        title={'Reveal in file tree'}
+        className={'go-to-button'}
+        onClick={e => {
+          e.stopPropagation()
+          e.preventDefault()
+          goTo(node.path.split('/'))
+        }}
+      >
+        <Icon type="go-to" />
+      </button>
+    )
+  }
+  return React.useMemo(() => (searched ? renderGoToButton : null), [searched])
+}
diff --git a/src/utils/general.ts b/src/utils/general.ts
index 4af8aae..982ed86 100644
--- a/src/utils/general.ts
+++ b/src/utils/general.ts
@@ -224,3 +224,7 @@ export function formatHash(hash?: string) {
   if (hash) return '#' + hash
   return ''
 }
+
+export function isNotFalsy<T>(value: T | undefined | null): value is T {
+  return value !== undefined && value !== null
+}

From a093a9d86d839dcd519a6ba16ee080aa9c66960c Mon Sep 17 00:00:00 2001
From: EnixCoda <enixcoda@gmail.com>
Date: Sat, 14 May 2022 23:11:35 +0800
Subject: [PATCH 13/93] chore: useConfig().value

---
 src/components/AccessDeniedDescription.tsx       |  4 ++--
 src/components/FileExplorer/Node.tsx             |  4 +---
 src/components/FileExplorer/index.tsx            | 12 +++---------
 src/components/FileExplorer/useNodeRenderers.tsx | 12 +++---------
 4 files changed, 9 insertions(+), 23 deletions(-)

diff --git a/src/components/AccessDeniedDescription.tsx b/src/components/AccessDeniedDescription.tsx
index eb07778..5af5aab 100644
--- a/src/components/AccessDeniedDescription.tsx
+++ b/src/components/AccessDeniedDescription.tsx
@@ -5,8 +5,8 @@ import { GitHub } from 'platforms/GitHub'
 import * as React from 'react'
 
 export function AccessDeniedDescription() {
-  const configContext = useConfigs()
-  const hasToken = Boolean(configContext.value.accessToken)
+  const { accessToken } = useConfigs().value
+  const hasToken = Boolean(accessToken)
 
   return (
     <div className={'description-area'}>
diff --git a/src/components/FileExplorer/Node.tsx b/src/components/FileExplorer/Node.tsx
index 51368f3..e788791 100644
--- a/src/components/FileExplorer/Node.tsx
+++ b/src/components/FileExplorer/Node.tsx
@@ -67,9 +67,7 @@ const NodeItemIcon = React.memo(function NodeItemIcon({
   open?: boolean
   loading?: boolean
 }) {
-  const {
-    value: { icons },
-  } = useConfigs()
+  const { icons } = useConfigs().value
 
   const src = React.useMemo(
     () => (node.type === 'tree' ? getFolderIconURL(node, open) : getFileIconURL(node)),
diff --git a/src/components/FileExplorer/index.tsx b/src/components/FileExplorer/index.tsx
index 621ff78..6dbb28b 100644
--- a/src/components/FileExplorer/index.tsx
+++ b/src/components/FileExplorer/index.tsx
@@ -36,9 +36,7 @@ export type NodeRendererContext = {
 
 function useSetupTree(setUpTree: ConnectorState['setUpTree'], metaData: MetaData) {
   const stateContext = useLoadedContext(SideBarStateContext)
-  const {
-    value: { accessToken, compressSingletonFolder },
-  } = useConfigs()
+  const { accessToken, compressSingletonFolder } = useConfigs().value
 
   useSequentialEffect(
     checker => {
@@ -78,9 +76,7 @@ function useOnSearch(
   updateSearchKey: (searchKey: string) => void,
   visibleNodesGenerator: VisibleNodesGenerator | null,
 ) {
-  const {
-    value: { restoreExpandedFolders },
-  } = useConfigs()
+  const { restoreExpandedFolders } = useConfigs().value
   return React.useCallback(
     (searchKey: string, searchMode: SearchMode) => {
       updateSearchKey(searchKey)
@@ -96,9 +92,7 @@ function useOnSearch(
 }
 
 function useRenderLabelText(searchKey: string) {
-  const {
-    value: { searchMode },
-  } = useConfigs()
+  const { searchMode } = useConfigs().value
   return React.useCallback(
     (node: TreeNode) => searchModes[searchMode].renderNodeLabelText(node, searchKey),
     [searchKey, searchMode],
diff --git a/src/components/FileExplorer/useNodeRenderers.tsx b/src/components/FileExplorer/useNodeRenderers.tsx
index 7a386e3..9d7b2aa 100644
--- a/src/components/FileExplorer/useNodeRenderers.tsx
+++ b/src/components/FileExplorer/useNodeRenderers.tsx
@@ -31,9 +31,7 @@ export function useRenderFileStatus() {
       )
     )
   }
-  const {
-    value: { showDiffInText },
-  } = useConfigs()
+  const { showDiffInText } = useConfigs().value
   return React.useMemo(() => renderFileStatus, [])
 }
 
@@ -50,9 +48,7 @@ export function useRenderFileCommentAmounts() {
       </span>
     ) : null
   }
-  const {
-    value: { commentToggle },
-  } = useConfigs()
+  const { commentToggle } = useConfigs().value
   return React.useMemo(() => (commentToggle ? renderFileCommentAmounts : null), [])
 }
 
@@ -74,9 +70,7 @@ export function useRenderFindInFolderButton(
       </button>
     ) : null
   }
-  const {
-    value: { searchMode },
-  } = useConfigs()
+  const { searchMode } = useConfigs().value
   return React.useMemo(
     () => (searchMode === 'fuzzy' ? renderFindInFolderButton : null),
     [searchMode],

From c492397a349eeb623a5dc02d3d26558381a65fb5 Mon Sep 17 00:00:00 2001
From: EnixCoda <enixcoda@gmail.com>
Date: Sun, 15 May 2022 01:15:34 +0800
Subject: [PATCH 14/93] lint: add eslint

---
 package.json |  18 ++
 yarn.lock    | 688 ++++++++++++++++++++++++++++++++++++++++++++++++++-
 2 files changed, 693 insertions(+), 13 deletions(-)

diff --git a/package.json b/package.json
index fd8de77..674bcaa 100644
--- a/package.json
+++ b/package.json
@@ -58,12 +58,17 @@
     "@types/jest": "^26.0.23",
     "@types/node": "^11.10.4",
     "@types/puppeteer": "^5.4.3",
+    "@typescript-eslint/eslint-plugin": "^5.23.0",
+    "@typescript-eslint/parser": "^5.23.0",
     "babel-loader": "^8.2.5",
     "babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
     "copy-webpack-plugin": "^5.0.0",
     "css-loader": "^2.1.0",
     "dotenv": "^6.2.0",
     "dotenv-webpack": "^1.7.0",
+    "eslint": "^8.15.0",
+    "eslint-plugin-react": "^7.29.4",
+    "eslint-plugin-react-hooks": "^4.5.0",
     "file-loader": "^3.0.1",
     "fork-ts-checker-webpack-plugin": "^6.5.0",
     "jest": "^27.0.6",
@@ -89,6 +94,19 @@
     "trailingComma": "all",
     "arrowParens": "avoid"
   },
+  "eslintConfig": {
+    "root": true,
+    "parser": "@typescript-eslint/parser",
+    "plugins": [
+      "@typescript-eslint"
+    ],
+    "extends": [
+      "eslint:recommended",
+      "plugin:@typescript-eslint/recommended",
+      "plugin:react/recommended",
+      "plugin:react-hooks/recommended"
+    ]
+  },
   "resolutions": {
     "@types/react": "^18.0.9",
     "@types/react-dom": "^18.0.3"
diff --git a/yarn.lock b/yarn.lock
index 7a27237..42742cd 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1638,6 +1638,21 @@
     minimatch "^3.0.4"
     strip-json-comments "^3.1.1"
 
+"@eslint/eslintrc@^1.2.3":
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-1.2.3.tgz#fcaa2bcef39e13d6e9e7f6271f4cc7cae1174886"
+  integrity sha512-uGo44hIwoLGNyduRpjdEpovcbMdd+Nv7amtmJxnKmI8xj6yd5LncmSwDa5NgX/41lIFJtkjD6YdVfgEzPfJ5UA==
+  dependencies:
+    ajv "^6.12.4"
+    debug "^4.3.2"
+    espree "^9.3.2"
+    globals "^13.9.0"
+    ignore "^5.2.0"
+    import-fresh "^3.2.1"
+    js-yaml "^4.1.0"
+    minimatch "^3.1.2"
+    strip-json-comments "^3.1.1"
+
 "@hapi/hoek@^9.0.0":
   version "9.2.0"
   resolved "https://registry.yarnpkg.com/@hapi/hoek/-/hoek-9.2.0.tgz#f3933a44e365864f4dad5db94158106d511e8131"
@@ -1934,6 +1949,27 @@
   resolved "https://registry.yarnpkg.com/@nicolo-ribaudo/chokidar-2/-/chokidar-2-2.1.8-no-fsevents.3.tgz#323d72dd25103d0c4fbdce89dadf574a787b1f9b"
   integrity sha512-s88O1aVtXftvp5bCPB7WnmXc5IwOZZ7YPuwNPt+GtOOXpPvad1LfbmjYv+qII7zP6RU2QGnqve27dnLycEnyEQ==
 
+"@nodelib/fs.scandir@2.1.5":
+  version "2.1.5"
+  resolved "https://registry.yarnpkg.com/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz#7619c2eb21b25483f6d167548b4cfd5a7488c3d5"
+  integrity sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==
+  dependencies:
+    "@nodelib/fs.stat" "2.0.5"
+    run-parallel "^1.1.9"
+
+"@nodelib/fs.stat@2.0.5", "@nodelib/fs.stat@^2.0.2":
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz#5bd262af94e9d25bd1e71b05deed44876a222e8b"
+  integrity sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==
+
+"@nodelib/fs.walk@^1.2.3":
+  version "1.2.8"
+  resolved "https://registry.yarnpkg.com/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz#e95737e8bb6746ddedf69c556953494f196fe69a"
+  integrity sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==
+  dependencies:
+    "@nodelib/fs.scandir" "2.1.5"
+    fastq "^1.6.0"
+
 "@primer/behaviors@1.1.1":
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/@primer/behaviors/-/behaviors-1.1.1.tgz#51e2f02ebfe297c4c05f503cdc52ae8b4ce5794c"
@@ -2370,7 +2406,7 @@
   resolved "https://registry.yarnpkg.com/@types/js-cookie/-/js-cookie-2.2.7.tgz#226a9e31680835a6188e887f3988e60c04d3f6a3"
   integrity sha512-aLkWa0C0vO5b4Sr798E26QgOkss68Un0bLjs7u9qxzPT5CG+8DuNTffWES58YzJs3hrVAOs1wonycqEBqNJubA==
 
-"@types/json-schema@^7.0.4", "@types/json-schema@^7.0.5":
+"@types/json-schema@^7.0.4", "@types/json-schema@^7.0.5", "@types/json-schema@^7.0.9":
   version "7.0.11"
   resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.11.tgz#d421b6c527a3037f7c84433fd2c4229e016863d3"
   integrity sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ==
@@ -2520,6 +2556,86 @@
   dependencies:
     "@types/node" "*"
 
+"@typescript-eslint/eslint-plugin@^5.23.0":
+  version "5.23.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.23.0.tgz#bc4cbcf91fbbcc2e47e534774781b82ae25cc3d8"
+  integrity sha512-hEcSmG4XodSLiAp1uxv/OQSGsDY6QN3TcRU32gANp+19wGE1QQZLRS8/GV58VRUoXhnkuJ3ZxNQ3T6Z6zM59DA==
+  dependencies:
+    "@typescript-eslint/scope-manager" "5.23.0"
+    "@typescript-eslint/type-utils" "5.23.0"
+    "@typescript-eslint/utils" "5.23.0"
+    debug "^4.3.2"
+    functional-red-black-tree "^1.0.1"
+    ignore "^5.1.8"
+    regexpp "^3.2.0"
+    semver "^7.3.5"
+    tsutils "^3.21.0"
+
+"@typescript-eslint/parser@^5.23.0":
+  version "5.23.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-5.23.0.tgz#443778e1afc9a8ff180f91b5e260ac3bec5e2de1"
+  integrity sha512-V06cYUkqcGqpFjb8ttVgzNF53tgbB/KoQT/iB++DOIExKmzI9vBJKjZKt/6FuV9c+zrDsvJKbJ2DOCYwX91cbw==
+  dependencies:
+    "@typescript-eslint/scope-manager" "5.23.0"
+    "@typescript-eslint/types" "5.23.0"
+    "@typescript-eslint/typescript-estree" "5.23.0"
+    debug "^4.3.2"
+
+"@typescript-eslint/scope-manager@5.23.0":
+  version "5.23.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-5.23.0.tgz#4305e61c2c8e3cfa3787d30f54e79430cc17ce1b"
+  integrity sha512-EhjaFELQHCRb5wTwlGsNMvzK9b8Oco4aYNleeDlNuL6qXWDF47ch4EhVNPh8Rdhf9tmqbN4sWDk/8g+Z/J8JVw==
+  dependencies:
+    "@typescript-eslint/types" "5.23.0"
+    "@typescript-eslint/visitor-keys" "5.23.0"
+
+"@typescript-eslint/type-utils@5.23.0":
+  version "5.23.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/type-utils/-/type-utils-5.23.0.tgz#f852252f2fc27620d5bb279d8fed2a13d2e3685e"
+  integrity sha512-iuI05JsJl/SUnOTXA9f4oI+/4qS/Zcgk+s2ir+lRmXI+80D8GaGwoUqs4p+X+4AxDolPpEpVUdlEH4ADxFy4gw==
+  dependencies:
+    "@typescript-eslint/utils" "5.23.0"
+    debug "^4.3.2"
+    tsutils "^3.21.0"
+
+"@typescript-eslint/types@5.23.0":
+  version "5.23.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-5.23.0.tgz#8733de0f58ae0ed318dbdd8f09868cdbf9f9ad09"
+  integrity sha512-NfBsV/h4dir/8mJwdZz7JFibaKC3E/QdeMEDJhiAE3/eMkoniZ7MjbEMCGXw6MZnZDMN3G9S0mH/6WUIj91dmw==
+
+"@typescript-eslint/typescript-estree@5.23.0":
+  version "5.23.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-5.23.0.tgz#dca5f10a0a85226db0796e8ad86addc9aee52065"
+  integrity sha512-xE9e0lrHhI647SlGMl+m+3E3CKPF1wzvvOEWnuE3CCjjT7UiRnDGJxmAcVKJIlFgK6DY9RB98eLr1OPigPEOGg==
+  dependencies:
+    "@typescript-eslint/types" "5.23.0"
+    "@typescript-eslint/visitor-keys" "5.23.0"
+    debug "^4.3.2"
+    globby "^11.0.4"
+    is-glob "^4.0.3"
+    semver "^7.3.5"
+    tsutils "^3.21.0"
+
+"@typescript-eslint/utils@5.23.0":
+  version "5.23.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-5.23.0.tgz#4691c3d1b414da2c53d8943310df36ab1c50648a"
+  integrity sha512-dbgaKN21drqpkbbedGMNPCtRPZo1IOUr5EI9Jrrh99r5UW5Q0dz46RKXeSBoPV+56R6dFKpbrdhgUNSJsDDRZA==
+  dependencies:
+    "@types/json-schema" "^7.0.9"
+    "@typescript-eslint/scope-manager" "5.23.0"
+    "@typescript-eslint/types" "5.23.0"
+    "@typescript-eslint/typescript-estree" "5.23.0"
+    eslint-scope "^5.1.1"
+    eslint-utils "^3.0.0"
+
+"@typescript-eslint/visitor-keys@5.23.0":
+  version "5.23.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-5.23.0.tgz#057c60a7ca64667a39f991473059377a8067c87b"
+  integrity sha512-Vd4mFNchU62sJB8pX19ZSPog05B0Y0CE2UxAZPT5k4iqhRYjPnqyY3woMxCd0++t9OTqkgjST+1ydLBi7e2Fvg==
+  dependencies:
+    "@typescript-eslint/types" "5.23.0"
+    eslint-visitor-keys "^3.0.0"
+
 "@webassemblyjs/ast@1.8.5":
   version "1.8.5"
   resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.8.5.tgz#51b1c5fe6576a34953bf4b253df9f0d490d9e359"
@@ -2707,7 +2823,7 @@ acorn-globals@^6.0.0:
     acorn "^7.1.1"
     acorn-walk "^7.1.1"
 
-acorn-jsx@^5.3.1:
+acorn-jsx@^5.3.1, acorn-jsx@^5.3.2:
   version "5.3.2"
   resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-5.3.2.tgz#7ed5bb55908b3b2f1bc55c6af1653bada7f07937"
   integrity sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==
@@ -2742,6 +2858,11 @@ acorn@^8.7.0:
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.7.0.tgz#90951fde0f8f09df93549481e5fc141445b791cf"
   integrity sha512-V/LGr1APy+PXIwKebEWrkZPwoeoF+w1jiOBUmuxuiUIaOHtob8Qc9BTrYo7VuI5fR8tqsy+buA2WFooR5olqvQ==
 
+acorn@^8.7.1:
+  version "8.7.1"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.7.1.tgz#0197122c843d1bf6d0a5e83220a788f278f63c30"
+  integrity sha512-Xx54uLJQZ19lKygFXOWsscKUbsBZW0CPykPhVQdhIeIwrbPmJzqeASDInc8nKBnp/JT6igTs82qPXz069H8I/A==
+
 addons-linter@4.14.0:
   version "4.14.0"
   resolved "https://registry.yarnpkg.com/addons-linter/-/addons-linter-4.14.0.tgz#e8a5b99665a7e7df3fda2da42d73593fea8db3f9"
@@ -2999,6 +3120,17 @@ array-flatten@1.1.1:
   resolved "https://registry.yarnpkg.com/array-flatten/-/array-flatten-1.1.1.tgz#9a5f699051b1e7073328f2a008968b64ea2955d2"
   integrity sha1-ml9pkFGx5wczKPKgCJaLZOopVdI=
 
+array-includes@^3.1.4:
+  version "3.1.5"
+  resolved "https://registry.yarnpkg.com/array-includes/-/array-includes-3.1.5.tgz#2c320010db8d31031fd2a5f6b3bbd4b1aad31bdb"
+  integrity sha512-iSDYZMMyTPkiFasVqfuAQnWAYcvO/SeBSCGKePoEthjp4LEMTe4uLc7b025o4jAZpHhihh8xPo99TNWUWWkGDQ==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.1.4"
+    es-abstract "^1.19.5"
+    get-intrinsic "^1.1.1"
+    is-string "^1.0.7"
+
 array-union@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/array-union/-/array-union-1.0.2.tgz#9a34410e4f4e3da23dea375be5be70f24778ec39"
@@ -3021,6 +3153,16 @@ array-unique@^0.3.2:
   resolved "https://registry.yarnpkg.com/array-unique/-/array-unique-0.3.2.tgz#a894b75d4bc4f6cd679ef3244a9fd8f46ae2d428"
   integrity sha1-qJS3XUvE9s1nnvMkSp/Y9Gri1Cg=
 
+array.prototype.flatmap@^1.2.5:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/array.prototype.flatmap/-/array.prototype.flatmap-1.3.0.tgz#a7e8ed4225f4788a70cd910abcf0791e76a5534f"
+  integrity sha512-PZC9/8TKAIxcWKdyeb77EzULHPrIX/tIZebLJUQOMR1OwYosT8yggdfWScfTBCDj5utONvOuPQQumYsU2ULbkg==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.1.3"
+    es-abstract "^1.19.2"
+    es-shim-unscopables "^1.0.0"
+
 arrify@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/arrify/-/arrify-2.0.1.tgz#c9655e9331e0abcd588d2a7cad7e9956f66701fa"
@@ -3676,6 +3818,14 @@ cacheable-request@^6.0.0:
     normalize-url "^4.1.0"
     responselike "^1.0.2"
 
+call-bind@^1.0.0, call-bind@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/call-bind/-/call-bind-1.0.2.tgz#b1d4e89e688119c3c9a903ad30abb2f6a919be3c"
+  integrity sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==
+  dependencies:
+    function-bind "^1.1.1"
+    get-intrinsic "^1.0.2"
+
 callsites@^3.0.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/callsites/-/callsites-3.1.0.tgz#b3630abd8943432f54b3f0519238e33cd7df2f73"
@@ -4548,6 +4698,14 @@ define-properties@^1.1.2:
   dependencies:
     object-keys "^1.0.12"
 
+define-properties@^1.1.3, define-properties@^1.1.4:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/define-properties/-/define-properties-1.1.4.tgz#0b14d7bd7fbeb2f3572c3a7eda80ea5d57fb05b1"
+  integrity sha512-uckOqKcfaVvtBdsVkdPv3XjveQJsNQqmhXgRi8uhvWWuPYZCNlzT8qAyblUgNoXdHdjMTzAqeGjAoli8f+bzPA==
+  dependencies:
+    has-property-descriptors "^1.0.0"
+    object-keys "^1.1.1"
+
 define-property@^0.2.5:
   version "0.2.5"
   resolved "https://registry.yarnpkg.com/define-property/-/define-property-0.2.5.tgz#c35b1ef918ec3c990f9a5bc57be04aacec5c8116"
@@ -4644,6 +4802,20 @@ dir-glob@^2.0.0:
   dependencies:
     path-type "^3.0.0"
 
+dir-glob@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/dir-glob/-/dir-glob-3.0.1.tgz#56dbf73d992a4a93ba1584f4534063fd2e41717f"
+  integrity sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==
+  dependencies:
+    path-type "^4.0.0"
+
+doctrine@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/doctrine/-/doctrine-2.1.0.tgz#5cd01fc101621b42c4cd7f5d1a66243716d3f39d"
+  integrity sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==
+  dependencies:
+    esutils "^2.0.2"
+
 doctrine@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/doctrine/-/doctrine-3.0.0.tgz#addebead72a6574db783639dc87a121773973961"
@@ -4883,6 +5055,51 @@ error-stack-parser@^2.0.6:
   dependencies:
     stackframe "^1.1.1"
 
+es-abstract@^1.19.0, es-abstract@^1.19.1, es-abstract@^1.19.2, es-abstract@^1.19.5:
+  version "1.20.0"
+  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.20.0.tgz#b2d526489cceca004588296334726329e0a6bfb6"
+  integrity sha512-URbD8tgRthKD3YcC39vbvSDrX23upXnPcnGAjQfgxXF5ID75YcENawc9ZX/9iTP9ptUyfCLIxTTuMYoRfiOVKA==
+  dependencies:
+    call-bind "^1.0.2"
+    es-to-primitive "^1.2.1"
+    function-bind "^1.1.1"
+    function.prototype.name "^1.1.5"
+    get-intrinsic "^1.1.1"
+    get-symbol-description "^1.0.0"
+    has "^1.0.3"
+    has-property-descriptors "^1.0.0"
+    has-symbols "^1.0.3"
+    internal-slot "^1.0.3"
+    is-callable "^1.2.4"
+    is-negative-zero "^2.0.2"
+    is-regex "^1.1.4"
+    is-shared-array-buffer "^1.0.2"
+    is-string "^1.0.7"
+    is-weakref "^1.0.2"
+    object-inspect "^1.12.0"
+    object-keys "^1.1.1"
+    object.assign "^4.1.2"
+    regexp.prototype.flags "^1.4.1"
+    string.prototype.trimend "^1.0.5"
+    string.prototype.trimstart "^1.0.5"
+    unbox-primitive "^1.0.2"
+
+es-shim-unscopables@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/es-shim-unscopables/-/es-shim-unscopables-1.0.0.tgz#702e632193201e3edf8713635d083d378e510241"
+  integrity sha512-Jm6GPcCdC30eMLbZ2x8z2WuRwAws3zTBBKuusffYVUrNj/GVSUAZ+xKMaUpfNDR5IbyNA5LJbaecoUVbmUcB1w==
+  dependencies:
+    has "^1.0.3"
+
+es-to-primitive@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/es-to-primitive/-/es-to-primitive-1.2.1.tgz#e55cd4c9cdc188bcefb03b366c736323fc5c898a"
+  integrity sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==
+  dependencies:
+    is-callable "^1.1.4"
+    is-date-object "^1.0.1"
+    is-symbol "^1.0.2"
+
 es6-error@4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/es6-error/-/es6-error-4.1.1.tgz#9e3af407459deed47e9a91f9b885a84eb05c561d"
@@ -4940,6 +5157,31 @@ eslint-plugin-no-unsanitized@4.0.1:
   resolved "https://registry.yarnpkg.com/eslint-plugin-no-unsanitized/-/eslint-plugin-no-unsanitized-4.0.1.tgz#e2343265467ba2270ade478cbe07bbafeaea412d"
   integrity sha512-y/lAMWnPPC7RYuUdxlEL/XiCL8FehN9h9s3Kjqbp/Kv0i9NZs+IXSC2kS546Fa4Bumwy31HlVS/OdWX0Kxb5Xg==
 
+eslint-plugin-react-hooks@^4.5.0:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.5.0.tgz#5f762dfedf8b2cf431c689f533c9d3fa5dcf25ad"
+  integrity sha512-8k1gRt7D7h03kd+SAAlzXkQwWK22BnK6GKZG+FJA6BAGy22CFvl8kCIXKpVux0cCxMWDQUPqSok0LKaZ0aOcCw==
+
+eslint-plugin-react@^7.29.4:
+  version "7.29.4"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.29.4.tgz#4717de5227f55f3801a5fd51a16a4fa22b5914d2"
+  integrity sha512-CVCXajliVh509PcZYRFyu/BoUEz452+jtQJq2b3Bae4v3xBUWPLCmtmBM+ZinG4MzwmxJgJ2M5rMqhqLVn7MtQ==
+  dependencies:
+    array-includes "^3.1.4"
+    array.prototype.flatmap "^1.2.5"
+    doctrine "^2.1.0"
+    estraverse "^5.3.0"
+    jsx-ast-utils "^2.4.1 || ^3.0.0"
+    minimatch "^3.1.2"
+    object.entries "^1.1.5"
+    object.fromentries "^2.0.5"
+    object.hasown "^1.1.0"
+    object.values "^1.1.5"
+    prop-types "^15.8.1"
+    resolve "^2.0.0-next.3"
+    semver "^6.3.0"
+    string.prototype.matchall "^4.0.6"
+
 eslint-scope@^4.0.3:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-4.0.3.tgz#ca03833310f6889a3264781aa82e63eb9cfe7848"
@@ -4948,6 +5190,14 @@ eslint-scope@^4.0.3:
     esrecurse "^4.1.0"
     estraverse "^4.1.1"
 
+eslint-scope@^5.1.1:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-5.1.1.tgz#e786e59a66cb92b3f6c1fb0d508aab174848f48c"
+  integrity sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==
+  dependencies:
+    esrecurse "^4.3.0"
+    estraverse "^4.1.1"
+
 eslint-scope@^7.1.1:
   version "7.1.1"
   resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-7.1.1.tgz#fff34894c2f65e5226d3041ac480b4513a163642"
@@ -4963,7 +5213,7 @@ eslint-utils@^3.0.0:
   dependencies:
     eslint-visitor-keys "^2.0.0"
 
-eslint-visitor-keys@3.3.0, eslint-visitor-keys@^3.3.0:
+eslint-visitor-keys@3.3.0, eslint-visitor-keys@^3.0.0, eslint-visitor-keys@^3.3.0:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-3.3.0.tgz#f6480fa6b1f30efe2d1968aa8ac745b862469826"
   integrity sha512-mQ+suqKJVyeuwGYHAdjMFqjCyfl8+Ldnxuyp3ldiMBFKkvytrXUZWaiPCEav8qDHKty44bD+qV1IP4T+w+xXRA==
@@ -5014,6 +5264,47 @@ eslint@8.11.0:
     text-table "^0.2.0"
     v8-compile-cache "^2.0.3"
 
+eslint@^8.15.0:
+  version "8.15.0"
+  resolved "https://registry.yarnpkg.com/eslint/-/eslint-8.15.0.tgz#fea1d55a7062da48d82600d2e0974c55612a11e9"
+  integrity sha512-GG5USZ1jhCu8HJkzGgeK8/+RGnHaNYZGrGDzUtigK3BsGESW/rs2az23XqE0WVwDxy1VRvvjSSGu5nB0Bu+6SA==
+  dependencies:
+    "@eslint/eslintrc" "^1.2.3"
+    "@humanwhocodes/config-array" "^0.9.2"
+    ajv "^6.10.0"
+    chalk "^4.0.0"
+    cross-spawn "^7.0.2"
+    debug "^4.3.2"
+    doctrine "^3.0.0"
+    escape-string-regexp "^4.0.0"
+    eslint-scope "^7.1.1"
+    eslint-utils "^3.0.0"
+    eslint-visitor-keys "^3.3.0"
+    espree "^9.3.2"
+    esquery "^1.4.0"
+    esutils "^2.0.2"
+    fast-deep-equal "^3.1.3"
+    file-entry-cache "^6.0.1"
+    functional-red-black-tree "^1.0.1"
+    glob-parent "^6.0.1"
+    globals "^13.6.0"
+    ignore "^5.2.0"
+    import-fresh "^3.0.0"
+    imurmurhash "^0.1.4"
+    is-glob "^4.0.0"
+    js-yaml "^4.1.0"
+    json-stable-stringify-without-jsonify "^1.0.1"
+    levn "^0.4.1"
+    lodash.merge "^4.6.2"
+    minimatch "^3.1.2"
+    natural-compare "^1.4.0"
+    optionator "^0.9.1"
+    regexpp "^3.2.0"
+    strip-ansi "^6.0.1"
+    strip-json-comments "^3.1.0"
+    text-table "^0.2.0"
+    v8-compile-cache "^2.0.3"
+
 espree@9.3.1, espree@^9.3.1:
   version "9.3.1"
   resolved "https://registry.yarnpkg.com/espree/-/espree-9.3.1.tgz#8793b4bc27ea4c778c19908e0719e7b8f4115bcd"
@@ -5023,6 +5314,15 @@ espree@9.3.1, espree@^9.3.1:
     acorn-jsx "^5.3.1"
     eslint-visitor-keys "^3.3.0"
 
+espree@^9.3.2:
+  version "9.3.2"
+  resolved "https://registry.yarnpkg.com/espree/-/espree-9.3.2.tgz#f58f77bd334731182801ced3380a8cc859091596"
+  integrity sha512-D211tC7ZwouTIuY5x9XnS0E9sWNChB7IYKX/Xp5eQj3nFXhqmiUDB9q27y76oFl8jTg3pXcQx/bpxMfs3CIZbA==
+  dependencies:
+    acorn "^8.7.1"
+    acorn-jsx "^5.3.2"
+    eslint-visitor-keys "^3.3.0"
+
 esprima@4.0.1, esprima@^4.0.0, esprima@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/esprima/-/esprima-4.0.1.tgz#13b04cdb3e6c5d19df91ab6987a8695619b0aa71"
@@ -5054,7 +5354,7 @@ estraverse@^4.1.0, estraverse@^4.1.1:
   resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-4.3.0.tgz#398ad3f3c5a24948be7725e83d11a7de28cdbd1d"
   integrity sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==
 
-estraverse@^5.1.0:
+estraverse@^5.1.0, estraverse@^5.3.0:
   version "5.3.0"
   resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-5.3.0.tgz#2eea5290702f26ab8fe5370370ff86c965d21123"
   integrity sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==
@@ -5285,6 +5585,17 @@ fast-deep-equal@^3.1.3:
   resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
   integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
 
+fast-glob@^3.2.9:
+  version "3.2.11"
+  resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.2.11.tgz#a1172ad95ceb8a16e20caa5c5e56480e5129c1d9"
+  integrity sha512-xrO3+1bxSo3ZVHAnqzyuewYT6aMFHRAd4Kcs92MAonjwQZLsK9d0SF1IyQ3k5PoirxTW0Oe/RqFgMQ6TcNE5Ew==
+  dependencies:
+    "@nodelib/fs.stat" "^2.0.2"
+    "@nodelib/fs.walk" "^1.2.3"
+    glob-parent "^5.1.2"
+    merge2 "^1.3.0"
+    micromatch "^4.0.4"
+
 fast-json-patch@^2.0.6:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/fast-json-patch/-/fast-json-patch-2.2.1.tgz#18150d36c9ab65c7209e7d4eb113f4f8eaabe6d9"
@@ -5317,6 +5628,13 @@ fastest-stable-stringify@^2.0.2:
   resolved "https://registry.yarnpkg.com/fastest-stable-stringify/-/fastest-stable-stringify-2.0.2.tgz#3757a6774f6ec8de40c4e86ec28ea02417214c76"
   integrity sha512-bijHueCGd0LqqNK9b5oCMHc0MluJAx0cwqASgbWMvkO01lCYgIhacVRLcaDz3QnyYIRNJRDwMb41VuT6pHJ91Q==
 
+fastq@^1.6.0:
+  version "1.13.0"
+  resolved "https://registry.yarnpkg.com/fastq/-/fastq-1.13.0.tgz#616760f88a7526bdfc596b7cab8c18938c36b98c"
+  integrity sha512-YpkpUnK8od0o1hmeSc7UUs/eB/vIPWJYjKck2QKIzAf71Vm1AAQ3EbuZB3g2JIy+pg+ERD0vqI79KyZiB2e2Nw==
+  dependencies:
+    reusify "^1.0.4"
+
 fb-watchman@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/fb-watchman/-/fb-watchman-2.0.1.tgz#fc84fb39d2709cf3ff6d743706157bb5708a8a85"
@@ -5674,11 +5992,26 @@ function-bind@^1.1.1:
   resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d"
   integrity sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==
 
+function.prototype.name@^1.1.5:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/function.prototype.name/-/function.prototype.name-1.1.5.tgz#cce0505fe1ffb80503e6f9e46cc64e46a12a9621"
+  integrity sha512-uN7m/BzVKQnCUF/iW8jYea67v++2u7m5UgENbHRtdDVclOUP+FMPlCNdmk0h/ysGyo2tavMJEDqJAkJdRa1vMA==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.1.3"
+    es-abstract "^1.19.0"
+    functions-have-names "^1.2.2"
+
 functional-red-black-tree@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz#1b0ab3bd553b2a0d6399d29c0e3ea0b252078327"
   integrity sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc=
 
+functions-have-names@^1.2.2:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/functions-have-names/-/functions-have-names-1.2.3.tgz#0404fe4ee2ba2f607f0e0ec3c80bae994133b834"
+  integrity sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==
+
 fx-runner@1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/fx-runner/-/fx-runner-1.2.0.tgz#6fd6d0fc47b5c32c176aa22af2182227664a03fe"
@@ -5720,6 +6053,15 @@ get-caller-file@^2.0.1, get-caller-file@^2.0.5:
   resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-2.0.5.tgz#4f94412a82db32f36e3b0b9741f8a97feb031f7e"
   integrity sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==
 
+get-intrinsic@^1.0.2, get-intrinsic@^1.1.0, get-intrinsic@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/get-intrinsic/-/get-intrinsic-1.1.1.tgz#15f59f376f855c446963948f0d24cd3637b4abc6"
+  integrity sha512-kWZrnVM42QCiEA2Ig1bG8zjoIMOgxWwYCEeNdwY6Tv/cOSeGpcoX4pXHfKUxNKVoArnrEr2e9srnAxxGIraS9Q==
+  dependencies:
+    function-bind "^1.1.1"
+    has "^1.0.3"
+    has-symbols "^1.0.1"
+
 get-package-type@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/get-package-type/-/get-package-type-0.1.0.tgz#8de2d803cff44df3bc6c456e6668b36c3926e11a"
@@ -5744,6 +6086,14 @@ get-stream@^6.0.0:
   resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-6.0.1.tgz#a262d8eef67aced57c2852ad6167526a43cbf7b7"
   integrity sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==
 
+get-symbol-description@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/get-symbol-description/-/get-symbol-description-1.0.0.tgz#7fdb81c900101fbd564dd5f1a30af5aadc1e58d6"
+  integrity sha512-2EmdH1YvIQiZpltCNgkuiUnyukzxM/R6NDJX31Ke3BG1Nq5b0S2PhX59UKi9vZpPDQVdqn+1IcaAwnzTT5vCjw==
+  dependencies:
+    call-bind "^1.0.2"
+    get-intrinsic "^1.1.1"
+
 get-value@^2.0.3, get-value@^2.0.6:
   version "2.0.6"
   resolved "https://registry.yarnpkg.com/get-value/-/get-value-2.0.6.tgz#dc15ca1c672387ca76bd37ac0a395ba2042a2c28"
@@ -5764,6 +6114,13 @@ glob-parent@^3.1.0:
     is-glob "^3.1.0"
     path-dirname "^1.0.0"
 
+glob-parent@^5.1.2, glob-parent@~5.1.2:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-5.1.2.tgz#869832c58034fe68a4093c17dc15e8340d8401c4"
+  integrity sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==
+  dependencies:
+    is-glob "^4.0.1"
+
 glob-parent@^6.0.1:
   version "6.0.2"
   resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-6.0.2.tgz#6d237d99083950c79290f24c7642a3de9a28f9e3"
@@ -5778,13 +6135,6 @@ glob-parent@~5.1.0:
   dependencies:
     is-glob "^4.0.1"
 
-glob-parent@~5.1.2:
-  version "5.1.2"
-  resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-5.1.2.tgz#869832c58034fe68a4093c17dc15e8340d8401c4"
-  integrity sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==
-  dependencies:
-    is-glob "^4.0.1"
-
 glob-to-regexp@^0.4.1:
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz#c75297087c851b9a578bd217dd59a92f59fe546e"
@@ -5915,6 +6265,18 @@ globals@^9.18.0:
   resolved "https://registry.yarnpkg.com/globals/-/globals-9.18.0.tgz#aa3896b3e69b487f17e31ed2143d69a8e30c2d8a"
   integrity sha512-S0nG3CLEQiY/ILxqtztTWH/3iRRdyBLw6KMDxnKMchrtbj2OFmehVh0WUCfW3DUrIgx/qFrJPICrq4Z4sTR9UQ==
 
+globby@^11.0.4:
+  version "11.1.0"
+  resolved "https://registry.yarnpkg.com/globby/-/globby-11.1.0.tgz#bd4be98bb042f83d796f7e3811991fbe82a0d34b"
+  integrity sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==
+  dependencies:
+    array-union "^2.1.0"
+    dir-glob "^3.0.1"
+    fast-glob "^3.2.9"
+    ignore "^5.2.0"
+    merge2 "^1.4.1"
+    slash "^3.0.0"
+
 globby@^7.1.1:
   version "7.1.1"
   resolved "https://registry.yarnpkg.com/globby/-/globby-7.1.1.tgz#fb2ccff9401f8600945dfada97440cca972b8680"
@@ -6007,6 +6369,11 @@ has-ansi@^2.0.0:
   dependencies:
     ansi-regex "^2.0.0"
 
+has-bigints@^1.0.1, has-bigints@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/has-bigints/-/has-bigints-1.0.2.tgz#0871bd3e3d51626f6ca0966668ba35d5602d6eaa"
+  integrity sha512-tSvCKtBr9lkF0Ex0aQiP9N+OpV4zi2r/Nee5VkRDbaqv35RLYMzbwQfFSZZH0kR+Rd6302UJZ2p/bJCEoR3VoQ==
+
 has-flag@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-3.0.0.tgz#b5d454dc2199ae225699f3467e5a07f3b955bafd"
@@ -6017,11 +6384,30 @@ has-flag@^4.0.0:
   resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-4.0.0.tgz#944771fd9c81c81265c4d6941860da06bb59479b"
   integrity sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==
 
+has-property-descriptors@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/has-property-descriptors/-/has-property-descriptors-1.0.0.tgz#610708600606d36961ed04c196193b6a607fa861"
+  integrity sha512-62DVLZGoiEBDHQyqG4w9xCuZ7eJEwNmJRWw2VY84Oedb7WFcA27fiEVe8oUQx9hAUJ4ekurquucTGwsyO1XGdQ==
+  dependencies:
+    get-intrinsic "^1.1.1"
+
 has-symbols@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/has-symbols/-/has-symbols-1.0.0.tgz#ba1a8f1af2a0fc39650f5c850367704122063b44"
   integrity sha1-uhqPGvKg/DllD1yFA2dwQSIGO0Q=
 
+has-symbols@^1.0.1, has-symbols@^1.0.2, has-symbols@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/has-symbols/-/has-symbols-1.0.3.tgz#bb7b2c4349251dce87b125f7bdf874aa7c8b39f8"
+  integrity sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==
+
+has-tostringtag@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/has-tostringtag/-/has-tostringtag-1.0.0.tgz#7e133818a7d394734f941e73c3d3f9291e658b25"
+  integrity sha512-kFjcSNhnlGV1kyoGk7OXKSawH5JOb/LzUc5w9B02hOTO0dfFRjbHQKvg1d6cf3HbeUmtU9VbbV3qzZ2Teh97WQ==
+  dependencies:
+    has-symbols "^1.0.2"
+
 has-unicode@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/has-unicode/-/has-unicode-2.0.1.tgz#e0e6fe6a28cf51138855e086d1691e771de2a8b9"
@@ -6269,7 +6655,7 @@ ignore@^3.3.5:
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-3.3.10.tgz#0a97fb876986e8081c631160f8f9f389157f0043"
   integrity sha512-Pgs951kaMm5GXP7MOvxERINe3gsaVjUWFm+UZPSq9xYriQAksyhg0csnS0KXSNRD5NmNdapXEpjxG49+AKh/ug==
 
-ignore@^5.2.0:
+ignore@^5.1.8, ignore@^5.2.0:
   version "5.2.0"
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.2.0.tgz#6d3bac8fa7fe0d45d9f9be7bac2fc279577e345a"
   integrity sha512-CmxgYGiEPCLhfLnpPp1MoRmifwEIOgjcHXxOBjv7mY96c+eWScsOP9c112ZyLdWHi0FxHjI+4uVhKYp/gcdRmQ==
@@ -6383,6 +6769,15 @@ inline-style-prefixer@^6.0.0:
   dependencies:
     css-in-js-utils "^2.0.0"
 
+internal-slot@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/internal-slot/-/internal-slot-1.0.3.tgz#7347e307deeea2faac2ac6205d4bc7d34967f59c"
+  integrity sha512-O0DB1JC/sPyZl7cIo78n5dR7eUSwwpYPiXRhTzNxZVAMUuB8vlnRFyLxdrVToks6XPLVnFfbzaVd5WLjhgg+vA==
+  dependencies:
+    get-intrinsic "^1.1.0"
+    has "^1.0.3"
+    side-channel "^1.0.4"
+
 interpret@1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/interpret/-/interpret-1.2.0.tgz#d5061a6224be58e8083985f5014d844359576296"
@@ -6441,6 +6836,13 @@ is-arrayish@^0.2.1:
   resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d"
   integrity sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0=
 
+is-bigint@^1.0.1:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/is-bigint/-/is-bigint-1.0.4.tgz#08147a1875bc2b32005d41ccd8291dffc6691df3"
+  integrity sha512-zB9CruMamjym81i2JZ3UMn54PKGsQzsJeo6xvN3HJJ4CAsQNB6iRutp2To77OfCNuoxspsIhzaPoO1zyCEhFOg==
+  dependencies:
+    has-bigints "^1.0.1"
+
 is-binary-path@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/is-binary-path/-/is-binary-path-1.0.1.tgz#75f16642b480f187a711c814161fd3a4a7655898"
@@ -6455,11 +6857,24 @@ is-binary-path@~2.1.0:
   dependencies:
     binary-extensions "^2.0.0"
 
+is-boolean-object@^1.1.0:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/is-boolean-object/-/is-boolean-object-1.1.2.tgz#5c6dc200246dd9321ae4b885a114bb1f75f63719"
+  integrity sha512-gDYaKHJmnj4aWxyj6YHyXVpdQawtVLHU5cb+eztPGczf6cjuTdwve5ZIEfgXqH4e57An1D1AKf8CZ3kYrQRqYA==
+  dependencies:
+    call-bind "^1.0.2"
+    has-tostringtag "^1.0.0"
+
 is-buffer@^1.0.2, is-buffer@^1.1.5:
   version "1.1.6"
   resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.6.tgz#efaa2ea9daa0d7ab2ea13a97b2b8ad51fefbe8be"
   integrity sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==
 
+is-callable@^1.1.4, is-callable@^1.2.4:
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.2.4.tgz#47301d58dd0259407865547853df6d61fe471945"
+  integrity sha512-nsuwtxZfMX67Oryl9LCQ+upnC0Z0BgpwntpS89m1H/TLF0zNfzfLMV/9Wa/6MZsj0acpEjAO0KF1xT6ZdLl95w==
+
 is-ci@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/is-ci/-/is-ci-2.0.0.tgz#6bc6334181810e04b5c22b3d589fdca55026404c"
@@ -6603,11 +7018,23 @@ is-mergeable-object@1.1.1:
   resolved "https://registry.yarnpkg.com/is-mergeable-object/-/is-mergeable-object-1.1.1.tgz#faaa3ed1cfce87d6f7d2f5885e92cc30af3e2ebf"
   integrity sha512-CPduJfuGg8h8vW74WOxHtHmtQutyQBzR+3MjQ6iDHIYdbOnm1YC7jv43SqCoU8OPGTJD4nibmiryA4kmogbGrA==
 
+is-negative-zero@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/is-negative-zero/-/is-negative-zero-2.0.2.tgz#7bf6f03a28003b8b3965de3ac26f664d765f3150"
+  integrity sha512-dqJvarLawXsFbNDeJW7zAz8ItJ9cd28YufuuFzh0G8pNHjJMnY08Dv7sYX2uF5UpQOwieAeOExEYAWWfu7ZZUA==
+
 is-npm@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/is-npm/-/is-npm-5.0.0.tgz#43e8d65cc56e1b67f8d47262cf667099193f45a8"
   integrity sha512-WW/rQLOazUq+ST/bCAVBp/2oMERWLsR7OrKyt052dNDk4DHcDE0/7QSXITlmi+VBcV13DfIbysG3tZJm5RfdBA==
 
+is-number-object@^1.0.4:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/is-number-object/-/is-number-object-1.0.7.tgz#59d50ada4c45251784e9904f5246c742f07a42fc"
+  integrity sha512-k1U0IRzLMo7ZlYIfzRu23Oh6MiIFasgpb9X76eqfFZAqwH44UI4KTBvBYIZ1dSL9ZzChTB9ShHfLkR4pdW5krQ==
+  dependencies:
+    has-tostringtag "^1.0.0"
+
 is-number@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/is-number/-/is-number-3.0.0.tgz#24fd6201a4782cf50561c810276afc7d12d71195"
@@ -6654,11 +7081,26 @@ is-regex@^1.0.4:
   dependencies:
     has "^1.0.1"
 
+is-regex@^1.1.4:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/is-regex/-/is-regex-1.1.4.tgz#eef5663cd59fa4c0ae339505323df6854bb15958"
+  integrity sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==
+  dependencies:
+    call-bind "^1.0.2"
+    has-tostringtag "^1.0.0"
+
 is-relative@^0.1.0:
   version "0.1.3"
   resolved "https://registry.yarnpkg.com/is-relative/-/is-relative-0.1.3.tgz#905fee8ae86f45b3ec614bc3c15c869df0876e82"
   integrity sha1-kF/uiuhvRbPsYUvDwVyGnfCHboI=
 
+is-shared-array-buffer@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/is-shared-array-buffer/-/is-shared-array-buffer-1.0.2.tgz#8f259c573b60b6a32d4058a1a07430c0a7344c79"
+  integrity sha512-sqN2UDu1/0y6uvXyStCOzyhAjCSlHceFoMKJW8W9EU9cvic/QdsZ0kEU93HEy3IUEFZIiH/3w+AH/UQbPHNdhA==
+  dependencies:
+    call-bind "^1.0.2"
+
 is-stream@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-1.1.0.tgz#12d4a3dd4e68e0b79ceb8dbc84173ae80d91ca44"
@@ -6669,6 +7111,20 @@ is-stream@^2.0.0:
   resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-2.0.0.tgz#bde9c32680d6fae04129d6ac9d921ce7815f78e3"
   integrity sha512-XCoy+WlUr7d1+Z8GgSuXmpuUFC9fOhRXglJMx+dwLKTkL44Cjd4W1Z5P+BQZpr+cR93aGP4S/s7Ftw6Nd/kiEw==
 
+is-string@^1.0.5, is-string@^1.0.7:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/is-string/-/is-string-1.0.7.tgz#0dd12bf2006f255bb58f695110eff7491eebc0fd"
+  integrity sha512-tE2UXzivje6ofPW7l23cjDOMa09gb7xlAqG6jG5ej6uPV32TlWP3NKPigtaGeHNu9fohccRYvIiZMfOOnOYUtg==
+  dependencies:
+    has-tostringtag "^1.0.0"
+
+is-symbol@^1.0.2, is-symbol@^1.0.3:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/is-symbol/-/is-symbol-1.0.4.tgz#a6dac93b635b063ca6872236de88910a57af139c"
+  integrity sha512-C/CPBqKWnvdcxqIARxyOh4v1UUEOCHpgDa0WYgpKDFMszcrPcffg5uhwSgPCLD2WWxmq6isisz87tzT01tuGhg==
+  dependencies:
+    has-symbols "^1.0.2"
+
 is-typedarray@^1.0.0, is-typedarray@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/is-typedarray/-/is-typedarray-1.0.0.tgz#e479c80858df0c1b11ddda6940f96011fcda4a9a"
@@ -6679,6 +7135,13 @@ is-utf8@^0.2.1:
   resolved "https://registry.yarnpkg.com/is-utf8/-/is-utf8-0.2.1.tgz#4b0da1442104d1b336340e80797e865cf39f7d72"
   integrity sha1-Sw2hRCEE0bM2NA6AeX6GXPOffXI=
 
+is-weakref@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/is-weakref/-/is-weakref-1.0.2.tgz#9529f383a9338205e89765e0392efc2f100f06f2"
+  integrity sha512-qctsuLZmIQ0+vSSMfoVvyFe2+GSEvnmZ2ezTup1SBse9+twCCeial6EEi3Nc2KFcf6+qz2FBPnjXsk8xhKSaPQ==
+  dependencies:
+    call-bind "^1.0.2"
+
 is-windows@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/is-windows/-/is-windows-0.2.0.tgz#de1aa6d63ea29dd248737b69f1ff8b8002d2108c"
@@ -7487,6 +7950,14 @@ jsprim@^1.2.2:
     json-schema "0.2.3"
     verror "1.10.0"
 
+"jsx-ast-utils@^2.4.1 || ^3.0.0":
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/jsx-ast-utils/-/jsx-ast-utils-3.3.0.tgz#e624f259143b9062c92b6413ff92a164c80d3ccb"
+  integrity sha512-XzO9luP6L0xkxwhIJMTJQpZo/eeN60K08jHdexfD569AGxeNug6UketeHXEhROoM8aR7EcUoOQmIhcJQjcuq8Q==
+  dependencies:
+    array-includes "^3.1.4"
+    object.assign "^4.1.2"
+
 jszip@^3.2.2:
   version "3.7.1"
   resolved "https://registry.yarnpkg.com/jszip/-/jszip-3.7.1.tgz#bd63401221c15625a1228c556ca8a68da6fda3d9"
@@ -7717,7 +8188,7 @@ lodash@^4.17.11, lodash@^4.17.13, lodash@^4.17.15, lodash@^4.17.21, lodash@^4.17
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
 
-loose-envify@^1.0.0, loose-envify@^1.1.0:
+loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
   integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
@@ -7880,6 +8351,11 @@ merge-stream@^2.0.0:
   resolved "https://registry.yarnpkg.com/merge-stream/-/merge-stream-2.0.0.tgz#52823629a14dd00c9770fb6ad47dc6310f2c1f60"
   integrity sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==
 
+merge2@^1.3.0, merge2@^1.4.1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/merge2/-/merge2-1.4.1.tgz#4368892f885e907455a6fd7dc55c0c9d404990ae"
+  integrity sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==
+
 methods@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/methods/-/methods-1.1.2.tgz#5529a4d67654134edcc5266656835b0f851afcee"
@@ -7979,6 +8455,13 @@ minimalistic-crypto-utils@^1.0.1:
   dependencies:
     brace-expansion "^1.1.7"
 
+minimatch@^3.1.2:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.1.2.tgz#19cd194bfd3e428f049a70817c038d89ab4be35b"
+  integrity sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==
+  dependencies:
+    brace-expansion "^1.1.7"
+
 minimist@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.0.tgz#a35008b20f41383eec1fb914f4cd5df79a264284"
@@ -8384,6 +8867,11 @@ object-copy@^0.1.0:
     define-property "^0.2.5"
     kind-of "^3.0.3"
 
+object-inspect@^1.12.0, object-inspect@^1.9.0:
+  version "1.12.0"
+  resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.12.0.tgz#6e2c120e868fd1fd18cb4f18c31741d0d6e776f0"
+  integrity sha512-Ho2z80bVIvJloH+YzRmpZVQe87+qASmBUKZDWgx9cu+KDrX2ZDH/3tMy+gXbZETVGs2M8YdxObOh7XAtim9Y0g==
+
 object-is@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/object-is/-/object-is-1.0.1.tgz#0aa60ec9989a0b3ed795cf4d06f62cf1ad6539b6"
@@ -8411,6 +8899,42 @@ object.assign@^4.1.0:
     has-symbols "^1.0.0"
     object-keys "^1.0.11"
 
+object.assign@^4.1.2:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/object.assign/-/object.assign-4.1.2.tgz#0ed54a342eceb37b38ff76eb831a0e788cb63940"
+  integrity sha512-ixT2L5THXsApyiUPYKmW+2EHpXXe5Ii3M+f4e+aJFAHao5amFRW6J0OO6c/LU8Be47utCx2GL89hxGB6XSmKuQ==
+  dependencies:
+    call-bind "^1.0.0"
+    define-properties "^1.1.3"
+    has-symbols "^1.0.1"
+    object-keys "^1.1.1"
+
+object.entries@^1.1.5:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/object.entries/-/object.entries-1.1.5.tgz#e1acdd17c4de2cd96d5a08487cfb9db84d881861"
+  integrity sha512-TyxmjUoZggd4OrrU1W66FMDG6CuqJxsFvymeyXI51+vQLN67zYfZseptRge703kKQdo4uccgAKebXFcRCzk4+g==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.1.3"
+    es-abstract "^1.19.1"
+
+object.fromentries@^2.0.5:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/object.fromentries/-/object.fromentries-2.0.5.tgz#7b37b205109c21e741e605727fe8b0ad5fa08251"
+  integrity sha512-CAyG5mWQRRiBU57Re4FKoTBjXfDoNwdFVH2Y1tS9PqCsfUTymAohOkEMSG3aRNKmv4lV3O7p1et7c187q6bynw==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.1.3"
+    es-abstract "^1.19.1"
+
+object.hasown@^1.1.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/object.hasown/-/object.hasown-1.1.1.tgz#ad1eecc60d03f49460600430d97f23882cf592a3"
+  integrity sha512-LYLe4tivNQzq4JdaWW6WO3HMZZJWzkkH8fnI6EebWl0VZth2wL2Lovm74ep2/gZzlaTdV62JZHEqHQ2yVn8Q/A==
+  dependencies:
+    define-properties "^1.1.4"
+    es-abstract "^1.19.5"
+
 object.pick@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/object.pick/-/object.pick-1.3.0.tgz#87a10ac4c1694bd2e1cbf53591a66141fb5dd747"
@@ -8418,6 +8942,15 @@ object.pick@^1.3.0:
   dependencies:
     isobject "^3.0.1"
 
+object.values@^1.1.5:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/object.values/-/object.values-1.1.5.tgz#959f63e3ce9ef108720333082131e4a459b716ac"
+  integrity sha512-QUZRW0ilQ3PnPpbNtgdNV1PDbEqLIiSFB3l+EnGtBQ/8SUTLj1PZwtQHABZtLgwpJZTSZhuGLOGk57Drx2IvYg==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.1.3"
+    es-abstract "^1.19.1"
+
 on-exit-leak-free@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/on-exit-leak-free/-/on-exit-leak-free-0.2.0.tgz#b39c9e3bf7690d890f4861558b0d7b90a442d209"
@@ -9008,6 +9541,15 @@ prompts@^2.4.2:
     kleur "^3.0.3"
     sisteransi "^1.0.5"
 
+prop-types@^15.8.1:
+  version "15.8.1"
+  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
+  integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
+  dependencies:
+    loose-envify "^1.4.0"
+    object-assign "^4.1.1"
+    react-is "^16.13.1"
+
 proxy-addr@~2.0.5:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-2.0.5.tgz#34cbd64a2d81f4b1fd21e76f9f06c8a45299ee34"
@@ -9136,6 +9678,11 @@ querystring@0.2.0:
   resolved "https://registry.yarnpkg.com/querystring/-/querystring-0.2.0.tgz#b209849203bb25df820da756e747005878521620"
   integrity sha1-sgmEkgO7Jd+CDadW50cAWHhSFiA=
 
+queue-microtask@^1.2.2:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/queue-microtask/-/queue-microtask-1.2.3.tgz#4929228bbc724dfac43e0efb058caf7b6cfb6243"
+  integrity sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==
+
 queue@6.0.2:
   version "6.0.2"
   resolved "https://registry.yarnpkg.com/queue/-/queue-6.0.2.tgz#b91525283e2315c7553d2efa18d83e76432fed65"
@@ -9204,6 +9751,11 @@ react-dom@^18.1.0:
     loose-envify "^1.1.0"
     scheduler "^0.22.0"
 
+react-is@^16.13.1:
+  version "16.13.1"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
+  integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
+
 react-is@^16.7.0:
   version "16.13.0"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.0.tgz#0f37c3613c34fe6b37cd7f763a0d6293ab15c527"
@@ -9374,6 +9926,15 @@ regexp.prototype.flags@^1.2.0:
   dependencies:
     define-properties "^1.1.2"
 
+regexp.prototype.flags@^1.4.1:
+  version "1.4.3"
+  resolved "https://registry.yarnpkg.com/regexp.prototype.flags/-/regexp.prototype.flags-1.4.3.tgz#87cab30f80f66660181a3bb7bf5981a872b367ac"
+  integrity sha512-fjggEOO3slI6Wvgjwflkc4NFRCTZAu5CnNfBd5qOMYhWdn67nJBBu34/TkD++eeFmd8C9r9jfXJ27+nSiRkSUA==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.1.3"
+    functions-have-names "^1.2.2"
+
 regexpp@^3.2.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/regexpp/-/regexpp-3.2.0.tgz#0425a2768d8f23bad70ca4b90461fa2f1213e1b2"
@@ -9580,6 +10141,14 @@ resolve@^1.3.2:
   dependencies:
     path-parse "^1.0.6"
 
+resolve@^2.0.0-next.3:
+  version "2.0.0-next.3"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-2.0.0-next.3.tgz#d41016293d4a8586a39ca5d9b5f15cbea1f55e46"
+  integrity sha512-W8LucSynKUIDu9ylraa7ueVZ7hc0uAgJBxVsQSKOXOyle8a93qXhcz+XAXZ8bIq2d6i4Ehddn6Evt+0/UwKk6Q==
+  dependencies:
+    is-core-module "^2.2.0"
+    path-parse "^1.0.6"
+
 responselike@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/responselike/-/responselike-1.0.2.tgz#918720ef3b631c5642be068f15ade5a46f4ba1e7"
@@ -9592,6 +10161,11 @@ ret@~0.1.10:
   resolved "https://registry.yarnpkg.com/ret/-/ret-0.1.15.tgz#b8a4825d5bdb1fc3f6f53c2bc33f81388681c7bc"
   integrity sha512-TTlYpa+OL+vMMNG24xSlQGEJ3B/RzEfUlLct7b5G/ytav+wPrplCpVMFuwzXbkecJrb6IYo1iFb0S9v37754mg==
 
+reusify@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/reusify/-/reusify-1.0.4.tgz#90da382b1e126efc02146e90845a88db12925d76"
+  integrity sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==
+
 rimraf@3.0.2, rimraf@^3.0.0, rimraf@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-3.0.2.tgz#f1a5402ba6220ad52cc1282bac1ae3aa49fd061a"
@@ -9628,6 +10202,13 @@ rtl-css-js@^1.14.0:
   dependencies:
     "@babel/runtime" "^7.1.2"
 
+run-parallel@^1.1.9:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/run-parallel/-/run-parallel-1.2.0.tgz#66d1368da7bdf921eb9d95bd1a9229e7f21a43ee"
+  integrity sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==
+  dependencies:
+    queue-microtask "^1.2.2"
+
 run-queue@^1.0.0, run-queue@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/run-queue/-/run-queue-1.0.3.tgz#e848396f057d223f24386924618e25694161ec47"
@@ -9788,6 +10369,13 @@ semver@^6.0.0, semver@^6.1.1, semver@^6.1.2, semver@^6.2.0, semver@^6.3.0:
   resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.0.tgz#ee0a64c8af5e8ceea67687b133761e1becbd1d3d"
   integrity sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==
 
+semver@^7.3.5:
+  version "7.3.7"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-7.3.7.tgz#12c5b649afdbf9049707796e22a4028814ce523f"
+  integrity sha512-QlYTucUYOews+WeEujDoEGziz4K6c47V/Bd+LjSSYcA94p+DmINdf7ncaUinThfvZyu13lN9OY1XDxt8C0Tw0g==
+  dependencies:
+    lru-cache "^6.0.0"
+
 send@0.17.1:
   version "0.17.1"
   resolved "https://registry.yarnpkg.com/send/-/send-0.17.1.tgz#c1d8b059f7900f7466dd4938bdc44e11ddb376c8"
@@ -9921,6 +10509,15 @@ shellwords@^0.1.1:
   resolved "https://registry.yarnpkg.com/shellwords/-/shellwords-0.1.1.tgz#d6b9181c1a48d397324c84871efbcfc73fc0654b"
   integrity sha512-vFwSUfQvqybiICwZY5+DAWIPLKsWO31Q91JSKl3UYv+K5c2QRPzn0qzec6QPu1Qc9eHYItiP3NdJqNVqetYAww==
 
+side-channel@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/side-channel/-/side-channel-1.0.4.tgz#efce5c8fdc104ee751b25c58d4290011fa5ea2cf"
+  integrity sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==
+  dependencies:
+    call-bind "^1.0.0"
+    get-intrinsic "^1.0.2"
+    object-inspect "^1.9.0"
+
 sign-addon@3.11.0:
   version "3.11.0"
   resolved "https://registry.yarnpkg.com/sign-addon/-/sign-addon-3.11.0.tgz#8c4e688ae8053b8e24ab03aa59e651f1bf66a9fb"
@@ -10316,6 +10913,38 @@ string-width@^4.2.2, string-width@^4.2.3:
     is-fullwidth-code-point "^3.0.0"
     strip-ansi "^6.0.1"
 
+string.prototype.matchall@^4.0.6:
+  version "4.0.7"
+  resolved "https://registry.yarnpkg.com/string.prototype.matchall/-/string.prototype.matchall-4.0.7.tgz#8e6ecb0d8a1fb1fda470d81acecb2dba057a481d"
+  integrity sha512-f48okCX7JiwVi1NXCVWcFnZgADDC/n2vePlQ/KUCNqCikLLilQvwjMO8+BHVKvgzH0JB0J9LEPgxOGT02RoETg==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.1.3"
+    es-abstract "^1.19.1"
+    get-intrinsic "^1.1.1"
+    has-symbols "^1.0.3"
+    internal-slot "^1.0.3"
+    regexp.prototype.flags "^1.4.1"
+    side-channel "^1.0.4"
+
+string.prototype.trimend@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/string.prototype.trimend/-/string.prototype.trimend-1.0.5.tgz#914a65baaab25fbdd4ee291ca7dde57e869cb8d0"
+  integrity sha512-I7RGvmjV4pJ7O3kdf+LXFpVfdNOxtCW/2C8f6jNiW4+PQchwxkCDzlk1/7p+Wl4bqFIZeF47qAHXLuHHWKAxog==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.1.4"
+    es-abstract "^1.19.5"
+
+string.prototype.trimstart@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/string.prototype.trimstart/-/string.prototype.trimstart-1.0.5.tgz#5466d93ba58cfa2134839f81d7f42437e8c01fef"
+  integrity sha512-THx16TJCGlsN0o6dl2o6ncWUsdgnLRSA23rRE5pyGBw/mLr3Ej/R2LaqCtgP8VNMGZsvMWnf9ooZPyY2bHvUFg==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.1.4"
+    es-abstract "^1.19.5"
+
 string_decoder@^1.0.0, string_decoder@^1.1.1:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.3.0.tgz#42f114594a46cf1a8e30b0a84f56c78c3edac21e"
@@ -10755,6 +11384,11 @@ ts-easing@^0.2.0:
   resolved "https://registry.yarnpkg.com/ts-easing/-/ts-easing-0.2.0.tgz#c8a8a35025105566588d87dbda05dd7fbfa5a4ec"
   integrity sha512-Z86EW+fFFh/IFB1fqQ3/+7Zpf9t2ebOAxNI/V6Wo7r5gqiqtxmgTlQ1qbqQcjLKYeSHPTsEmvlJUDg/EuL0uHQ==
 
+tslib@^1.8.1:
+  version "1.14.1"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
+  integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
+
 tslib@^1.9.0, tslib@^1.9.3:
   version "1.10.0"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.10.0.tgz#c3c19f95973fb0a62973fb09d90d961ee43e5c8a"
@@ -10770,6 +11404,13 @@ tslib@^2.2.0:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.3.1.tgz#e8a335add5ceae51aa261d32a490158ef042ef01"
   integrity sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==
 
+tsutils@^3.21.0:
+  version "3.21.0"
+  resolved "https://registry.yarnpkg.com/tsutils/-/tsutils-3.21.0.tgz#b48717d394cea6c1e096983eed58e9d61715b623"
+  integrity sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA==
+  dependencies:
+    tslib "^1.8.1"
+
 tty-browserify@0.0.0:
   version "0.0.0"
   resolved "https://registry.yarnpkg.com/tty-browserify/-/tty-browserify-0.0.0.tgz#a157ba402da24e9bf957f9aa69d524eed42901a6"
@@ -10864,6 +11505,16 @@ uglifyjs-webpack-plugin@^2.1.2:
     webpack-sources "^1.4.0"
     worker-farm "^1.7.0"
 
+unbox-primitive@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/unbox-primitive/-/unbox-primitive-1.0.2.tgz#29032021057d5e6cdbd08c5129c226dff8ed6f9e"
+  integrity sha512-61pPlCD9h51VoreyJ0BReideM3MDKMKnh6+V9L08331ipq6Q8OFXZYiqP6n/tbHx4s5I9uRhcye6BrbkizkBDw==
+  dependencies:
+    call-bind "^1.0.2"
+    has-bigints "^1.0.2"
+    has-symbols "^1.0.3"
+    which-boxed-primitive "^1.0.2"
+
 unbzip2-stream@1.3.3:
   version "1.3.3"
   resolved "https://registry.yarnpkg.com/unbzip2-stream/-/unbzip2-stream-1.3.3.tgz#d156d205e670d8d8c393e1c02ebd506422873f6a"
@@ -11368,6 +12019,17 @@ when@3.7.7:
   resolved "https://registry.yarnpkg.com/when/-/when-3.7.7.tgz#aba03fc3bb736d6c88b091d013d8a8e590d84718"
   integrity sha1-q6A/w7tzbWyIsJHQE9io5ZDYRxg=
 
+which-boxed-primitive@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/which-boxed-primitive/-/which-boxed-primitive-1.0.2.tgz#13757bc89b209b049fe5d86430e21cf40a89a8e6"
+  integrity sha512-bwZdv0AKLpplFY2KZRX6TvyuN7ojjr7lwkg6ml0roIy9YeuSr7JS372qlNW18UQYzgYK9ziGcerWqZOmEn9VNg==
+  dependencies:
+    is-bigint "^1.0.1"
+    is-boolean-object "^1.1.0"
+    is-number-object "^1.0.4"
+    is-string "^1.0.5"
+    is-symbol "^1.0.3"
+
 which-module@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/which-module/-/which-module-2.0.0.tgz#d9ef07dce77b9902b8a3a8fa4b31c3e3f7e6e87a"

From a01a7ede9e6b393c274450a98e293f2f719ae691 Mon Sep 17 00:00:00 2001
From: EnixCoda <enixcoda@gmail.com>
Date: Sun, 15 May 2022 01:15:54 +0800
Subject: [PATCH 15/93] refactor: memoize useStateIO

---
 src/utils/hooks/useStateIO.ts | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/utils/hooks/useStateIO.ts b/src/utils/hooks/useStateIO.ts
index f216a50..979e750 100644
--- a/src/utils/hooks/useStateIO.ts
+++ b/src/utils/hooks/useStateIO.ts
@@ -1,11 +1,9 @@
 import * as React from 'react'
 
-export function useStateIO<S>(
-  initialState: S | (() => S),
-): {
+export function useStateIO<S>(initialState: S | (() => S)): {
   value: S
   onChange: React.Dispatch<React.SetStateAction<S>>
 } {
   const [value, onChange] = React.useState(initialState)
-  return { value, onChange }
+  return React.useMemo(() => ({ value, onChange }), [value])
 }

From b0dcb256a77242c092dea4ef9fba8afe8bc01603 Mon Sep 17 00:00:00 2001
From: EnixCoda <enixcoda@gmail.com>
Date: Sun, 15 May 2022 01:17:20 +0800
Subject: [PATCH 16/93] chore: use cancel in one time listener

---
 src/utils/VisibleNodesGenerator/index.ts | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/utils/VisibleNodesGenerator/index.ts b/src/utils/VisibleNodesGenerator/index.ts
index 941b321..67803e7 100644
--- a/src/utils/VisibleNodesGenerator/index.ts
+++ b/src/utils/VisibleNodesGenerator/index.ts
@@ -351,10 +351,11 @@ export class VisibleNodesGenerator extends FlattenLayer {
 
   onNextUpdate(callback: (visibleNodes: VisibleNodes) => void) {
     const oneTimeSubscription = (visibleNodes: VisibleNodes) => {
+      cancel()
       callback(visibleNodes)
-      this.hub.removeEventListener('emit', oneTimeSubscription)
     }
-    return this.hub.addEventListener('emit', oneTimeSubscription)
+    const cancel = this.hub.addEventListener('emit', oneTimeSubscription)
+    return cancel
   }
 
   update() {

From d0be9cedb21d3a53db71aee9ad299da093a4cbe6 Mon Sep 17 00:00:00 2001
From: EnixCoda <enixcoda@gmail.com>
Date: Sun, 15 May 2022 01:17:36 +0800
Subject: [PATCH 17/93] refactor: File Explorer

---
 src/components/FileExplorer/ListView.tsx      |  20 +-
 .../FileExplorer/hooks/useExpandTo.tsx        |  14 +
 .../useFocusFileExplorerOnFirstRender.tsx     |   8 +
 .../FileExplorer/hooks/useFocusNode.tsx       |   9 +
 .../FileExplorer/hooks/useGetCurrentPath.tsx  |   6 +
 src/components/FileExplorer/hooks/useGoTo.tsx |  19 +
 .../FileExplorer/hooks/useHandleKeyDown.tsx   | 150 ++++++++
 .../hooks/useNodeRenderContext.tsx            |  24 ++
 .../{ => hooks}/useNodeRenderers.tsx          |  83 ++--
 .../FileExplorer/hooks/useOnNodeClick.tsx     |  45 +++
 .../FileExplorer/hooks/useOnSearch.tsx        |  23 ++
 .../hooks/useOnVisibleNodesGeneratorReady.tsx |  39 ++
 .../hooks/useReactWindowAlignMode.tsx         |  13 +
 .../FileExplorer/hooks/useRenderLabelText.tsx |  11 +
 .../FileExplorer/hooks/useSetupTree.tsx       |  62 +++
 .../FileExplorer/hooks/useToggleExpansion.tsx |  23 ++
 src/components/FileExplorer/index.tsx         | 159 +++-----
 .../FileExplorer/useVisibleNodes.tsx          |   8 +
 src/components/SideBar.tsx                    |  18 +-
 .../settings/AccessTokenSettings.tsx          |  10 +-
 src/driver/core/FileExplorer.ts               | 355 ------------------
 src/driver/core/index.ts                      |   8 -
 src/utils/VisibleNodesGenerator/index.ts      |   5 +-
 src/utils/hooks/useSequentialEffect.ts        |  19 +-
 24 files changed, 574 insertions(+), 557 deletions(-)
 create mode 100644 src/components/FileExplorer/hooks/useExpandTo.tsx
 create mode 100644 src/components/FileExplorer/hooks/useFocusFileExplorerOnFirstRender.tsx
 create mode 100644 src/components/FileExplorer/hooks/useFocusNode.tsx
 create mode 100644 src/components/FileExplorer/hooks/useGetCurrentPath.tsx
 create mode 100644 src/components/FileExplorer/hooks/useGoTo.tsx
 create mode 100644 src/components/FileExplorer/hooks/useHandleKeyDown.tsx
 create mode 100644 src/components/FileExplorer/hooks/useNodeRenderContext.tsx
 rename src/components/FileExplorer/{ => hooks}/useNodeRenderers.tsx (58%)
 create mode 100644 src/components/FileExplorer/hooks/useOnNodeClick.tsx
 create mode 100644 src/components/FileExplorer/hooks/useOnSearch.tsx
 create mode 100644 src/components/FileExplorer/hooks/useOnVisibleNodesGeneratorReady.tsx
 create mode 100644 src/components/FileExplorer/hooks/useReactWindowAlignMode.tsx
 create mode 100644 src/components/FileExplorer/hooks/useRenderLabelText.tsx
 create mode 100644 src/components/FileExplorer/hooks/useSetupTree.tsx
 create mode 100644 src/components/FileExplorer/hooks/useToggleExpansion.tsx
 create mode 100644 src/components/FileExplorer/useVisibleNodes.tsx
 delete mode 100644 src/driver/core/FileExplorer.ts
 delete mode 100644 src/driver/core/index.ts

diff --git a/src/components/FileExplorer/ListView.tsx b/src/components/FileExplorer/ListView.tsx
index ee2ed1b..80aa362 100644
--- a/src/components/FileExplorer/ListView.tsx
+++ b/src/components/FileExplorer/ListView.tsx
@@ -1,5 +1,4 @@
 import { useConfigs } from 'containers/ConfigsContext'
-import { ConnectorState, Props } from 'driver/core/FileExplorer'
 import { platform } from 'platforms'
 import * as React from 'react'
 import { Align as ReactWindowAlign, FixedSizeList } from 'react-window'
@@ -12,9 +11,10 @@ type ListViewProps = {
   height: number
   width: number
   nodeRendererContext: NodeRendererContext
-  scrollMode: ReactWindowAlign
-} & Pick<Props, 'metaData'> &
-  Pick<ConnectorState, 'expandTo'>
+  alignMode: ReactWindowAlign
+  metaData: MetaData
+  expandTo: (path: string[]) => void
+}
 
 export function ListView({
   width,
@@ -22,20 +22,22 @@ export function ListView({
   metaData,
   expandTo,
   nodeRendererContext,
-  scrollMode,
+  alignMode,
 }: ListViewProps) {
   const { visibleNodes } = nodeRendererContext
   const { focusedNode, nodes } = visibleNodes
-  const listRef = React.useRef<FixedSizeList>(null)
-  // the change of depths indicates switch into/from search state
+  const listRef = React.useRef<FixedSizeList<NodeRendererContext>>(null)
+
+  // Scroll to focused node
   React.useEffect(() => {
     if (listRef.current && focusedNode?.path) {
       const index = nodes.findIndex(node => node.path === focusedNode.path)
       if (index !== -1) {
-        listRef.current.scrollToItem(index, scrollMode)
+        listRef.current.scrollToItem(index, alignMode)
       }
     }
-  }, [focusedNode?.path, nodes])
+  }, [focusedNode?.path, nodes, alignMode])
+
   // For some reason, removing the deps array above results in bug:
   // If scroll fast and far, then clicking on items would result in redirect
   // Not know the reason :(
diff --git a/src/components/FileExplorer/hooks/useExpandTo.tsx b/src/components/FileExplorer/hooks/useExpandTo.tsx
new file mode 100644
index 0000000..43e378a
--- /dev/null
+++ b/src/components/FileExplorer/hooks/useExpandTo.tsx
@@ -0,0 +1,14 @@
+import * as React from 'react'
+import { VisibleNodesGenerator } from 'utils/VisibleNodesGenerator'
+
+export function useExpandTo(visibleNodesGenerator: VisibleNodesGenerator | null) {
+  return React.useCallback(
+    async (currentPath: string[]) => {
+      if (!visibleNodesGenerator) return
+
+      const nodeExpandedTo = await visibleNodesGenerator.expandTo(currentPath.join('/'))
+      if (nodeExpandedTo) visibleNodesGenerator.focusNode(nodeExpandedTo)
+    },
+    [visibleNodesGenerator],
+  )
+}
diff --git a/src/components/FileExplorer/hooks/useFocusFileExplorerOnFirstRender.tsx b/src/components/FileExplorer/hooks/useFocusFileExplorerOnFirstRender.tsx
new file mode 100644
index 0000000..c3b6072
--- /dev/null
+++ b/src/components/FileExplorer/hooks/useFocusFileExplorerOnFirstRender.tsx
@@ -0,0 +1,8 @@
+import * as React from 'react'
+import * as DOMHelper from 'utils/DOMHelper'
+
+export function useFocusFileExplorerOnFirstRender() {
+  React.useEffect(() => {
+    DOMHelper.focusFileExplorer()
+  }, [])
+}
diff --git a/src/components/FileExplorer/hooks/useFocusNode.tsx b/src/components/FileExplorer/hooks/useFocusNode.tsx
new file mode 100644
index 0000000..e988068
--- /dev/null
+++ b/src/components/FileExplorer/hooks/useFocusNode.tsx
@@ -0,0 +1,9 @@
+import * as React from 'react'
+import { VisibleNodesGenerator } from 'utils/VisibleNodesGenerator'
+
+export function useFocusNode(visibleNodesGenerator: VisibleNodesGenerator | null) {
+  return React.useCallback(
+    (node: TreeNode | null) => visibleNodesGenerator?.focusNode(node),
+    [visibleNodesGenerator],
+  )
+}
diff --git a/src/components/FileExplorer/hooks/useGetCurrentPath.tsx b/src/components/FileExplorer/hooks/useGetCurrentPath.tsx
new file mode 100644
index 0000000..07fdcc3
--- /dev/null
+++ b/src/components/FileExplorer/hooks/useGetCurrentPath.tsx
@@ -0,0 +1,6 @@
+import { platform } from 'platforms'
+import { useCallback } from 'react'
+
+export function useGetCurrentPath({ branchName }: MetaData) {
+  return useCallback(() => platform.getCurrentPath(branchName), [branchName])
+}
diff --git a/src/components/FileExplorer/hooks/useGoTo.tsx b/src/components/FileExplorer/hooks/useGoTo.tsx
new file mode 100644
index 0000000..10c5e9b
--- /dev/null
+++ b/src/components/FileExplorer/hooks/useGoTo.tsx
@@ -0,0 +1,19 @@
+import * as React from 'react'
+import { VisibleNodesGenerator } from 'utils/VisibleNodesGenerator'
+
+export function useGoTo(
+  visibleNodesGenerator: VisibleNodesGenerator | null,
+  updateSearchKey: React.Dispatch<React.SetStateAction<string>>,
+  expandTo: (currentPath: string[]) => Promise<void>,
+) {
+  return React.useCallback(
+    (path: string[]) => {
+      if (!visibleNodesGenerator) return
+
+      updateSearchKey('')
+      visibleNodesGenerator.search(null)
+      visibleNodesGenerator.onNextUpdate(() => expandTo(path))
+    },
+    [visibleNodesGenerator, updateSearchKey, expandTo],
+  )
+}
diff --git a/src/components/FileExplorer/hooks/useHandleKeyDown.tsx b/src/components/FileExplorer/hooks/useHandleKeyDown.tsx
new file mode 100644
index 0000000..d0abee5
--- /dev/null
+++ b/src/components/FileExplorer/hooks/useHandleKeyDown.tsx
@@ -0,0 +1,150 @@
+import * as React from 'react'
+import * as DOMHelper from 'utils/DOMHelper'
+import { OperatingSystems, os } from 'utils/general'
+import { loadWithPJAX } from 'utils/hooks/usePJAX'
+import { VisibleNodes } from 'utils/VisibleNodesGenerator'
+import { VisibleNodesGeneratorMethods } from './useOnVisibleNodesGeneratorReady'
+
+function wouldBlockHistoryNavigation(event: React.KeyboardEvent) {
+  // Cmd + left/right on macOS
+  // Alt + left/right on other OSes
+  return (
+    (os === OperatingSystems.macOS && event.metaKey) ||
+    (os !== OperatingSystems.macOS && event.altKey)
+  )
+}
+
+function getVisibleParentNode(nodes: TreeNode[], focusedNode: TreeNode) {
+  let index = nodes.findIndex(node => node.path === focusedNode.path) - 1
+  while (index >= 0) {
+    if (nodes[index].contents?.includes(focusedNode)) {
+      return nodes[index]
+    }
+    --index
+  }
+}
+
+export function useHandleKeyDown(
+  visibleNodes: VisibleNodes | null,
+  { focusNode, toggleExpansion, goTo }: VisibleNodesGeneratorMethods,
+  searched: boolean,
+) {
+  return React.useCallback(
+    (event: React.KeyboardEvent<HTMLElement>) => {
+      if (!visibleNodes) return
+      const { nodes, focusedNode, expandedNodes } = visibleNodes
+      function handleVerticalMove(index: number) {
+        if (0 <= index && index < nodes.length) {
+          DOMHelper.focusFileExplorer()
+          focusNode(nodes[index])
+        } else {
+          DOMHelper.focusSearchInput()
+          focusNode(null)
+        }
+      }
+
+      const { key } = event
+      // prevent document body scrolling if the keypress results in Gitako action
+      let muteEvent = true
+      if (focusedNode) {
+        const focusedNodeIndex = nodes.findIndex(node => node.path === focusedNode.path)
+        switch (key) {
+          case 'ArrowUp':
+            // focus on previous node
+            handleVerticalMove(focusedNodeIndex - 1)
+            break
+
+          case 'ArrowDown':
+            // focus on next node
+            handleVerticalMove(focusedNodeIndex + 1)
+            break
+
+          case 'ArrowLeft':
+            if (wouldBlockHistoryNavigation(event)) {
+              muteEvent = false
+              break
+            }
+            if (expandedNodes.has(focusedNode.path)) {
+              toggleExpansion(focusedNode, { recursive: event.altKey })
+            } else {
+              // go forward to the start of the list, find the closest node with lower depth
+              const parentNode = getVisibleParentNode(nodes, focusedNode)
+              if (parentNode) {
+                focusNode(parentNode)
+              }
+            }
+            break
+
+          // consider the two keys as 'confirm' key
+          case 'ArrowRight':
+            if (wouldBlockHistoryNavigation(event)) {
+              muteEvent = false
+              break
+            }
+            // expand node or focus on first content node or redirect to file page
+            if (focusedNode.type === 'tree') {
+              if (expandedNodes.has(focusedNode.path)) {
+                const nextNode = nodes[focusedNodeIndex + 1]
+                if (focusedNode.contents?.includes(nextNode)) {
+                  focusNode(nextNode)
+                }
+              } else {
+                toggleExpansion(focusedNode, { recursive: event.altKey })
+              }
+            } else if (focusedNode.type === 'blob') {
+              const focusedNodeElement = DOMHelper.findNodeElement(focusedNode, event.currentTarget)
+              if (focusedNodeElement && focusedNode.url)
+                loadWithPJAX(focusedNode.url, focusedNodeElement)
+            } else if (focusedNode.type === 'commit') {
+              window.open(focusedNode.url)
+            }
+            break
+          case 'Enter':
+            // expand node or redirect to file page
+            if (searched) {
+              goTo(focusedNode.path.split('/'))
+            } else {
+              if (focusedNode.type === 'tree') {
+                toggleExpansion(focusedNode, { recursive: event.altKey })
+              } else if (focusedNode.type === 'blob') {
+                const focusedNodeElement = DOMHelper.findNodeElement(
+                  focusedNode,
+                  event.currentTarget,
+                )
+                if (focusedNodeElement && focusedNode.url)
+                  loadWithPJAX(focusedNode.url, focusedNodeElement)
+              } else if (focusedNode.type === 'commit') {
+                window.open(focusedNode.url)
+              }
+            }
+            break
+          default:
+            muteEvent = false
+        }
+        if (muteEvent) {
+          event.preventDefault()
+        }
+      } else {
+        // now search input is focused
+        if (nodes.length) {
+          switch (key) {
+            case 'ArrowDown':
+              DOMHelper.focusFileExplorer()
+              focusNode(nodes[0])
+              break
+            case 'ArrowUp':
+              DOMHelper.focusFileExplorer()
+              focusNode(nodes[nodes.length - 1])
+              break
+            default:
+              muteEvent = false
+          }
+          if (muteEvent) {
+            event.preventDefault()
+          }
+        }
+      }
+    },
+    [visibleNodes, searched, goTo, focusNode, toggleExpansion],
+  )
+}
diff --git a/src/components/FileExplorer/hooks/useNodeRenderContext.tsx b/src/components/FileExplorer/hooks/useNodeRenderContext.tsx
new file mode 100644
index 0000000..d9c4776
--- /dev/null
+++ b/src/components/FileExplorer/hooks/useNodeRenderContext.tsx
@@ -0,0 +1,24 @@
+import * as React from 'react'
+import { VisibleNodes } from 'utils/VisibleNodesGenerator'
+import { NodeRendererContext } from '../index'
+import { useNodeRenderers } from './useNodeRenderers'
+import { useHandleNodeClick } from './useOnNodeClick'
+import { useRenderLabelText } from './useRenderLabelText'
+
+export function useNodeRenderContext(
+  visibleNodes: VisibleNodes | null,
+  onNodeClick: ReturnType<typeof useHandleNodeClick>,
+  renderActions: ReturnType<typeof useNodeRenderers>,
+  renderLabelText: ReturnType<typeof useRenderLabelText>,
+): NodeRendererContext | null {
+  return React.useMemo(
+    () =>
+      visibleNodes && {
+        visibleNodes,
+        onNodeClick,
+        renderActions,
+        renderLabelText,
+      },
+    [visibleNodes, onNodeClick, renderActions, renderLabelText],
+  )
+}
diff --git a/src/components/FileExplorer/useNodeRenderers.tsx b/src/components/FileExplorer/hooks/useNodeRenderers.tsx
similarity index 58%
rename from src/components/FileExplorer/useNodeRenderers.tsx
rename to src/components/FileExplorer/hooks/useNodeRenderers.tsx
index 9d7b2aa..eb51563 100644
--- a/src/components/FileExplorer/useNodeRenderers.tsx
+++ b/src/components/FileExplorer/hooks/useNodeRenderers.tsx
@@ -1,10 +1,10 @@
 import { useConfigs } from 'containers/ConfigsContext'
 import * as React from 'react'
 import { isNotFalsy } from 'utils/general'
-import { Icon } from '../Icon'
-import { SearchMode } from '../searchModes'
-import { DiffStatGraph } from './DiffStatGraph'
-import { DiffStatText } from './DiffStatText'
+import { Icon } from '../../Icon'
+import { SearchMode } from '../../searchModes'
+import { DiffStatGraph } from './../DiffStatGraph'
+import { DiffStatText } from './../DiffStatText'
 
 export type NodeRenderer = (node: TreeNode) => React.ReactNode
 
@@ -49,49 +49,56 @@ export function useRenderFileCommentAmounts() {
     ) : null
   }
   const { commentToggle } = useConfigs().value
-  return React.useMemo(() => (commentToggle ? renderFileCommentAmounts : null), [])
+  return React.useMemo(() => (commentToggle ? renderFileCommentAmounts : null), [commentToggle])
 }
 
 export function useRenderFindInFolderButton(
   onSearch: (searchKey: string, searchMode: SearchMode) => void,
 ) {
-  function renderFindInFolderButton(node: TreeNode) {
-    return node.type === 'tree' ? (
-      <button
-        title={'Find in folder...'}
-        className={'find-in-folder-button'}
-        onClick={e => {
-          e.stopPropagation()
-          e.preventDefault()
-          onSearch(node.path + '/', searchMode)
-        }}
-      >
-        <Icon type="search" />
-      </button>
-    ) : null
-  }
   const { searchMode } = useConfigs().value
   return React.useMemo(
-    () => (searchMode === 'fuzzy' ? renderFindInFolderButton : null),
-    [searchMode],
+    () =>
+      searchMode === 'fuzzy'
+        ? function renderFindInFolderButton(node: TreeNode) {
+            return node.type === 'tree' ? (
+              <button
+                title={'Find in folder...'}
+                className={'find-in-folder-button'}
+                onClick={e => {
+                  e.stopPropagation()
+                  e.preventDefault()
+                  onSearch(node.path + '/', searchMode)
+                }}
+              >
+                <Icon type="search" />
+              </button>
+            ) : null
+          }
+        : null,
+    [searchMode, onSearch],
   )
 }
 
 export function useRenderGoToButton(searched: boolean, goTo: (path: string[]) => void) {
-  function renderGoToButton(node: TreeNode): React.ReactNode {
-    return (
-      <button
-        title={'Reveal in file tree'}
-        className={'go-to-button'}
-        onClick={e => {
-          e.stopPropagation()
-          e.preventDefault()
-          goTo(node.path.split('/'))
-        }}
-      >
-        <Icon type="go-to" />
-      </button>
-    )
-  }
-  return React.useMemo(() => (searched ? renderGoToButton : null), [searched])
+  return React.useMemo(
+    () =>
+      searched
+        ? function renderGoToButton(node: TreeNode): React.ReactNode {
+            return (
+              <button
+                title={'Reveal in file tree'}
+                className={'go-to-button'}
+                onClick={e => {
+                  e.stopPropagation()
+                  e.preventDefault()
+                  goTo(node.path.split('/'))
+                }}
+              >
+                <Icon type="go-to" />
+              </button>
+            )
+          }
+        : null,
+    [searched, goTo],
+  )
 }
diff --git a/src/components/FileExplorer/hooks/useOnNodeClick.tsx b/src/components/FileExplorer/hooks/useOnNodeClick.tsx
new file mode 100644
index 0000000..6e0403b
--- /dev/null
+++ b/src/components/FileExplorer/hooks/useOnNodeClick.tsx
@@ -0,0 +1,45 @@
+import { useConfigs } from 'containers/ConfigsContext'
+import * as React from 'react'
+import { isOpenInNewWindowClick } from 'utils/general'
+import { loadWithPJAX } from 'utils/hooks/usePJAX'
+import { VisibleNodesGeneratorMethods } from './useOnVisibleNodesGeneratorReady'
+
+export function useHandleNodeClick({ toggleExpansion, focusNode }: VisibleNodesGeneratorMethods) {
+  const { recursiveToggleFolder } = useConfigs().value
+  return React.useCallback(
+    (event: React.MouseEvent<HTMLElement, MouseEvent>, node: TreeNode) => {
+      switch (node.type) {
+        case 'tree': {
+          const recursive =
+            (recursiveToggleFolder === 'shift' && event.shiftKey) ||
+            (recursiveToggleFolder === 'alt' && event.altKey)
+          // recursive toggle action may conflict with browser default action
+          // e.g. shift + click is the default open in new tab action on macOS
+          // giving recursive toggle action higher priority than default action
+          if (!recursive && isOpenInNewWindowClick(event)) return
+
+          event.preventDefault()
+          toggleExpansion(node, { recursive })
+          break
+        }
+        case 'blob': {
+          if (isOpenInNewWindowClick(event)) return
+
+          focusNode(node)
+          if (node.url) {
+            const isHashLink = node.url.includes('#')
+            if (!isHashLink) {
+              event.preventDefault()
+              loadWithPJAX(node.url, event.currentTarget)
+            }
+          }
+          break
+        }
+        case 'commit': {
+          // pass event, open in new tab thanks to the target="_blank" on the anchor element
+        }
+      }
+    },
+    [toggleExpansion, recursiveToggleFolder, focusNode],
+  )
+}
diff --git a/src/components/FileExplorer/hooks/useOnSearch.tsx b/src/components/FileExplorer/hooks/useOnSearch.tsx
new file mode 100644
index 0000000..f9b9fe8
--- /dev/null
+++ b/src/components/FileExplorer/hooks/useOnSearch.tsx
@@ -0,0 +1,23 @@
+import { useConfigs } from 'containers/ConfigsContext'
+import * as React from 'react'
+import { VisibleNodesGenerator } from 'utils/VisibleNodesGenerator'
+import { SearchMode, searchModes } from '../../searchModes'
+
+export function useOnSearch(
+  updateSearchKey: (searchKey: string) => void,
+  visibleNodesGenerator: VisibleNodesGenerator | null,
+) {
+  const { restoreExpandedFolders } = useConfigs().value
+  return React.useCallback(
+    (searchKey: string, searchMode: SearchMode) => {
+      updateSearchKey(searchKey)
+      if (visibleNodesGenerator) {
+        visibleNodesGenerator.search(
+          searchModes[searchMode].getSearchParams(searchKey),
+          restoreExpandedFolders,
+        )
+      }
+    },
+    [updateSearchKey, visibleNodesGenerator, restoreExpandedFolders],
+  )
+}
diff --git a/src/components/FileExplorer/hooks/useOnVisibleNodesGeneratorReady.tsx b/src/components/FileExplorer/hooks/useOnVisibleNodesGeneratorReady.tsx
new file mode 100644
index 0000000..16cc3e5
--- /dev/null
+++ b/src/components/FileExplorer/hooks/useOnVisibleNodesGeneratorReady.tsx
@@ -0,0 +1,39 @@
+import { platform } from 'platforms'
+import { useEffect } from 'react'
+import { VisibleNodesGenerator } from 'utils/VisibleNodesGenerator'
+import { useExpandTo } from './useExpandTo'
+import { useFocusNode } from './useFocusNode'
+import { useGoTo } from './useGoTo'
+import { useToggleExpansion } from './useToggleExpansion'
+
+export function useVisibleNodesGeneratorMethods(
+  visibleNodesGenerator: VisibleNodesGenerator | null,
+  getCurrentPath: () => string[] | null,
+  updateSearchKey: React.Dispatch<React.SetStateAction<string>>,
+) {
+  const expandTo = useExpandTo(visibleNodesGenerator)
+  const goTo = useGoTo(visibleNodesGenerator, updateSearchKey, expandTo)
+  const toggleExpansion = useToggleExpansion(visibleNodesGenerator)
+  const focusNode = useFocusNode(visibleNodesGenerator)
+  useEffect(() => {
+    if (!visibleNodesGenerator) return
+
+    if (platform.shouldExpandAll?.()) {
+      visibleNodesGenerator.onNextUpdate(visibleNodes =>
+        visibleNodes.nodes.forEach(node => toggleExpansion(node, { recursive: true })),
+      )
+    } else {
+      const targetPath = getCurrentPath()
+      if (targetPath) goTo(targetPath)
+    }
+  }, [visibleNodesGenerator])
+
+  return {
+    expandTo,
+    goTo,
+    toggleExpansion,
+    focusNode,
+  }
+}
+
+export type VisibleNodesGeneratorMethods = ReturnType<typeof useVisibleNodesGeneratorMethods>
diff --git a/src/components/FileExplorer/hooks/useReactWindowAlignMode.tsx b/src/components/FileExplorer/hooks/useReactWindowAlignMode.tsx
new file mode 100644
index 0000000..331c387
--- /dev/null
+++ b/src/components/FileExplorer/hooks/useReactWindowAlignMode.tsx
@@ -0,0 +1,13 @@
+import * as React from 'react'
+import { Align as ReactWindowAlign } from 'react-window'
+import { useStateIO } from 'utils/hooks/useStateIO'
+
+export function useReactWindowAlignMode(searched: boolean) {
+  const $scrollMode = useStateIO<ReactWindowAlign>('start')
+  React.useEffect(() => {
+    // Use `auto` as default mode to prevent initial misalignment
+    // Switch to `smart` mode when start searching to make sure alignment is user-friendly when jump to files
+    if (searched && $scrollMode.value === 'start') $scrollMode.onChange('smart')
+  }, [searched, $scrollMode])
+  return $scrollMode.value
+}
diff --git a/src/components/FileExplorer/hooks/useRenderLabelText.tsx b/src/components/FileExplorer/hooks/useRenderLabelText.tsx
new file mode 100644
index 0000000..aa39638
--- /dev/null
+++ b/src/components/FileExplorer/hooks/useRenderLabelText.tsx
@@ -0,0 +1,11 @@
+import { useConfigs } from 'containers/ConfigsContext'
+import * as React from 'react'
+import { searchModes } from '../../searchModes'
+
+export function useRenderLabelText(searchKey: string) {
+  const { searchMode } = useConfigs().value
+  return React.useCallback(
+    (node: TreeNode) => searchModes[searchMode].renderNodeLabelText(node, searchKey),
+    [searchKey, searchMode],
+  )
+}
diff --git a/src/components/FileExplorer/hooks/useSetupTree.tsx b/src/components/FileExplorer/hooks/useSetupTree.tsx
new file mode 100644
index 0000000..f830885
--- /dev/null
+++ b/src/components/FileExplorer/hooks/useSetupTree.tsx
@@ -0,0 +1,62 @@
+import { useConfigs } from 'containers/ConfigsContext'
+import { platform } from 'platforms'
+import { useCallback, useState } from 'react'
+import { useCatchNetworkError } from 'utils/hooks/useCatchNetworkError'
+import { useLoadedContext } from 'utils/hooks/useLoadedContext'
+import { useSequentialEffect } from 'utils/hooks/useSequentialEffect'
+import { VisibleNodesGenerator } from 'utils/VisibleNodesGenerator'
+import { SideBarStateContext } from '../../../containers/SideBarState'
+
+export function useVisibleNodesGenerator(metaData: MetaData) {
+  const [visibleNodesGenerator, setVisibleNodesGenerator] = useState<VisibleNodesGenerator | null>(
+    null,
+  )
+
+  const catchNetworkErrors = useCatchNetworkError()
+  const config = useConfigs().value
+  const accessToken = config.accessToken
+  const setStateContext = useLoadedContext(SideBarStateContext).onChange
+
+  useSequentialEffect(
+    useCallback(
+      checker => {
+        catchNetworkErrors(async () => {
+          if (!checker()) return
+
+          setStateContext('tree-loading')
+          const { userName, repoName, branchName } = metaData
+          const { root: treeRoot, defer = false } = await platform.getTreeData(
+            {
+              branchName,
+              userName,
+              repoName,
+            },
+            '/',
+            true,
+            accessToken,
+          )
+          if (!checker()) return
+
+          setStateContext('tree-rendering')
+
+          const visibleNodesGenerator = new VisibleNodesGenerator({
+            root: treeRoot,
+            defer,
+            compress: config.compressSingletonFolder,
+            async getTreeData(path) {
+              const { root } = await platform.getTreeData(metaData, path, false, accessToken)
+              return root
+            },
+          })
+
+          setVisibleNodesGenerator(visibleNodesGenerator)
+
+          setStateContext('tree-rendered')
+        })
+      },
+      [metaData, accessToken],
+    ),
+  )
+
+  return visibleNodesGenerator
+}
diff --git a/src/components/FileExplorer/hooks/useToggleExpansion.tsx b/src/components/FileExplorer/hooks/useToggleExpansion.tsx
new file mode 100644
index 0000000..8cbf253
--- /dev/null
+++ b/src/components/FileExplorer/hooks/useToggleExpansion.tsx
@@ -0,0 +1,23 @@
+import * as React from 'react'
+import { VisibleNodesGenerator } from 'utils/VisibleNodesGenerator'
+
+export function useToggleExpansion(visibleNodesGenerator: VisibleNodesGenerator | null) {
+  return React.useCallback(
+    async (
+      node: TreeNode,
+      {
+        recursive = false,
+      }: {
+        recursive?: boolean
+      },
+    ) => {
+      if (!visibleNodesGenerator) return
+
+      if (node.type === 'tree') {
+        visibleNodesGenerator.focusNode(node)
+        await visibleNodesGenerator.toggleExpand(node, recursive)
+      }
+    },
+    [visibleNodesGenerator],
+  )
+}
diff --git a/src/components/FileExplorer/index.tsx b/src/components/FileExplorer/index.tsx
index 6dbb28b..bc85622 100644
--- a/src/components/FileExplorer/index.tsx
+++ b/src/components/FileExplorer/index.tsx
@@ -1,23 +1,17 @@
 import { Label, Text } from '@primer/react'
 import { LoadingIndicator } from 'components/LoadingIndicator'
 import { SearchBar } from 'components/SearchBar'
-import { useConfigs } from 'containers/ConfigsContext'
-import { connect } from 'driver/connect'
-import { FileExplorerCore } from 'driver/core'
-import { ConnectorState, Props } from 'driver/core/FileExplorer'
 import * as React from 'react'
-import { Align as ReactWindowAlign } from 'react-window'
 import { cx } from 'utils/cx'
-import * as DOMHelper from 'utils/DOMHelper'
 import { run } from 'utils/general'
 import { useLoadedContext } from 'utils/hooks/useLoadedContext'
-import { useSequentialEffect } from 'utils/hooks/useSequentialEffect'
-import { useStateIO } from 'utils/hooks/useStateIO'
-import { VisibleNodes, VisibleNodesGenerator } from 'utils/VisibleNodesGenerator'
+import { VisibleNodes } from 'utils/VisibleNodesGenerator'
 import { SideBarStateContext } from '../../containers/SideBarState'
-import { SearchMode, searchModes } from '../searchModes'
 import { SizeObserver } from '../SizeObserver'
-import { ListView } from './ListView'
+import { useFocusFileExplorerOnFirstRender } from './hooks/useFocusFileExplorerOnFirstRender'
+import { useGetCurrentPath } from './hooks/useGetCurrentPath'
+import { useHandleKeyDown } from './hooks/useHandleKeyDown'
+import { useNodeRenderContext } from './hooks/useNodeRenderContext'
 import {
   NodeRenderer,
   useNodeRenderers,
@@ -25,7 +19,15 @@ import {
   useRenderFileStatus,
   useRenderFindInFolderButton,
   useRenderGoToButton
-} from './useNodeRenderers'
+} from './hooks/useNodeRenderers'
+import { useHandleNodeClick } from './hooks/useOnNodeClick'
+import { useOnSearch } from './hooks/useOnSearch'
+import { useVisibleNodesGeneratorMethods } from './hooks/useOnVisibleNodesGeneratorReady'
+import { useReactWindowAlignMode } from './hooks/useReactWindowAlignMode'
+import { useRenderLabelText } from './hooks/useRenderLabelText'
+import { useVisibleNodesGenerator } from './hooks/useSetupTree'
+import { ListView } from './ListView'
+import { useVisibleNodes } from './useVisibleNodes'
 
 export type NodeRendererContext = {
   onNodeClick: (event: React.MouseEvent<HTMLElement, MouseEvent>, node: TreeNode) => void
@@ -34,113 +36,48 @@ export type NodeRendererContext = {
   visibleNodes: VisibleNodes
 }
 
-function useSetupTree(setUpTree: ConnectorState['setUpTree'], metaData: MetaData) {
-  const stateContext = useLoadedContext(SideBarStateContext)
-  const { accessToken, compressSingletonFolder } = useConfigs().value
-
-  useSequentialEffect(
-    checker => {
-      setUpTree(
-        {
-          metaData,
-          config: {
-            compressSingletonFolder,
-            accessToken,
-          },
-          stateContext,
-        },
-        checker,
-      )
-    },
-    [setUpTree, metaData, compressSingletonFolder, accessToken],
-  )
+type Props = {
+  metaData: MetaData
+  freeze: boolean
 }
 
-function useFocusFileExplorerOnFirstRender() {
-  React.useEffect(() => {
-    DOMHelper.focusFileExplorer()
-  }, [])
-}
-
-function useReactWindowAlignMode(searched: boolean) {
-  const scrollMode = useStateIO<ReactWindowAlign>('auto')
-  React.useEffect(() => {
-    // Use `auto` as default mode to prevent initial misalignment
-    // Switch to `smart` mode when start searching to make sure alignment is user-friendly when jump to files
-    if (scrollMode.value === 'auto' && searched) scrollMode.onChange('smart')
-  }, [searched])
-  return scrollMode
-}
-
-function useOnSearch(
-  updateSearchKey: (searchKey: string) => void,
-  visibleNodesGenerator: VisibleNodesGenerator | null,
-) {
-  const { restoreExpandedFolders } = useConfigs().value
-  return React.useCallback(
-    (searchKey: string, searchMode: SearchMode) => {
-      updateSearchKey(searchKey)
-      if (visibleNodesGenerator) {
-        visibleNodesGenerator.search(
-          searchModes[searchMode].getSearchParams(searchKey),
-          restoreExpandedFolders,
-        )
-      }
-    },
-    [updateSearchKey, visibleNodesGenerator, restoreExpandedFolders],
-  )
-}
-
-function useRenderLabelText(searchKey: string) {
-  const { searchMode } = useConfigs().value
-  return React.useCallback(
-    (node: TreeNode) => searchModes[searchMode].renderNodeLabelText(node, searchKey),
-    [searchKey, searchMode],
-  )
-}
-
-const RawFileExplorer: React.FC<Props & ConnectorState> = function RawFileExplorer({
-  visibleNodes,
-  visibleNodesGenerator,
-  freeze,
-  onNodeClick,
-  searchKey,
-  updateSearchKey,
-  onFocusSearchBar,
-  goTo,
-  handleKeyDown,
-  metaData,
-  expandTo,
-  setUpTree,
-  defer,
-  searched,
-}) {
-  useSetupTree(setUpTree, metaData)
-  useFocusFileExplorerOnFirstRender()
+export function FileExplorer({ freeze, metaData }: Props) {
+  const visibleNodesGenerator = useVisibleNodesGenerator(metaData)
+  const visibleNodes = useVisibleNodes(visibleNodesGenerator)
 
+  const [searchKey, updateSearchKey] = React.useState('')
+  const searched = !!searchKey
   const onSearch = useOnSearch(updateSearchKey, visibleNodesGenerator)
+
+  const getCurrentPath = useGetCurrentPath(metaData)
+  const methods = useVisibleNodesGeneratorMethods(
+    visibleNodesGenerator,
+    getCurrentPath,
+    updateSearchKey,
+  )
+  const { expandTo, goTo, focusNode } = methods
+  const handleNodeClick = useHandleNodeClick(methods)
+  const handleKeyDown = useHandleKeyDown(visibleNodes, methods, searched)
+  const handleFocusSearchBar = () => focusNode(null)
+
   const renderActions = useNodeRenderers([
     useRenderGoToButton(searched, goTo),
     useRenderFindInFolderButton(onSearch),
     useRenderFileCommentAmounts(),
     useRenderFileStatus(),
   ])
-
   const renderLabelText = useRenderLabelText(searchKey)
 
-  const nodeRendererContext: NodeRendererContext | null = React.useMemo(
-    () =>
-      visibleNodes && {
-        onNodeClick,
-        renderActions,
-        renderLabelText,
-        visibleNodes,
-      },
-    [onNodeClick, renderActions, renderLabelText, visibleNodes],
+  const nodeRendererContext = useNodeRenderContext(
+    visibleNodes,
+    handleNodeClick,
+    renderActions,
+    renderLabelText,
   )
 
   const alignMode = useReactWindowAlignMode(searched)
   const state = useLoadedContext(SideBarStateContext).value
+  useFocusFileExplorerOnFirstRender()
 
   return (
     <div className={cx(`file-explorer`, { freeze })} tabIndex={-1} onKeyDown={handleKeyDown}>
@@ -155,7 +92,7 @@ const RawFileExplorer: React.FC<Props & ConnectorState> = function RawFileExplor
               visibleNodes &&
               nodeRendererContext && (
                 <>
-                  {defer && (
+                  {visibleNodesGenerator?.defer && (
                     <div className={'status'}>
                       <Label
                         title="This repository is large. Gitako has switched to Lazy Mode to improve performance. Folders will be loaded when it gets expanded."
@@ -166,13 +103,13 @@ const RawFileExplorer: React.FC<Props & ConnectorState> = function RawFileExplor
                       </Label>
                     </div>
                   )}
-                  <SearchBar value={searchKey} onSearch={onSearch} onFocus={onFocusSearchBar} />
+                  <SearchBar value={searchKey} onSearch={onSearch} onFocus={handleFocusSearchBar} />
                   {searched && visibleNodes.nodes.length === 0 && (
                     <>
                       <Text marginTop={6} textAlign="center" color="text.gray">
                         No results found.
                       </Text>
-                      {defer && (
+                      {visibleNodesGenerator?.defer && (
                         <Text textAlign="center" color="gray.4" fontSize="12px">
                           Search results are limited to loaded folders in Lazy Mode.
                         </Text>
@@ -188,7 +125,7 @@ const RawFileExplorer: React.FC<Props & ConnectorState> = function RawFileExplor
                           nodeRendererContext={nodeRendererContext}
                           expandTo={expandTo}
                           metaData={metaData}
-                          scrollMode={alignMode.value}
+                          alignMode={alignMode}
                         />
                       </div>
                     )}
@@ -201,11 +138,3 @@ const RawFileExplorer: React.FC<Props & ConnectorState> = function RawFileExplor
     </div>
   )
 }
-
-RawFileExplorer.defaultProps = {
-  freeze: false,
-  searchKey: '',
-  visibleNodes: null,
-}
-
-export const FileExplorer = connect(FileExplorerCore)(RawFileExplorer)
diff --git a/src/components/FileExplorer/useVisibleNodes.tsx b/src/components/FileExplorer/useVisibleNodes.tsx
new file mode 100644
index 0000000..f5b1841
--- /dev/null
+++ b/src/components/FileExplorer/useVisibleNodes.tsx
@@ -0,0 +1,8 @@
+import { useEffect, useState } from 'react'
+import { VisibleNodes, VisibleNodesGenerator } from 'utils/VisibleNodesGenerator'
+
+export function useVisibleNodes(visibleNodesGenerator: VisibleNodesGenerator | null) {
+  const [visibleNodes, setVisibleNodes] = useState<VisibleNodes | null>(null)
+  useEffect(() => visibleNodesGenerator?.onUpdate(setVisibleNodes), [visibleNodesGenerator])
+  return visibleNodes
+}
diff --git a/src/components/SideBar.tsx b/src/components/SideBar.tsx
index f17f11d..185d580 100644
--- a/src/components/SideBar.tsx
+++ b/src/components/SideBar.tsx
@@ -11,7 +11,6 @@ import * as React from 'react'
 import { cx } from 'utils/cx'
 import * as DOMHelper from 'utils/DOMHelper'
 import { detectBrowser, run } from 'utils/general'
-import { useCatchNetworkError } from 'utils/hooks/useCatchNetworkError'
 import { useLoadedContext } from 'utils/hooks/useLoadedContext'
 import { useOnPJAXDone, usePJAX } from 'utils/hooks/usePJAX'
 import { useStateIO } from 'utils/hooks/useStateIO'
@@ -21,7 +20,6 @@ import { SideBarStateContext } from '../containers/SideBarState'
 import { Theme } from '../containers/Theme'
 import { useToggleSideBarWithKeyboard } from '../utils/hooks/useToggleSideBarWithKeyboard'
 import { Icon } from './Icon'
-import { IIFC } from './IIFC'
 import { LoadingIndicator } from './LoadingIndicator'
 import { SettingsBarContent } from './settings/SettingsBar'
 
@@ -189,21 +187,7 @@ export function SideBar() {
                   case 'error-due-to-auth':
                     return <AccessDeniedDescription />
                   default:
-                    return (
-                      metaData && (
-                        <IIFC>
-                          {() => (
-                            <FileExplorer
-                              metaData={metaData}
-                              freeze={showSettings}
-                              accessToken={accessToken}
-                              config={configContext.value}
-                              catchNetworkErrors={useCatchNetworkError()}
-                            />
-                          )}
-                        </IIFC>
-                      )
-                    )
+                    return metaData && <FileExplorer metaData={metaData} freeze={showSettings} />
                 }
               })}
             </div>
diff --git a/src/components/settings/AccessTokenSettings.tsx b/src/components/settings/AccessTokenSettings.tsx
index 3f142fa..e26980c 100644
--- a/src/components/settings/AccessTokenSettings.tsx
+++ b/src/components/settings/AccessTokenSettings.tsx
@@ -15,21 +15,21 @@ type Props = {}
 export function AccessTokenSettings(props: React.PropsWithChildren<Props>) {
   const configContext = useConfigs()
   const hasAccessToken = Boolean(configContext.value.accessToken)
-  const useAccessToken = useStateIO('')
+  const $useAccessToken = useStateIO('')
   const useAccessTokenHint = useStateIO<React.ReactNode>('')
   const focusInput = useStateIO(false)
 
   const { value: accessTokenHint } = useAccessTokenHint
-  const { value: accessToken } = useAccessToken
+  const { value: accessToken } = $useAccessToken
 
   React.useEffect(() => {
     // clear input when access token updates
-    useAccessToken.onChange('')
+    $useAccessToken.onChange('')
   }, [configContext.value.accessToken])
 
   const onInputAccessToken = React.useCallback(
     ({ currentTarget: { value } }: React.FormEvent<HTMLInputElement>) => {
-      useAccessToken.onChange(value)
+      $useAccessToken.onChange(value)
       useAccessTokenHint.onChange(
         ACCESS_TOKEN_REGEXP.test(value) ? '' : 'Gitako does not recognize the token.',
       )
@@ -50,7 +50,7 @@ export function AccessTokenSettings(props: React.PropsWithChildren<Props>) {
     ) => {
       if (accessToken) {
         configContext.onChange({ accessToken })
-        useAccessToken.onChange('')
+        $useAccessToken.onChange('')
         useAccessTokenHint.onChange(hint)
       }
     },
diff --git a/src/driver/core/FileExplorer.ts b/src/driver/core/FileExplorer.ts
deleted file mode 100644
index 5498a97..0000000
--- a/src/driver/core/FileExplorer.ts
+++ /dev/null
@@ -1,355 +0,0 @@
-import { SideBarStateContextShape } from 'containers/SideBarState'
-import { GetCreatedMethod, MethodCreator } from 'driver/connect'
-import { platform } from 'platforms'
-import { Config } from 'utils/config/helper'
-import * as DOMHelper from 'utils/DOMHelper'
-import { isOpenInNewWindowClick, OperatingSystems, os } from 'utils/general'
-import { loadWithPJAX } from 'utils/hooks/usePJAX'
-import { VisibleNodes, VisibleNodesGenerator } from 'utils/VisibleNodesGenerator'
-
-export type Props = {
-  metaData: MetaData
-  freeze: boolean
-  accessToken: string | undefined
-  config: Config
-  catchNetworkErrors: <T>(fn: () => T) => Promise<T | undefined>
-}
-
-export type ConnectorState = {
-  visibleNodesGenerator: VisibleNodesGenerator | null
-  visibleNodes: VisibleNodes | null
-  searchKey: string
-  searched: boolean // derived state from searchKey, = !!searchKey
-  defer: boolean
-
-  handleKeyDown: GetCreatedMethod<typeof handleKeyDown>
-  updateSearchKey: GetCreatedMethod<typeof updateSearchKey>
-  onNodeClick: GetCreatedMethod<typeof onNodeClick>
-  onFocusSearchBar: GetCreatedMethod<typeof onFocusSearchBar>
-  setUpTree: GetCreatedMethod<typeof setUpTree>
-  goTo: GetCreatedMethod<typeof goTo>
-  expandTo: GetCreatedMethod<typeof expandTo>
-}
-
-function getVisibleParentNode(nodes: TreeNode[], focusedNode: TreeNode) {
-  let index = nodes.findIndex(node => node.path === focusedNode.path) - 1
-  while (index >= 0) {
-    if (nodes[index].contents?.includes(focusedNode)) {
-      return nodes[index]
-    }
-    --index
-  }
-}
-
-type BoundMethodCreator<Args extends any[] = []> = MethodCreator<Props, ConnectorState, Args>
-
-export const setUpTree: BoundMethodCreator<
-  [
-    { stateContext: SideBarStateContextShape } & Required<Pick<Props, 'metaData'>> & {
-        config: Pick<Config, 'compressSingletonFolder' | 'accessToken'>
-      },
-    () => boolean,
-  ]
-> =
-  dispatch =>
-  ({ stateContext, metaData, config }, checker) => {
-    const {
-      props: { catchNetworkErrors },
-    } = dispatch.get()
-
-    catchNetworkErrors(async () => {
-      const { userName, repoName, branchName } = metaData
-
-      if (!checker()) return
-      stateContext.onChange('tree-loading')
-
-      const { root: treeRoot, defer = false } = await platform.getTreeData(
-        {
-          branchName,
-          userName,
-          repoName,
-        },
-        '/',
-        true,
-        config.accessToken,
-      )
-
-      if (!checker()) return
-      stateContext.onChange('tree-rendering')
-      dispatch.set({ defer })
-
-      const visibleNodesGenerator = new VisibleNodesGenerator({
-        root: treeRoot,
-        compress: config.compressSingletonFolder,
-        async getTreeData(path) {
-          const { root } = await platform.getTreeData(metaData, path, false, config.accessToken)
-          return root
-        },
-      })
-
-      if (!checker()) return
-      dispatch.set({ visibleNodesGenerator })
-
-      visibleNodesGenerator.onUpdate(visibleNodes => {
-        if (!checker()) return
-        dispatch.set({ visibleNodes })
-      })
-
-      if (platform.shouldExpandAll?.()) {
-        const unsubscribe = visibleNodesGenerator.onUpdate(visibleNodes => {
-          unsubscribe()
-          visibleNodes.nodes.forEach(node => {
-            if (!checker()) return
-            dispatch.call(toggleNodeExpansion, node, { recursive: true })
-          })
-        })
-      } else {
-        const targetPath = platform.getCurrentPath(metaData.branchName)
-        if (targetPath && checker()) dispatch.call(goTo, targetPath)
-      }
-
-      if (!checker()) return
-      stateContext.onChange('tree-rendered')
-    })
-  }
-
-export const handleKeyDown: BoundMethodCreator<[React.KeyboardEvent<HTMLElement>]> =
-  dispatch => event => {
-    const {
-      state: { searched, visibleNodes },
-    } = dispatch.get()
-    if (!visibleNodes) return
-    const { nodes, focusedNode, expandedNodes } = visibleNodes
-    function handleVerticalMove(index: number) {
-      if (0 <= index && index < nodes.length) {
-        DOMHelper.focusFileExplorer()
-        dispatch.call(focusNode, nodes[index])
-      } else {
-        DOMHelper.focusSearchInput()
-        dispatch.call(focusNode, null)
-      }
-    }
-
-    const { key } = event
-    // prevent document body scrolling if the keypress results in Gitako action
-    let muteEvent = true
-    if (focusedNode) {
-      const focusedNodeIndex = nodes.findIndex(node => node.path === focusedNode.path)
-      switch (key) {
-        case 'ArrowUp':
-          // focus on previous node
-          handleVerticalMove(focusedNodeIndex - 1)
-          break
-
-        case 'ArrowDown':
-          // focus on next node
-          handleVerticalMove(focusedNodeIndex + 1)
-          break
-
-        case 'ArrowLeft':
-          if (wouldBlockHistoryNavigation(event)) {
-            muteEvent = false
-            break
-          }
-          if (expandedNodes.has(focusedNode.path)) {
-            dispatch.call(toggleNodeExpansion, focusedNode, { recursive: event.altKey })
-          } else {
-            // go forward to the start of the list, find the closest node with lower depth
-            const parentNode = getVisibleParentNode(nodes, focusedNode)
-            if (parentNode) {
-              dispatch.call(focusNode, parentNode)
-            }
-          }
-          break
-
-        // consider the two keys as 'confirm' key
-        case 'ArrowRight':
-          if (wouldBlockHistoryNavigation(event)) {
-            muteEvent = false
-            break
-          }
-          // expand node or focus on first content node or redirect to file page
-          if (focusedNode.type === 'tree') {
-            if (expandedNodes.has(focusedNode.path)) {
-              const nextNode = nodes[focusedNodeIndex + 1]
-              if (focusedNode.contents?.includes(nextNode)) {
-                dispatch.call(focusNode, nextNode)
-              }
-            } else {
-              dispatch.call(toggleNodeExpansion, focusedNode, { recursive: event.altKey })
-            }
-          } else if (focusedNode.type === 'blob') {
-            const focusedNodeElement = DOMHelper.findNodeElement(focusedNode, event.currentTarget)
-            if (focusedNodeElement && focusedNode.url)
-              loadWithPJAX(focusedNode.url, focusedNodeElement)
-          } else if (focusedNode.type === 'commit') {
-            window.open(focusedNode.url)
-          }
-          break
-        case 'Enter':
-          // expand node or redirect to file page
-          if (searched) {
-            dispatch.call(goTo, focusedNode.path.split('/'))
-          } else {
-            if (focusedNode.type === 'tree') {
-              dispatch.call(toggleNodeExpansion, focusedNode, { recursive: event.altKey })
-            } else if (focusedNode.type === 'blob') {
-              const focusedNodeElement = DOMHelper.findNodeElement(focusedNode, event.currentTarget)
-              if (focusedNodeElement && focusedNode.url)
-                loadWithPJAX(focusedNode.url, focusedNodeElement)
-            } else if (focusedNode.type === 'commit') {
-              window.open(focusedNode.url)
-            }
-          }
-          break
-        default:
-          muteEvent = false
-      }
-      if (muteEvent) {
-        event.preventDefault()
-      }
-    } else {
-      // now search input is focused
-      if (nodes.length) {
-        switch (key) {
-          case 'ArrowDown':
-            DOMHelper.focusFileExplorer()
-            dispatch.call(focusNode, nodes[0])
-            break
-          case 'ArrowUp':
-            DOMHelper.focusFileExplorer()
-            dispatch.call(focusNode, nodes[nodes.length - 1])
-            break
-          default:
-            muteEvent = false
-        }
-        if (muteEvent) {
-          event.preventDefault()
-        }
-      }
-    }
-  }
-
-export const onFocusSearchBar: BoundMethodCreator = dispatch => () => dispatch.call(focusNode, null)
-
-export const updateSearchKey: BoundMethodCreator<[string]> = dispatch => searchKey => {
-  dispatch.set({ searchKey, searched: searchKey !== '' })
-}
-
-export const goTo: BoundMethodCreator<[string[]]> = dispatch => path => {
-  const {
-    state: { visibleNodesGenerator },
-  } = dispatch.get()
-  if (!visibleNodesGenerator) return
-
-  dispatch.call(updateSearchKey, '')
-  visibleNodesGenerator.search(null)
-  visibleNodesGenerator.onNextUpdate(() => {
-    dispatch.call(expandTo, path)
-  })
-}
-
-export const setExpand: BoundMethodCreator<[TreeNode, boolean]> =
-  dispatch =>
-  async (node, expand = false) => {
-    const {
-      state: { visibleNodesGenerator },
-    } = dispatch.get()
-    if (!visibleNodesGenerator) return
-
-    await visibleNodesGenerator.setExpand(node, expand)
-    dispatch.call(focusNode, node)
-  }
-
-export const toggleNodeExpansion: BoundMethodCreator<
-  [
-    TreeNode,
-    {
-      recursive?: boolean
-    },
-  ]
-> =
-  dispatch =>
-  async (node, { recursive = false }) => {
-    const {
-      state: { visibleNodesGenerator },
-    } = dispatch.get()
-    if (!visibleNodesGenerator) return
-
-    if (node.type === 'tree') {
-      visibleNodesGenerator.focusNode(node)
-      await visibleNodesGenerator.toggleExpand(node, recursive)
-    }
-  }
-
-export const focusNode: BoundMethodCreator<[TreeNode | null]> =
-  dispatch => (node: TreeNode | null) => {
-    const {
-      state: { visibleNodesGenerator },
-    } = dispatch.get()
-    if (!visibleNodesGenerator) return
-
-    visibleNodesGenerator.focusNode(node)
-  }
-
-export const onNodeClick: BoundMethodCreator<
-  [React.MouseEvent<HTMLElement, MouseEvent>, TreeNode]
-> = dispatch => (event, node) => {
-  switch (node.type) {
-    case 'tree': {
-      const {
-        props: {
-          config: { recursiveToggleFolder },
-        },
-      } = dispatch.get()
-      const recursive =
-        (recursiveToggleFolder === 'shift' && event.shiftKey) ||
-        (recursiveToggleFolder === 'alt' && event.altKey)
-      // recursive toggle action may conflict with browser default action
-      // e.g. shift + click is the default open in new tab action on macOS
-      // giving recursive toggle action higher priority than default action
-      if (!recursive && isOpenInNewWindowClick(event)) return
-
-      event.preventDefault()
-      dispatch.call(toggleNodeExpansion, node, { recursive })
-      break
-    }
-    case 'blob': {
-      if (isOpenInNewWindowClick(event)) return
-
-      dispatch.call(focusNode, node)
-      if (node.url) {
-        const isHashLink = node.url.includes('#')
-        if (!isHashLink) {
-          event.preventDefault()
-          loadWithPJAX(node.url, event.currentTarget)
-        }
-      }
-      break
-    }
-    case 'commit': {
-      // pass event, open in new tab thanks to the target="_blank" on the anchor element
-    }
-  }
-}
-
-export const expandTo: BoundMethodCreator<[string[]]> = dispatch => async currentPath => {
-  const {
-    state: { visibleNodesGenerator },
-  } = dispatch.get()
-  if (!visibleNodesGenerator) return
-
-  const nodeExpandedTo = await visibleNodesGenerator.expandTo(currentPath.join('/'))
-  if (nodeExpandedTo) {
-    visibleNodesGenerator.focusNode(nodeExpandedTo)
-  }
-}
-
-function wouldBlockHistoryNavigation(event: React.KeyboardEvent) {
-  // Cmd + left/right on macOS
-  // Alt + left/right on other OSes
-  return (
-    (os === OperatingSystems.macOS && event.metaKey) ||
-    (os !== OperatingSystems.macOS && event.altKey)
-  )
-}
diff --git a/src/driver/core/index.ts b/src/driver/core/index.ts
deleted file mode 100644
index dd80f10..0000000
--- a/src/driver/core/index.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { Sources } from 'driver/connect'
-import * as FileExplorer from './FileExplorer'
-import {
-  ConnectorState as FileExplorerConnectorState,
-  Props as FileExplorerProps,
-} from './FileExplorer'
-
-export const FileExplorerCore: Sources<FileExplorerProps, FileExplorerConnectorState> = FileExplorer
diff --git a/src/utils/VisibleNodesGenerator/index.ts b/src/utils/VisibleNodesGenerator/index.ts
index 67803e7..ae1202a 100644
--- a/src/utils/VisibleNodesGenerator/index.ts
+++ b/src/utils/VisibleNodesGenerator/index.ts
@@ -80,15 +80,17 @@ class BaseLayer {
   baseRoot: TreeNode
   getTreeData: (path: string) => Async<TreeNode>
   loading: Set<TreeNode['path']> = new Set()
+  defer: boolean
 
   baseHub = new EventHub<{
     emit: BaseLayer['baseRoot']
     loadingChange: BaseLayer['loading']
   }>()
 
-  constructor({ root, getTreeData }: Options) {
+  constructor({ root, getTreeData, defer = false }: Options) {
     this.baseRoot = root
     this.getTreeData = getTreeData
+    this.defer = defer
   }
 
   loadTreeData = async (path: string) => {
@@ -320,6 +322,7 @@ class FlattenLayer extends CompressLayer {
 
 type Options = {
   root: BaseLayer['baseRoot']
+  defer?: BaseLayer['defer']
   getTreeData: BaseLayer['getTreeData']
   compress: CompressLayer['compress']
 }
diff --git a/src/utils/hooks/useSequentialEffect.ts b/src/utils/hooks/useSequentialEffect.ts
index 3b7497f..581fa19 100644
--- a/src/utils/hooks/useSequentialEffect.ts
+++ b/src/utils/hooks/useSequentialEffect.ts
@@ -1,4 +1,4 @@
-import { useEffect, useRef } from 'react'
+import { useEffect } from 'react'
 
 /**
  * This effect addresses such a problem:
@@ -6,14 +6,15 @@ import { useEffect, useRef } from 'react'
  */
 export function useSequentialEffect(
   effect: (checker: () => boolean) => (() => void | undefined) | void,
-  deps: React.DependencyList = [],
 ) {
-  const sequenceCounter = useRef(0)
   useEffect(() => {
-    // The counter is incremented every time a new effect is added.
-    // And the previous effect should stop going forward by finding checker returning false.
-    const counter = ++sequenceCounter.current
-    const checker = () => counter === sequenceCounter.current
-    return effect(checker)
-  }, deps)
+    // The previous effect should stop running when finding checker returning false.
+    let valid = true
+    const checker = () => valid
+    const defect = effect(checker)
+    return () => {
+      valid = false
+      defect?.()
+    }
+  }, [effect])
 }

From 850ea5a64af008df66865b561f9d6d88c3f940e3 Mon Sep 17 00:00:00 2001
From: EnixCoda <enixcoda@gmail.com>
Date: Sun, 15 May 2022 12:09:28 +0800
Subject: [PATCH 18/93] chore: deprecate show diff in text

---
 src/components/FileExplorer/hooks/useNodeRenderers.tsx | 4 +---
 src/components/settings/FileTreeSettings.tsx           | 7 -------
 src/utils/config/helper.ts                             | 3 ---
 3 files changed, 1 insertion(+), 13 deletions(-)

diff --git a/src/components/FileExplorer/hooks/useNodeRenderers.tsx b/src/components/FileExplorer/hooks/useNodeRenderers.tsx
index eb51563..7b5c9df 100644
--- a/src/components/FileExplorer/hooks/useNodeRenderers.tsx
+++ b/src/components/FileExplorer/hooks/useNodeRenderers.tsx
@@ -4,7 +4,6 @@ import { isNotFalsy } from 'utils/general'
 import { Icon } from '../../Icon'
 import { SearchMode } from '../../searchModes'
 import { DiffStatGraph } from './../DiffStatGraph'
-import { DiffStatText } from './../DiffStatText'
 
 export type NodeRenderer = (node: TreeNode) => React.ReactNode
 
@@ -26,12 +25,11 @@ export function useRenderFileStatus() {
           className={'node-item-diff'}
           title={`${diff.status}, ${diff.changes} changes: +${diff.additions} & -${diff.deletions}`}
         >
-          {showDiffInText ? <DiffStatText diff={diff} /> : <DiffStatGraph diff={diff} />}
+          <DiffStatGraph diff={diff} />
         </span>
       )
     )
   }
-  const { showDiffInText } = useConfigs().value
   return React.useMemo(() => renderFileStatus, [])
 }
 
diff --git a/src/components/settings/FileTreeSettings.tsx b/src/components/settings/FileTreeSettings.tsx
index 25c823e..3b79af5 100644
--- a/src/components/settings/FileTreeSettings.tsx
+++ b/src/components/settings/FileTreeSettings.tsx
@@ -90,13 +90,6 @@ export function FileTreeSettings(props: React.PropsWithChildren<Props>) {
           tooltip: 'Show number of comments next to file names in Pull Requests.',
         }}
       />
-      <SimpleToggleField
-        field={{
-          key: 'showDiffInText',
-          label: 'Show PR file diff in text',
-          tooltip: 'Glance diff in a more precise way.',
-        }}
-      />
       <SimpleToggleField
         field={{
           key: 'compactFileTree',
diff --git a/src/utils/config/helper.ts b/src/utils/config/helper.ts
index d643876..14bb299 100644
--- a/src/utils/config/helper.ts
+++ b/src/utils/config/helper.ts
@@ -19,7 +19,6 @@ export type Config = {
   codeFolding: boolean
   compactFileTree: boolean
   restoreExpandedFolders: boolean
-  showDiffInText: boolean
 }
 
 enum configKeys {
@@ -39,7 +38,6 @@ enum configKeys {
   codeFolding = 'codeFolding',
   compactFileTree = 'compactFileTree',
   restoreExpandedFolders = 'restoreExpandedFolders',
-  showDiffInText = 'showDiffInText',
 }
 
 // do NOT use platform name
@@ -62,7 +60,6 @@ export const defaultConfigs: Config = {
   codeFolding: true,
   compactFileTree: false,
   restoreExpandedFolders: true,
-  showDiffInText: false,
 }
 
 const configKeyArray = Object.values(configKeys)

From 77d9db6043525be54aeaa46d604c5911230201ad Mon Sep 17 00:00:00 2001
From: EnixCoda <enixcoda@gmail.com>
Date: Mon, 16 May 2022 00:23:20 +0800
Subject: [PATCH 19/93] lint: resolve lint issues

---
 package.json                                  |  8 ++++++-
 src/components/Clippy.tsx                     |  6 ++---
 src/components/FileExplorer/DiffStatText.tsx  |  2 +-
 src/components/FileExplorer/ListView.tsx      |  4 ++--
 src/components/FileExplorer/Node.tsx          |  3 ++-
 .../FileExplorer/hooks/useNodeRenderers.tsx   |  2 +-
 .../hooks/useOnVisibleNodesGeneratorReady.tsx |  4 +++-
 .../FileExplorer/hooks/useSetupTree.tsx       |  3 ++-
 src/components/FileExplorer/index.tsx         |  6 ++---
 src/components/IIFC.tsx                       |  8 -------
 src/components/SelectInput.tsx                |  2 +-
 src/components/SideBar.tsx                    | 23 +++++++++---------
 src/components/SideBarBodyWrapper.tsx         | 24 +++++++++++--------
 src/components/SimpleToggleField.tsx          |  7 +++++-
 src/components/SizeObserver.tsx               | 18 +++++---------
 src/components/ToggleShowButton.tsx           |  2 +-
 src/components/searchModes/fuzzyMode.test.ts  |  4 +++-
 src/components/searchModes/fuzzyMode.tsx      |  2 +-
 .../settings/AccessTokenSettings.tsx          | 18 +++++++-------
 src/components/settings/FileTreeSettings.tsx  |  4 +---
 src/components/settings/Footer.tsx            |  3 ++-
 src/components/settings/SettingsBar.tsx       | 12 ++++++++--
 src/components/settings/SidebarSettings.tsx   |  8 +++----
 src/platforms/Gitee/components.tsx            | 12 ++++++++--
 24 files changed, 101 insertions(+), 84 deletions(-)
 delete mode 100644 src/components/IIFC.tsx

diff --git a/package.json b/package.json
index 674bcaa..b07075f 100644
--- a/package.json
+++ b/package.json
@@ -96,6 +96,9 @@
   },
   "eslintConfig": {
     "root": true,
+    "env": {
+      "browser": true
+    },
     "parser": "@typescript-eslint/parser",
     "plugins": [
       "@typescript-eslint"
@@ -105,7 +108,10 @@
       "plugin:@typescript-eslint/recommended",
       "plugin:react/recommended",
       "plugin:react-hooks/recommended"
-    ]
+    ],
+    "rules": {
+      "@typescript-eslint/ban-types": "off"
+    }
   },
   "resolutions": {
     "@types/react": "^18.0.9",
diff --git a/src/components/Clippy.tsx b/src/components/Clippy.tsx
index 2508ade..53038fa 100644
--- a/src/components/Clippy.tsx
+++ b/src/components/Clippy.tsx
@@ -25,13 +25,13 @@ export function Clippy({ codeSnippetElement }: Props) {
   React.useEffect(() => {
     const element = elementRef.current
     if (element) {
-      function onClippyClick() {
+      const onClippyClick = () =>
         setState(copyElementContent(codeSnippetElement) ? 'success' : 'fail')
-      }
+
       element.addEventListener('click', onClippyClick)
       return () => element.removeEventListener('click', onClippyClick)
     }
-  }, [])
+  }, [codeSnippetElement])
 
   return (
     <div className={className}>
diff --git a/src/components/FileExplorer/DiffStatText.tsx b/src/components/FileExplorer/DiffStatText.tsx
index 338535d..bcf5e39 100644
--- a/src/components/FileExplorer/DiffStatText.tsx
+++ b/src/components/FileExplorer/DiffStatText.tsx
@@ -2,7 +2,7 @@ import * as React from 'react'
 import { Icon } from '../Icon'
 
 export function DiffStatText({
-  diff: { status, changes, additions, deletions },
+  diff: { status, additions, deletions },
 }: {
   diff: Required<TreeNode>['diff']
 }) {
diff --git a/src/components/FileExplorer/ListView.tsx b/src/components/FileExplorer/ListView.tsx
index 80aa362..ec55af2 100644
--- a/src/components/FileExplorer/ListView.tsx
+++ b/src/components/FileExplorer/ListView.tsx
@@ -44,7 +44,7 @@ export function ListView({
   const goToCurrentItem = React.useCallback(() => {
     const targetPath = platform.getCurrentPath(metaData.branchName)
     if (targetPath) expandTo(targetPath)
-  }, [metaData.branchName])
+  }, [metaData.branchName, expandTo])
 
   useOnLocationChange(goToCurrentItem)
   useOnPJAXDone(goToCurrentItem)
@@ -52,7 +52,7 @@ export function ListView({
   const { compactFileTree } = useConfigs().value
 
   return (
-    <FixedSizeList
+    <FixedSizeList<NodeRendererContext>
       ref={listRef}
       itemKey={(index, { visibleNodes }) => visibleNodes?.nodes[index]?.path}
       itemData={nodeRendererContext}
diff --git a/src/components/FileExplorer/Node.tsx b/src/components/FileExplorer/Node.tsx
index e788791..45f5a25 100644
--- a/src/components/FileExplorer/Node.tsx
+++ b/src/components/FileExplorer/Node.tsx
@@ -47,6 +47,7 @@ export function Node({
       style={{ ...style, paddingLeft: `${10 + (compact ? 10 : 20) * depth}px` }}
       title={node.path}
       target={node.type === 'commit' ? '_blank' : undefined}
+      rel="noopener noreferrer"
       {...platform.delegatePJAXProps?.({ node })}
     >
       <div className={'node-item-label'}>
@@ -71,7 +72,7 @@ const NodeItemIcon = React.memo(function NodeItemIcon({
 
   const src = React.useMemo(
     () => (node.type === 'tree' ? getFolderIconURL(node, open) : getFileIconURL(node)),
-    [open],
+    [node, open],
   )
 
   if (icons === 'native') return <Icon type={getIconType(node)} />
diff --git a/src/components/FileExplorer/hooks/useNodeRenderers.tsx b/src/components/FileExplorer/hooks/useNodeRenderers.tsx
index 7b5c9df..08bf1e9 100644
--- a/src/components/FileExplorer/hooks/useNodeRenderers.tsx
+++ b/src/components/FileExplorer/hooks/useNodeRenderers.tsx
@@ -14,7 +14,7 @@ export function useNodeRenderers(allRenderers: (NodeRenderer | null | undefined)
       ? (node: TreeNode) =>
           renderers.map((render, i) => <React.Fragment key={i}>{render(node)}</React.Fragment>)
       : undefined
-  }, allRenderers)
+  }, allRenderers) // eslint-disable-line react-hooks/exhaustive-deps
 }
 
 export function useRenderFileStatus() {
diff --git a/src/components/FileExplorer/hooks/useOnVisibleNodesGeneratorReady.tsx b/src/components/FileExplorer/hooks/useOnVisibleNodesGeneratorReady.tsx
index 16cc3e5..81e858c 100644
--- a/src/components/FileExplorer/hooks/useOnVisibleNodesGeneratorReady.tsx
+++ b/src/components/FileExplorer/hooks/useOnVisibleNodesGeneratorReady.tsx
@@ -15,6 +15,8 @@ export function useVisibleNodesGeneratorMethods(
   const goTo = useGoTo(visibleNodesGenerator, updateSearchKey, expandTo)
   const toggleExpansion = useToggleExpansion(visibleNodesGenerator)
   const focusNode = useFocusNode(visibleNodesGenerator)
+
+  // Only run when visibleNodesGenerator changes
   useEffect(() => {
     if (!visibleNodesGenerator) return
 
@@ -26,7 +28,7 @@ export function useVisibleNodesGeneratorMethods(
       const targetPath = getCurrentPath()
       if (targetPath) goTo(targetPath)
     }
-  }, [visibleNodesGenerator])
+  }, [visibleNodesGenerator]) // eslint-disable-line react-hooks/exhaustive-deps
 
   return {
     expandTo,
diff --git a/src/components/FileExplorer/hooks/useSetupTree.tsx b/src/components/FileExplorer/hooks/useSetupTree.tsx
index f830885..521b429 100644
--- a/src/components/FileExplorer/hooks/useSetupTree.tsx
+++ b/src/components/FileExplorer/hooks/useSetupTree.tsx
@@ -17,6 +17,7 @@ export function useVisibleNodesGenerator(metaData: MetaData) {
   const accessToken = config.accessToken
   const setStateContext = useLoadedContext(SideBarStateContext).onChange
 
+  // Only run when metadata or accessToken changes
   useSequentialEffect(
     useCallback(
       checker => {
@@ -54,7 +55,7 @@ export function useVisibleNodesGenerator(metaData: MetaData) {
           setStateContext('tree-rendered')
         })
       },
-      [metaData, accessToken],
+      [metaData, accessToken], // eslint-disable-line react-hooks/exhaustive-deps
     ),
   )
 
diff --git a/src/components/FileExplorer/index.tsx b/src/components/FileExplorer/index.tsx
index bc85622..e4fe6d0 100644
--- a/src/components/FileExplorer/index.tsx
+++ b/src/components/FileExplorer/index.tsx
@@ -116,9 +116,9 @@ export function FileExplorer({ freeze, metaData }: Props) {
                       )}
                     </>
                   )}
-                  <SizeObserver className={'files'}>
-                    {({ width = 0, height = 0 }) => (
-                      <div className={'magic-size-container'}>
+                  <SizeObserver<HTMLDivElement>>
+                    {({ width = 0, height = 0 }, ref) => (
+                      <div className={'files'} ref={ref}>
                         <ListView
                           height={height}
                           width={width}
diff --git a/src/components/IIFC.tsx b/src/components/IIFC.tsx
deleted file mode 100644
index 6a57b87..0000000
--- a/src/components/IIFC.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import * as React from 'react'
-
-// I tried to install `react-iifc` but that causes TS build errors for unknown reason
-// So here the duplicated code is
-
-export function IIFC({ children }: { children(): React.ReactNode }) {
-  return <>{children()}</>
-}
diff --git a/src/components/SelectInput.tsx b/src/components/SelectInput.tsx
index 48479a4..ff3a130 100644
--- a/src/components/SelectInput.tsx
+++ b/src/components/SelectInput.tsx
@@ -16,7 +16,7 @@ export function SelectInput<T>({
         onChange={e => {
           const key = e.target.value
           const option = options.find(option => option.key === key)
-          onChange(option!?.value)
+          if (option) onChange(option.value)
         }}
         value={options.find(option => option.value === value)?.key}
         {...selectProps}
diff --git a/src/components/SideBar.tsx b/src/components/SideBar.tsx
index 185d580..00c193c 100644
--- a/src/components/SideBar.tsx
+++ b/src/components/SideBar.tsx
@@ -31,9 +31,8 @@ export function SideBar() {
   const accessToken = configContext.value.accessToken || ''
   const [baseSize] = React.useState(() => configContext.value.sideBarWidth)
 
-  const $showSettings = useStateIO(false)
-  const showSettings = $showSettings.value
-  const toggleShowSettings = React.useCallback(() => $showSettings.onChange(show => !show), [])
+  const [showSettings, setShowSettings] = React.useState(false)
+  const toggleShowSettings = React.useCallback(() => setShowSettings(show => !show), [])
 
   const $logoContainerElement = useStateIO<HTMLElement | null>(null)
 
@@ -41,12 +40,12 @@ export function SideBar() {
   React.useEffect(() => {
     if (hasMetaData) {
       DOMHelper.markGitakoReadyState(true)
-      $showSettings.onChange(false)
+      setShowSettings(false)
       $logoContainerElement.onChange(DOMHelper.insertLogoMountPoint())
     } else {
       DOMHelper.markGitakoReadyState(false)
     }
-  }, [hasMetaData])
+  }, [hasMetaData]) // eslint-disable-line react-hooks/exhaustive-deps
 
   React.useEffect(() => {
     if (detectBrowser() === 'Safari') DOMHelper.markGitakoSafariFlag()
@@ -79,7 +78,7 @@ export function SideBar() {
     if (intelligentToggle !== null) {
       configContext.onChange({ intelligentToggle: shouldShow })
     }
-  }, [shouldShow, intelligentToggle])
+  }, [shouldShow, intelligentToggle]) // eslint-disable-line react-hooks/exhaustive-deps
 
   const error = useLoadedContext(SideBarErrorContext).value
   // Lock shouldShow on error
@@ -87,25 +86,25 @@ export function SideBar() {
     if (error && shouldShow) {
       $shouldShow.onChange(false)
     }
-  }, [error])
+  }, [error]) // eslint-disable-line react-hooks/exhaustive-deps
 
   const setShowSideBar = React.useCallback(
-    (show: typeof $shouldShow.value) => {
+    (show: boolean) => {
       if (!error) $shouldShow.onChange(show)
     },
-    [error],
+    [error], // eslint-disable-line react-hooks/exhaustive-deps
   )
 
   const toggleShowSideBar = React.useCallback(() => {
     if (!error) $shouldShow.onChange(show => !show)
-  }, [error])
+  }, [error]) // eslint-disable-line react-hooks/exhaustive-deps
   useToggleSideBarWithKeyboard(state, configContext, toggleShowSideBar)
 
   const updateSideBarVisibility = React.useCallback(() => {
     if (intelligentToggle === null && sidebarToggleMode === 'persistent') {
       setShowSideBar(platform.shouldShow())
     }
-  }, [intelligentToggle, sidebarToggleMode])
+  }, [intelligentToggle, sidebarToggleMode, setShowSideBar])
 
   useOnPJAXDone(updateSideBarVisibility)
 
@@ -120,7 +119,7 @@ export function SideBar() {
     if (hideSidebarOnInvalidToken) {
       setShowSideBar(false)
     }
-  }, [hideSidebarOnInvalidToken])
+  }, [hideSidebarOnInvalidToken, setShowSideBar])
 
   return (
     <Theme>
diff --git a/src/components/SideBarBodyWrapper.tsx b/src/components/SideBarBodyWrapper.tsx
index fff4d2a..78e502b 100644
--- a/src/components/SideBarBodyWrapper.tsx
+++ b/src/components/SideBarBodyWrapper.tsx
@@ -40,7 +40,7 @@ export function SideBarBodyWrapper({
 
   const heightForSafari = useConditionalHook(
     () => detectBrowser() === 'Safari',
-    () => useWindowSize().height,
+    () => useWindowSize().height, // eslint-disable-line react-hooks/rules-of-hooks
   )
 
   React.useEffect(() => {
@@ -55,7 +55,10 @@ export function SideBarBodyWrapper({
   const bodyWrapperRef = React.useRef<HTMLDivElement | null>(null)
   useDebounce(() => configContext.onChange({ sideBarWidth: size }), 100, [size])
 
-  function apply(sizeVariableMountPoint: HTMLElement | undefined, size: number) {
+  const applySizeToCSSVariables = React.useCallback(function apply(
+    sizeVariableMountPoint: HTMLElement | undefined,
+    size: number,
+  ) {
     if (sizeVariableMountPoint)
       setCSSVariable(
         '--gitako-width',
@@ -69,12 +72,13 @@ export function SideBarBodyWrapper({
         sizeVariableMountPoint ? undefined : `${size}px`,
         bodyWrapperRef.current,
       )
-  }
+  },
+  [])
 
   // Update size using useEffect would cause delay
   const onResize = React.useMemo(() => {
-    let sizeToApply: number,
-      applied = true
+    let sizeToApply: number
+    let applied = true
     return ([size]: number[]) => {
       // do NOT merge this with the above similar effect, side bar will jump otherwise
       sizeToApply = getSafeSize(size, width)
@@ -84,15 +88,15 @@ export function SideBarBodyWrapper({
         applied = false
         requestAnimationFrame(() => {
           applied = true
-          apply(sizeVariableMountPoint, sizeToApply)
+          applySizeToCSSVariables(sizeVariableMountPoint, sizeToApply)
         })
       }
     }
-  }, [width, sizeVariableMountPoint])
+  }, [width, sizeVariableMountPoint, applySizeToCSSVariables])
 
   React.useEffect(() => {
-    apply(sizeVariableMountPoint, size)
-  }, [sizeVariableMountPoint])
+    applySizeToCSSVariables(sizeVariableMountPoint, size)
+  }, [sizeVariableMountPoint, size, applySizeToCSSVariables])
 
   const onMouseLeave = React.useCallback(
     <E extends HTMLElement>(e: React.MouseEvent<E>) => {
@@ -116,7 +120,7 @@ export function SideBarBodyWrapper({
           onResize={onResize}
           onResetSize={() => {
             setSize(defaultConfigs.sideBarWidth)
-            apply(sizeVariableMountPoint, defaultConfigs.sideBarWidth)
+            applySizeToCSSVariables(sizeVariableMountPoint, defaultConfigs.sideBarWidth)
           }}
           onResizeStateChange={state => {
             blockLeaveRef.current = state === 'resizing'
diff --git a/src/components/SimpleToggleField.tsx b/src/components/SimpleToggleField.tsx
index 7e0ec27..529a584 100644
--- a/src/components/SimpleToggleField.tsx
+++ b/src/components/SimpleToggleField.tsx
@@ -33,7 +33,12 @@ export function SimpleToggleField<Key extends keyof Config>({ field, onChange }:
         <>
           {field.label}{' '}
           {field.wikiLink ? (
-            <a href={field.wikiLink} title={field.tooltip} target={'_blank'}>
+            <a
+              href={field.wikiLink}
+              title={field.tooltip}
+              target="_blank"
+              rel="noopener noreferrer"
+            >
               (?)
             </a>
           ) : field.description ? (
diff --git a/src/components/SizeObserver.tsx b/src/components/SizeObserver.tsx
index 0b24933..26347e6 100644
--- a/src/components/SizeObserver.tsx
+++ b/src/components/SizeObserver.tsx
@@ -6,16 +6,12 @@ type Size = {
   height: number
 }
 
-type Props = Override<
-  React.HTMLAttributes<HTMLElement>,
-  {
-    type?: string | React.ComponentType
-    children(size: Partial<Size>): React.ReactNode
-  }
->
+type Props<R extends Element> = {
+  children(size: Partial<Size>, ref: React.MutableRefObject<R | null>): React.ReactNode
+}
 
-export function SizeObserver({ type = 'div', children, ...rest }: Props) {
-  const ref = React.useRef<any>()
+export function SizeObserver<R extends Element>({ children }: Props<R>) {
+  const ref = React.useRef<R | null>(null)
 
   const [size, setSize] = React.useState<Partial<Size>>({
     width: undefined,
@@ -42,7 +38,5 @@ export function SizeObserver({ type = 'div', children, ...rest }: Props) {
     }
   }, [])
 
-  const props: any = { ...rest, ref } // :)
-
-  return React.createElement(type, props, children(size))
+  return <>{children(size, ref)}</>
 }
diff --git a/src/components/ToggleShowButton.tsx b/src/components/ToggleShowButton.tsx
index baf0fe8..5e51750 100644
--- a/src/components/ToggleShowButton.tsx
+++ b/src/components/ToggleShowButton.tsx
@@ -41,7 +41,7 @@ export function ToggleShowButton({ error, className, onClick, onHover }: Props)
     if (ref.current) {
       ref.current.style.top = distance + 'px'
     }
-  }, [height])
+  }, [height]) // eslint-disable-line react-hooks/exhaustive-deps
 
   // And this repositions on drag
   const { onPointerDown } = useResizeHandler(
diff --git a/src/components/searchModes/fuzzyMode.test.ts b/src/components/searchModes/fuzzyMode.test.ts
index 5a82b6c..57469af 100644
--- a/src/components/searchModes/fuzzyMode.test.ts
+++ b/src/components/searchModes/fuzzyMode.test.ts
@@ -1,10 +1,12 @@
+/* eslint-disable @typescript-eslint/no-non-null-asserted-optional-chain */
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
 import { fuzzyMode } from './fuzzyMode'
 
 type TreeNodeSource = {
   [key: string]: true | TreeNodeSource
 }
 
-function createTreeNode(source: TreeNodeSource, name: string = '', paths: string[] = []): TreeNode {
+function createTreeNode(source: TreeNodeSource, name = '', paths: string[] = []): TreeNode {
   const subPaths = paths.concat(name)
   return {
     name,
diff --git a/src/components/searchModes/fuzzyMode.tsx b/src/components/searchModes/fuzzyMode.tsx
index ad71595..291a529 100644
--- a/src/components/searchModes/fuzzyMode.tsx
+++ b/src/components/searchModes/fuzzyMode.tsx
@@ -57,7 +57,7 @@ function fuzzyMatch(input: string, sample: string) {
   }
 }
 
-function fuzzyMatchIndexes(input: string, sample: string, shift: number = 0) {
+function fuzzyMatchIndexes(input: string, sample: string, shift = 0) {
   const indexes: number[] = []
   let i = 0,
     j = 0
diff --git a/src/components/settings/AccessTokenSettings.tsx b/src/components/settings/AccessTokenSettings.tsx
index e26980c..b53414a 100644
--- a/src/components/settings/AccessTokenSettings.tsx
+++ b/src/components/settings/AccessTokenSettings.tsx
@@ -10,31 +10,28 @@ import { SettingsSection } from './SettingsSection'
 
 const ACCESS_TOKEN_REGEXP = /^([0-9a-fA-F]+|gh[pousr]_[A-Za-z0-9_]+)$/
 
-type Props = {}
-
-export function AccessTokenSettings(props: React.PropsWithChildren<Props>) {
+export function AccessTokenSettings() {
   const configContext = useConfigs()
   const hasAccessToken = Boolean(configContext.value.accessToken)
-  const $useAccessToken = useStateIO('')
+  const [accessToken, setAccessToken] = React.useState('')
   const useAccessTokenHint = useStateIO<React.ReactNode>('')
   const focusInput = useStateIO(false)
 
   const { value: accessTokenHint } = useAccessTokenHint
-  const { value: accessToken } = $useAccessToken
 
   React.useEffect(() => {
     // clear input when access token updates
-    $useAccessToken.onChange('')
+    setAccessToken('')
   }, [configContext.value.accessToken])
 
   const onInputAccessToken = React.useCallback(
     ({ currentTarget: { value } }: React.FormEvent<HTMLInputElement>) => {
-      $useAccessToken.onChange(value)
+      setAccessToken(value)
       useAccessTokenHint.onChange(
         ACCESS_TOKEN_REGEXP.test(value) ? '' : 'Gitako does not recognize the token.',
       )
     },
-    [],
+    [], // eslint-disable-line react-hooks/exhaustive-deps
   )
 
   const saveToken = React.useCallback(
@@ -50,11 +47,11 @@ export function AccessTokenSettings(props: React.PropsWithChildren<Props>) {
     ) => {
       if (accessToken) {
         configContext.onChange({ accessToken })
-        $useAccessToken.onChange('')
+        setAccessToken('')
         useAccessTokenHint.onChange(hint)
       }
     },
-    [accessToken],
+    [accessToken], // eslint-disable-line react-hooks/exhaustive-deps
   )
 
   const onPressAccessToken = React.useCallback(
@@ -73,6 +70,7 @@ export function AccessTokenSettings(props: React.PropsWithChildren<Props>) {
             href={wikiLinks.createAccessToken}
             title="A token is required to access private repositories or bypass API rate limits"
             target="_blank"
+            rel="noopener noreferrer"
           >
             (?)
           </a>
diff --git a/src/components/settings/FileTreeSettings.tsx b/src/components/settings/FileTreeSettings.tsx
index 3b79af5..96ab893 100644
--- a/src/components/settings/FileTreeSettings.tsx
+++ b/src/components/settings/FileTreeSettings.tsx
@@ -38,9 +38,7 @@ const recursiveToggleFolderOptions: Option<Config['recursiveToggleFolder']>[] =
   },
 ]
 
-type Props = {}
-
-export function FileTreeSettings(props: React.PropsWithChildren<Props>) {
+export function FileTreeSettings() {
   const configContext = useConfigs()
   return (
     <SettingsSection title={'File Tree'}>
diff --git a/src/components/settings/Footer.tsx b/src/components/settings/Footer.tsx
index 23ed12b..7542476 100644
--- a/src/components/settings/Footer.tsx
+++ b/src/components/settings/Footer.tsx
@@ -15,8 +15,9 @@ export function Footer(props: Props) {
       <Link
         className={'version'}
         href={wikiLinks.changeLog}
-        target={'_blank'}
         title={'Check out new features!'}
+        target="_blank"
+        rel="noopener noreferrer"
       >
         {VERSION}
       </Link>
diff --git a/src/components/settings/SettingsBar.tsx b/src/components/settings/SettingsBar.tsx
index 254215a..669993e 100644
--- a/src/components/settings/SettingsBar.tsx
+++ b/src/components/settings/SettingsBar.tsx
@@ -72,11 +72,19 @@ export function SettingsBarContent({ toggleShow }: { toggleShow: () => void }) {
           </SettingsSection>
         )}
         <SettingsSection title={'Talk to the author'}>
-          <a href="https://github.com/EnixCoda/Gitako/issues" target="_blank">
+          <a
+            href="https://github.com/EnixCoda/Gitako/issues"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
             Report bug
           </a>
           {' / '}
-          <a href="https://github.com/EnixCoda/Gitako/discussions" target="_blank">
+          <a
+            href="https://github.com/EnixCoda/Gitako/discussions"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
             Discuss feature
           </a>
         </SettingsSection>
diff --git a/src/components/settings/SidebarSettings.tsx b/src/components/settings/SidebarSettings.tsx
index 8d2f403..20c8335 100644
--- a/src/components/settings/SidebarSettings.tsx
+++ b/src/components/settings/SidebarSettings.tsx
@@ -8,9 +8,7 @@ import * as keyHelper from 'utils/keyHelper'
 import { Field } from './Field'
 import { SettingsSection } from './SettingsSection'
 
-type Props = {}
-
-export function SidebarSettings(props: React.PropsWithChildren<Props>) {
+export function SidebarSettings() {
   const configContext = useConfigs()
   const useToggleShowSideBarShortcut = useStateIO(configContext.value.shortcut)
   const { value: toggleShowSideBarShortcut } = useToggleShowSideBarShortcut
@@ -18,7 +16,7 @@ export function SidebarSettings(props: React.PropsWithChildren<Props>) {
 
   React.useEffect(() => {
     useToggleShowSideBarShortcut.onChange(configContext.value.shortcut)
-  }, [configContext.value.shortcut])
+  }, [configContext.value.shortcut]) // eslint-disable-line react-hooks/exhaustive-deps
 
   return (
     <SettingsSection title={'Sidebar'}>
@@ -38,7 +36,7 @@ export function SidebarSettings(props: React.PropsWithChildren<Props>) {
               // Clear shortcut with backspace
               const shortcut = e.key === 'Backspace' ? '' : keyHelper.parseEvent(e)
               useToggleShowSideBarShortcut.onChange(shortcut)
-            }, [])}
+            }, [])} // eslint-disable-line react-hooks/exhaustive-deps
             readOnly
           />
           {configContext.value.shortcut === toggleShowSideBarShortcut ? (
diff --git a/src/platforms/Gitee/components.tsx b/src/platforms/Gitee/components.tsx
index 945f11d..bd4472a 100644
--- a/src/platforms/Gitee/components.tsx
+++ b/src/platforms/Gitee/components.tsx
@@ -24,11 +24,19 @@ export function GiteeAccessDeniedError({ hasToken }: { hasToken: boolean }) {
       ) : (
         <p>
           Gitako needs access token to read this project due to{' '}
-          <a href="https://developer.github.com/v3/#rate-limiting" target="_blank">
+          <a
+            href="https://developer.github.com/v3/#rate-limiting"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
             GitHub rate limiting
           </a>{' '}
           and{' '}
-          <a href="https://developer.github.com/v3/#authentication" target="_blank">
+          <a
+            href="https://developer.github.com/v3/#authentication"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
             auth needs
           </a>
           . Please setup access token in the settings panel below.

From 2c93bc64eb40def6fef55b75866398cf6ea95777 Mon Sep 17 00:00:00 2001
From: EnixCoda <enixcoda@gmail.com>
Date: Tue, 17 May 2022 23:06:05 +0800
Subject: [PATCH 20/93] chore: resolve eslint issues

---
 src/analytics.ts                              | 14 ++----
 src/components/SideBarBodyWrapper.tsx         |  9 ++--
 src/containers/ConfigsContext.tsx             |  4 +-
 src/containers/OAuthWrapper.tsx               |  4 +-
 src/containers/RepoContext.tsx                | 13 +++--
 src/platforms/GitHub/API.ts                   | 26 +++++-----
 src/platforms/GitHub/CopyFileButton.tsx       |  7 ++-
 src/platforms/GitHub/DOMHelper.ts             |  2 +-
 src/platforms/GitHub/URLHelper.ts             |  2 +-
 src/platforms/GitHub/getCommitTreeData.ts     |  2 +-
 .../hooks/useGitHubAttachCopyFileButton.ts    |  5 +-
 .../hooks/useGitHubAttachCopySnippetButton.ts |  5 +-
 .../GitHub/hooks/useGitHubCodeFold.tsx        |  5 +-
 src/platforms/GitHub/utils.ts                 |  2 +-
 src/platforms/Gitea/API.ts                    | 30 ++++++------
 src/platforms/Gitea/URLHelper.ts              |  4 +-
 src/platforms/Gitea/index.ts                  |  2 +-
 src/platforms/Gitee/API.ts                    |  9 ++--
 src/platforms/Gitee/URLHelper.ts              |  2 +-
 src/platforms/Gitee/index.ts                  |  5 +-
 src/platforms/dummyPlatformForTypeSafety.ts   |  2 +-
 src/platforms/index.ts                        |  8 +--
 src/platforms/platform.d.ts                   |  6 +--
 src/utils/DOMHelper.ts                        |  2 +-
 src/utils/EventHub.ts                         |  4 +-
 src/utils/VisibleNodesGenerator/prepare.ts    |  2 +-
 src/utils/config/helper.ts                    |  5 +-
 src/utils/config/migrations/1.0.1.ts          |  4 +-
 src/utils/config/migrations/1.3.4.ts          |  4 +-
 src/utils/config/migrations/2.6.0.ts          |  9 ++--
 src/utils/config/migrations/3.0.0.ts          |  2 +-
 src/utils/config/migrations/3.5.0.ts          |  4 +-
 src/utils/config/migrations/index.ts          |  4 +-
 src/utils/general.ts                          | 49 ++++++-------------
 src/utils/gitSubmodule.ts                     |  2 +-
 src/utils/hooks/useAsyncMemo.ts               | 16 ------
 src/utils/hooks/useCatchNetworkError.ts       |  2 +-
 .../hooks/useEffectOnSerializableUpdates.ts   |  3 +-
 src/utils/hooks/useMediaStyleSheet.ts         | 27 ----------
 src/utils/hooks/usePJAX.ts                    |  2 +-
 src/utils/hooks/useResizeHandler.ts           | 26 +++++-----
 src/utils/hooks/useUpdateReason.ts            |  8 +--
 src/utils/keyHelper.ts                        |  4 +-
 src/utils/parseIconMapCSV.ts                  |  2 +-
 src/utils/storageHelper.ts                    | 16 ++----
 45 files changed, 150 insertions(+), 215 deletions(-)
 delete mode 100644 src/utils/hooks/useAsyncMemo.ts
 delete mode 100644 src/utils/hooks/useMediaStyleSheet.ts

diff --git a/src/analytics.ts b/src/analytics.ts
index 2d9a6cb..341a71e 100644
--- a/src/analytics.ts
+++ b/src/analytics.ts
@@ -2,6 +2,7 @@ import * as Sentry from '@sentry/browser'
 import { Middleware } from 'driver/connect.js'
 import { IN_PRODUCTION_MODE, VERSION } from 'env'
 import { platform } from 'platforms'
+import { forOf } from 'utils/general'
 
 const PUBLIC_KEY = 'd22ec5c9cc874539a51c78388c12e3b0'
 const PROJECT_ID = '1406497'
@@ -69,12 +70,7 @@ export const withErrorLog: Middleware = function withErrorLog(method, args) {
   ]
 }
 
-export function raiseError(
-  error: Error,
-  extra?: {
-    [key: string]: any
-  },
-) {
+export function raiseError(error: Error, extra?: unknown) {
   if (!IN_PRODUCTION_MODE || platform.isEnterprise()) {
     // ignore errors from enterprise to get less noise on Sentry
     console.error(error)
@@ -83,10 +79,8 @@ export function raiseError(
   }
 
   Sentry.withScope(scope => {
-    if (extra) {
-      Object.keys(extra).forEach(key => {
-        scope.setExtra(key, extra[key])
-      })
+    if (typeof extra === 'object' && extra) {
+      forOf(extra, (key, value) => scope.setExtra(key, value))
     }
     Sentry.captureException(error)
   })
diff --git a/src/components/SideBarBodyWrapper.tsx b/src/components/SideBarBodyWrapper.tsx
index 78e502b..92bb720 100644
--- a/src/components/SideBarBodyWrapper.tsx
+++ b/src/components/SideBarBodyWrapper.tsx
@@ -7,6 +7,7 @@ import { cx } from 'utils/cx'
 import { setCSSVariable } from 'utils/DOMHelper'
 import * as features from 'utils/features'
 import { detectBrowser } from 'utils/general'
+import { ResizeState } from 'utils/hooks/useResizeHandler'
 import { useConditionalHook } from '../utils/hooks/useConditionalHook'
 
 type Size = number
@@ -107,6 +108,10 @@ export function SideBarBodyWrapper({
   )
 
   const dummySize: [number, number] = React.useMemo(() => [size, size], [size])
+  const onResizeStateChange = React.useCallback((state: ResizeState) => {
+    blockLeaveRef.current = state === 'resizing'
+  }, [])
+
   return (
     <div
       ref={bodyWrapperRef}
@@ -122,9 +127,7 @@ export function SideBarBodyWrapper({
             setSize(defaultConfigs.sideBarWidth)
             applySizeToCSSVariables(sizeVariableMountPoint, defaultConfigs.sideBarWidth)
           }}
-          onResizeStateChange={state => {
-            blockLeaveRef.current = state === 'resizing'
-          }}
+          onResizeStateChange={onResizeStateChange}
           size={dummySize}
         />
       )}
diff --git a/src/containers/ConfigsContext.tsx b/src/containers/ConfigsContext.tsx
index 4710a83..53cb7cc 100644
--- a/src/containers/ConfigsContext.tsx
+++ b/src/containers/ConfigsContext.tsx
@@ -29,9 +29,9 @@ export function ConfigsContextWrapper(props: React.PropsWithChildren<Props>) {
   )
 }
 
-export const useConfigs = useNonNullContext(ConfigsContext)
+export const useConfigs = createUseNonNullContext(ConfigsContext)
 
-function useNonNullContext<T>(theContext: React.Context<T | null>): () => T {
+function createUseNonNullContext<T>(theContext: React.Context<T | null>): () => T {
   return () => {
     const context = React.useContext(theContext)
     if (context === null) throw new Error(`Empty context`)
diff --git a/src/containers/OAuthWrapper.tsx b/src/containers/OAuthWrapper.tsx
index c338c64..9fdc257 100644
--- a/src/containers/OAuthWrapper.tsx
+++ b/src/containers/OAuthWrapper.tsx
@@ -18,7 +18,7 @@ export function OAuthWrapper({ children }: React.PropsWithChildren<{}>) {
     if (needGetAccessTokenRef.current) {
       $state.onChange(running ? 'getting-access-token' : 'after-getting-access-token')
     }
-  }, [running])
+  }, [running]) // eslint-disable-line react-hooks/exhaustive-deps
 
   // block children rendering on the first render if setting token
   if (running && $state.value !== 'getting-access-token') return null
@@ -38,7 +38,7 @@ function useGetAccessToken() {
       }
       $block.onChange(false)
     })
-  }, [])
+  }, []) // eslint-disable-line react-hooks/exhaustive-deps
 
   return $block.value
 }
diff --git a/src/containers/RepoContext.tsx b/src/containers/RepoContext.tsx
index 3e7004a..6d64fdf 100644
--- a/src/containers/RepoContext.tsx
+++ b/src/containers/RepoContext.tsx
@@ -38,10 +38,13 @@ function usePartialMetaData(): PartialMetaData | null {
   // sync along URL and DOM
   const $partialMetaData = useStateIO(isGettingAccessToken ? null : resolvePartialMetaData)
   const $committedPartialMetaData = useStateIO($partialMetaData.value)
-  const setPartialMetaData = () => $partialMetaData.onChange(resolvePartialMetaData())
+  const setPartialMetaData = React.useCallback(
+    () => $partialMetaData.onChange(resolvePartialMetaData()),
+    [], // eslint-disable-line react-hooks/exhaustive-deps
+  )
   React.useEffect(() => {
     if (!isGettingAccessToken) setPartialMetaData()
-  }, [isGettingAccessToken])
+  }, [isGettingAccessToken, setPartialMetaData])
   useOnPJAXDone(setPartialMetaData)
   useEffectOnSerializableUpdates(
     $partialMetaData.value,
@@ -52,7 +55,7 @@ function usePartialMetaData(): PartialMetaData | null {
     if (!$partialMetaData.value && !isGettingAccessToken) {
       $state.onChange('disabled')
     }
-  }, [$partialMetaData.value])
+  }, [$partialMetaData.value]) // eslint-disable-line react-hooks/exhaustive-deps
   return $committedPartialMetaData.value
 }
 
@@ -76,7 +79,7 @@ function useDefaultBranch(partialMetaData: PartialMetaData | null) {
       const defaultBranch = await platform.getDefaultBranchName(partialMetaData, accessToken)
       $defaultBranch.onChange(defaultBranch)
     })
-  }, [partialMetaData, accessToken])
+  }, [partialMetaData, accessToken]) // eslint-disable-line react-hooks/exhaustive-deps
   return $defaultBranch.value
 }
 
@@ -102,6 +105,6 @@ function useMetaData(
     } else {
       $metaData.onChange(null)
     }
-  }, [partialMetaData, defaultBranchName, theBranch])
+  }, [partialMetaData, defaultBranchName, theBranch]) // eslint-disable-line react-hooks/exhaustive-deps
   return $metaData.value
 }
diff --git a/src/platforms/GitHub/API.ts b/src/platforms/GitHub/API.ts
index c1b4d98..29f97cf 100644
--- a/src/platforms/GitHub/API.ts
+++ b/src/platforms/GitHub/API.ts
@@ -1,17 +1,21 @@
 import { errors } from 'platforms'
 import { isEnterprise } from '.'
+import { is } from '../../utils/is'
 import { continuousLoadPages, getDOM, resolveHeaderLink } from './utils'
 
-function isAPIRateLimitExceeded(content: any /* safe any */) {
-  return content?.['documentation_url'] === 'https://developer.github.com/v3/#rate-limiting'
+function isAPIRateLimitExceeded(content: JSONValue) {
+  return (
+    is.JSON.object(content) &&
+    content?.['documentation_url'] === 'https://developer.github.com/v3/#rate-limiting'
+  )
 }
 
-function isEmptyProject(content: any /* safe any */) {
-  return content?.['message'] === 'Git Repository is empty.'
+function isEmptyProject(content: JSONValue) {
+  return is.JSON.object(content) && content?.['message'] === 'Git Repository is empty.'
 }
 
-function isBlockedProject(content: any /* safe any */) {
-  return content?.['message'] === 'Repository access blocked'
+function isBlockedProject(content: JSONValue) {
+  return is.JSON.object(content) && content?.['message'] === 'Repository access blocked'
 }
 
 export const responseBodyResolvers = {
@@ -151,11 +155,10 @@ export async function getPullPageDocuments(
   )
 }
 
-export async function getCommitPageDocuments(
-  userName: string,
+export async function getCommitPageDocuments(): Promise<Document[]> {
+  /* userName: string,
   repoName: string,
-  commitId: string,
-): Promise<Document[]> {
+  commitId: string, */
   // arguments are not used because info are collected from DOM directly
   return continuousLoadPages(document)
 }
@@ -191,7 +194,7 @@ export async function requestCommitTreeData(
   userName: string,
   repoName: string,
   sha: string,
-  page: number = 1,
+  page = 1,
   accessToken?: string,
 ): Promise<Response> {
   const search = new URLSearchParams({
@@ -205,6 +208,7 @@ export async function requestCommitTreeData(
 export async function getPaginatedData<T>(sendRequest: (page: number) => Promise<Response>) {
   const responses: Response[] = []
   let page = 1
+  // eslint-disable-next-line no-constant-condition
   while (true) {
     const response = await sendRequest(page)
     responses.push(response)
diff --git a/src/platforms/GitHub/CopyFileButton.tsx b/src/platforms/GitHub/CopyFileButton.tsx
index 47d26c0..7a3bec2 100644
--- a/src/platforms/GitHub/CopyFileButton.tsx
+++ b/src/platforms/GitHub/CopyFileButton.tsx
@@ -3,8 +3,6 @@ import { cx } from 'utils/cx'
 import { copyElementContent } from 'utils/DOMHelper'
 import { getCodeElement } from './DOMHelper'
 
-type Props = {}
-
 const className = 'gitako-copy-file-button'
 export const copyFileButtonClassName = className
 
@@ -13,7 +11,8 @@ const contents = {
   error: 'Copy failed!',
   normal: 'Copy file',
 }
-export function CopyFileButton(props: React.PropsWithChildren<Props>) {
+
+export function CopyFileButton() {
   const [content, setContent] = React.useState(contents.normal)
   React.useEffect(() => {
     if (content !== contents.normal) {
@@ -31,7 +30,7 @@ export function CopyFileButton(props: React.PropsWithChildren<Props>) {
     // onClick on <a /> won't work when rendered with `renderReact`
     const element = elementRef.current
     if (element) {
-      function copyCode() {
+      const copyCode = () => {
         const codeElement = getCodeElement()
         if (codeElement) {
           setContent(copyElementContent(codeElement, true) ? contents.success : contents.error)
diff --git a/src/platforms/GitHub/DOMHelper.ts b/src/platforms/GitHub/DOMHelper.ts
index e61e012..dc42fce 100644
--- a/src/platforms/GitHub/DOMHelper.ts
+++ b/src/platforms/GitHub/DOMHelper.ts
@@ -73,7 +73,7 @@ export function getCurrentBranch(passive = false) {
     const commitPathRegex = /^(.*?)\/(.*?)\/find\/(.*?)$/
     const result = urlFromFindFileButton.match(commitPathRegex)
     if (result) {
-      const [_, userName, repoName, branchName] = result
+      const [_, userName, repoName, branchName] = result // eslint-disable-line @typescript-eslint/no-unused-vars
       if (!branchName.includes(' ')) return branchName
     }
   }
diff --git a/src/platforms/GitHub/URLHelper.ts b/src/platforms/GitHub/URLHelper.ts
index a98cc6f..9945ecf 100644
--- a/src/platforms/GitHub/URLHelper.ts
+++ b/src/platforms/GitHub/URLHelper.ts
@@ -4,7 +4,7 @@ export function parse(): Partial<Pick<MetaData, 'userName' | 'repoName' | 'type'
   path: string[]
 } {
   const { pathname } = window.location
-  let [
+  const [
     ,
     // ignore content before the first '/'
     userName,
diff --git a/src/platforms/GitHub/getCommitTreeData.ts b/src/platforms/GitHub/getCommitTreeData.ts
index def1892..d2f5121 100644
--- a/src/platforms/GitHub/getCommitTreeData.ts
+++ b/src/platforms/GitHub/getCommitTreeData.ts
@@ -15,7 +15,7 @@ export async function getCommitTreeData(
     .map(({ files }) => files)
     .flat()
 
-  const documents = await API.getCommitPageDocuments(userName, repoName, commitSHA)
+  const documents = await API.getCommitPageDocuments(/* userName, repoName, commitSHA */)
 
   const getItemURL = (path: string) => {
     for (const doc of documents) {
diff --git a/src/platforms/GitHub/hooks/useGitHubAttachCopyFileButton.ts b/src/platforms/GitHub/hooks/useGitHubAttachCopyFileButton.ts
index aa1e409..d911923 100644
--- a/src/platforms/GitHub/hooks/useGitHubAttachCopyFileButton.ts
+++ b/src/platforms/GitHub/hooks/useGitHubAttachCopyFileButton.ts
@@ -7,11 +7,10 @@ import { GitHub } from '../index'
 export function useGitHubAttachCopyFileButton(copyFileButton: boolean) {
   const attachCopyFileButton = React.useCallback(
     function attachCopyFileButton() {
-      if (platform !== GitHub) return
-      if (copyFileButton) return DOMHelper.attachCopyFileBtn() || undefined // for the sake of react effect
+      if (platform === GitHub && copyFileButton) DOMHelper.attachCopyFileBtn()
     },
     [copyFileButton],
   )
-  React.useEffect(attachCopyFileButton, [copyFileButton])
+  React.useEffect(attachCopyFileButton, [attachCopyFileButton])
   useOnPJAXDone(attachCopyFileButton)
 }
diff --git a/src/platforms/GitHub/hooks/useGitHubAttachCopySnippetButton.ts b/src/platforms/GitHub/hooks/useGitHubAttachCopySnippetButton.ts
index 9a92f76..6d0926b 100644
--- a/src/platforms/GitHub/hooks/useGitHubAttachCopySnippetButton.ts
+++ b/src/platforms/GitHub/hooks/useGitHubAttachCopySnippetButton.ts
@@ -7,11 +7,10 @@ import { GitHub } from '../index'
 export function useGitHubAttachCopySnippetButton(copySnippetButton: boolean) {
   const attachCopySnippetButton = React.useCallback(
     function attachCopySnippetButton() {
-      if (platform !== GitHub) return
-      if (copySnippetButton) return DOMHelper.attachCopySnippet() || undefined // for the sake of react effect
+      if (platform === GitHub && copySnippetButton) DOMHelper.attachCopySnippet()
     },
     [copySnippetButton],
   )
-  React.useEffect(attachCopySnippetButton, [copySnippetButton])
+  React.useEffect(attachCopySnippetButton, [attachCopySnippetButton])
   useOnPJAXDone(attachCopySnippetButton)
 }
diff --git a/src/platforms/GitHub/hooks/useGitHubCodeFold.tsx b/src/platforms/GitHub/hooks/useGitHubCodeFold.tsx
index 83c49db..6bb0641 100644
--- a/src/platforms/GitHub/hooks/useGitHubCodeFold.tsx
+++ b/src/platforms/GitHub/hooks/useGitHubCodeFold.tsx
@@ -51,10 +51,11 @@ function init() {
     type Level = number // measured by leading whitespace amount
     const stack: [Level, LineNumber][] = []
 
-    function trySeal(lineNumber: number, level: number) {
+    const trySeal = (lineNumber: number, level: number) => {
       let ignoredTheHighestLevelItem = false
       while (stack.length) {
-        const top = stack.pop()! // safe
+        const top = stack.pop()
+        if (top === undefined) throw new Error()
         const [$LineNumber, $level] = top
 
         if ($level < level) {
diff --git a/src/platforms/GitHub/utils.ts b/src/platforms/GitHub/utils.ts
index bac1be7..f6702ce 100644
--- a/src/platforms/GitHub/utils.ts
+++ b/src/platforms/GitHub/utils.ts
@@ -89,7 +89,7 @@ export async function continuousLoadPages(doc: Document, onReceivePage?: (doc: D
    */
   const fragmentSelector = 'include-fragment[data-targets="diff-file-filter.progressiveLoaders"]'
   const documents: Document[] = [doc]
-  while (true) {
+  while (true) { // eslint-disable-line no-constant-condition
     const fragment = doc.querySelector(fragmentSelector) as HTMLElement
     if (!fragment) break
     const src = fragment.getAttribute('src')
diff --git a/src/platforms/Gitea/API.ts b/src/platforms/Gitea/API.ts
index d86a1ca..cca5304 100644
--- a/src/platforms/Gitea/API.ts
+++ b/src/platforms/Gitea/API.ts
@@ -1,12 +1,13 @@
 import { raiseError } from 'analytics'
 import { errors } from 'platforms'
+import { is } from 'utils/is'
 
-function isEmptyProject(content: any /* safe any */) {
-  return content?.['message'] === 'Git Repository is empty.'
+function isEmptyProject(content: JSONValue) {
+  return is.JSON.object(content) && content?.['message'] === 'Git Repository is empty.'
 }
 
-function isBlockedProject(content: any /* safe any */) {
-  return content?.['message'] === 'Repository access blocked'
+function isBlockedProject(content: JSONValue) {
+  return is.JSON.object(content) && content?.['message'] === 'Repository access blocked'
 }
 
 async function request(
@@ -77,8 +78,7 @@ export async function getTreeData(
 ): Promise<GiteaAPI.TreeData> {
   const search = new URLSearchParams()
   if (recursive) search.set('recursive', '1')
-  const url =
-    `${API_ENDPOINT}/repos/${userName}/${repoName}/git/trees/${branchName}?` + search
+  const url = `${API_ENDPOINT}/repos/${userName}/${repoName}/git/trees/${branchName}?` + search
   return await request(url, { accessToken })
 }
 
@@ -94,14 +94,14 @@ export async function getBlobData(
 
 export async function OAuth(code: string): Promise<string | null> {
   const endpoint = `https://gitako.enix.one/oauth/gitea?`
-    const res = await fetch(endpoint + new URLSearchParams({ code }).toString(), {
-      method: 'post',
-    })
+  const res = await fetch(endpoint + new URLSearchParams({ code }).toString(), {
+    method: 'post',
+  })
 
-    if (res.ok) {
-      const body = await res.json()
-      const accessToken = body?.accessToken
-      if (typeof accessToken === 'string') return accessToken
-    }
-    return null
+  if (res.ok) {
+    const body = await res.json()
+    const accessToken = body?.accessToken
+    if (typeof accessToken === 'string') return accessToken
+  }
+  return null
 }
diff --git a/src/platforms/Gitea/URLHelper.ts b/src/platforms/Gitea/URLHelper.ts
index a68b81f..e5c100f 100644
--- a/src/platforms/Gitea/URLHelper.ts
+++ b/src/platforms/Gitea/URLHelper.ts
@@ -2,7 +2,7 @@ import { raiseError } from 'analytics'
 
 export function parse(): Partial<MetaData> & { path: string[] } {
   const { pathname } = window.location
-  let [
+  const [
     ,
     // ignore content before the first '/'
     userName,
@@ -67,4 +67,4 @@ export function getCurrentPath(branchName = '') {
     return path.map(decodeURIComponent)
   }
   return []
-}
\ No newline at end of file
+}
diff --git a/src/platforms/Gitea/index.ts b/src/platforms/Gitea/index.ts
index ab58b6a..e02078c 100644
--- a/src/platforms/Gitea/index.ts
+++ b/src/platforms/Gitea/index.ts
@@ -61,7 +61,7 @@ function getUrlForRedirect(
   userName: string,
   repoName: string,
   branchName: string,
-  type = 'blob',
+  type = 'blob', // eslint-disable-line @typescript-eslint/no-unused-vars
   path = '',
 ) {
   // Modern browsers have great support for handling unsafe URL,
diff --git a/src/platforms/Gitee/API.ts b/src/platforms/Gitee/API.ts
index a9921e7..1948501 100644
--- a/src/platforms/Gitee/API.ts
+++ b/src/platforms/Gitee/API.ts
@@ -1,12 +1,13 @@
 import { raiseError } from 'analytics'
 import { errors } from 'platforms'
+import { is } from 'utils/is'
 
-function isEmptyProject(content: any /* safe any */) {
-  return content?.['message'] === 'Git Repository is empty.'
+function isEmptyProject(content: JSONValue) {
+  return is.JSON.object(content) && content?.['message'] === 'Git Repository is empty.'
 }
 
-function isBlockedProject(content: any /* safe any */) {
-  return content?.['message'] === 'Repository access blocked'
+function isBlockedProject(content: JSONValue) {
+  return is.JSON.object(content) && content?.['message'] === 'Repository access blocked'
 }
 
 async function request(
diff --git a/src/platforms/Gitee/URLHelper.ts b/src/platforms/Gitee/URLHelper.ts
index 0a539da..e5c100f 100644
--- a/src/platforms/Gitee/URLHelper.ts
+++ b/src/platforms/Gitee/URLHelper.ts
@@ -2,7 +2,7 @@ import { raiseError } from 'analytics'
 
 export function parse(): Partial<MetaData> & { path: string[] } {
   const { pathname } = window.location
-  let [
+  const [
     ,
     // ignore content before the first '/'
     userName,
diff --git a/src/platforms/Gitee/index.ts b/src/platforms/Gitee/index.ts
index 5769520..9b201c8 100644
--- a/src/platforms/Gitee/index.ts
+++ b/src/platforms/Gitee/index.ts
@@ -184,11 +184,10 @@ export const Gitee: Platform = {
 export function useGiteeAttachCopySnippetButton(copySnippetButton: boolean) {
   const attachCopySnippetButton = React.useCallback(
     function attachCopySnippetButton() {
-      if (platform !== Gitee) return
-      if (copySnippetButton) return DOMHelper.attachCopySnippet() || undefined // for the sake of react effect
+      if (platform === Gitee && copySnippetButton) DOMHelper.attachCopySnippet()
     },
     [copySnippetButton],
   )
-  React.useEffect(attachCopySnippetButton, [copySnippetButton])
+  React.useEffect(attachCopySnippetButton, [attachCopySnippetButton])
   useOnPJAXDone(attachCopySnippetButton)
 }
diff --git a/src/platforms/dummyPlatformForTypeSafety.ts b/src/platforms/dummyPlatformForTypeSafety.ts
index 9216714..c41982a 100644
--- a/src/platforms/dummyPlatformForTypeSafety.ts
+++ b/src/platforms/dummyPlatformForTypeSafety.ts
@@ -16,6 +16,6 @@ export const dummyPlatformForTypeSafety: Platform = {
   getOAuthLink: dummyPlatformMethod,
 }
 
-function dummyPlatformMethod(): any {
+function dummyPlatformMethod(): any { // eslint-disable-line @typescript-eslint/no-explicit-any
   throw new Error(`Do not call dummy platform methods`)
 }
diff --git a/src/platforms/index.ts b/src/platforms/index.ts
index b5ac56f..a29a355 100644
--- a/src/platforms/index.ts
+++ b/src/platforms/index.ts
@@ -1,3 +1,4 @@
+import { forOf } from 'utils/general'
 import { dummyPlatformForTypeSafety } from './dummyPlatformForTypeSafety'
 import { Gitea } from './Gitea'
 import { Gitee } from './Gitee'
@@ -17,10 +18,9 @@ function resolvePlatform() {
 }
 
 function getPlatformName() {
-  const keys = Object.keys(platforms) as (keyof typeof platforms)[]
-  for (const key of keys) {
-    if (platform === platforms[key]) return key
-  }
+  return forOf(platforms, (name, $platform) => {
+    if (platform === $platform) return name
+  })
 }
 
 export const platform = resolvePlatform()
diff --git a/src/platforms/platform.d.ts b/src/platforms/platform.d.ts
index e555d7a..f449f53 100644
--- a/src/platforms/platform.d.ts
+++ b/src/platforms/platform.d.ts
@@ -23,9 +23,9 @@ type Platform = {
   getCurrentPath(branchName: string): string[] | null
   setOAuth(code: string): Promise<string | null>
   getOAuthLink(): string
-  delegatePJAXProps?(options?: {
-    node?: TreeNode
-  }): void | (React.DOMAttributes<HTMLElement> & Record<string, any>) // support data-* attributes
+  delegatePJAXProps?(options?: { node?: TreeNode }):
+    | (React.DOMAttributes<HTMLElement> & Record<string, unknown>) // support data-* attributes
+    | void
   loadWithPJAX?(url: string, element: HTMLElement): void
   usePlatformHooks?(): void
 }
diff --git a/src/utils/DOMHelper.ts b/src/utils/DOMHelper.ts
index fa56f3a..c27734c 100644
--- a/src/utils/DOMHelper.ts
+++ b/src/utils/DOMHelper.ts
@@ -47,7 +47,7 @@ export function $<T2>(
   existCallback: undefined | null,
   otherwise: () => T2,
 ): HTMLElement | null | T2
-export function $(selector: string, existCallback?: any, otherwise?: any) {
+export function $(selector: string, existCallback?: any, otherwise?: any) { // eslint-disable-line @typescript-eslint/no-explicit-any
   const element = document.querySelector(selector)
   if (element) {
     return existCallback ? existCallback(element) : element
diff --git a/src/utils/EventHub.ts b/src/utils/EventHub.ts
index 1fc02c5..381374b 100644
--- a/src/utils/EventHub.ts
+++ b/src/utils/EventHub.ts
@@ -18,8 +18,8 @@ export class EventSubscription<Data, Listener extends VoidFN<Data> = VoidFN<Data
 
 export class EventHub<
   Shape extends {
-    [event: string]: any
-  }
+    [event: string]: unknown
+  },
 > {
   ports: {
     [key in keyof Shape]: EventSubscription<Shape[key]>
diff --git a/src/utils/VisibleNodesGenerator/prepare.ts b/src/utils/VisibleNodesGenerator/prepare.ts
index bbce9da..cce967b 100644
--- a/src/utils/VisibleNodesGenerator/prepare.ts
+++ b/src/utils/VisibleNodesGenerator/prepare.ts
@@ -35,7 +35,7 @@ function recursiveMarkDiff(
     const [path] = node
     markDiff(path, state)
   } else {
-    const [name, children] = node
+    const [/* name */, children] = node
     for (const child of children) {
       recursiveMarkDiff(child, state, markDiff)
     }
diff --git a/src/utils/config/helper.ts b/src/utils/config/helper.ts
index 14bb299..ac69b04 100644
--- a/src/utils/config/helper.ts
+++ b/src/utils/config/helper.ts
@@ -73,10 +73,7 @@ function applyDefaultConfigs(configs: Partial<Config>) {
 
 export type VersionedConfig<SiteConfig> = Record<string, SiteConfig> & { configVersion: string }
 
-const prepareConfig = new Promise<void>(async resolve => {
-  await migrateConfig()
-  resolve()
-})
+const prepareConfig = new Promise((resolve, reject) => migrateConfig().then(resolve, reject))
 
 async function get(): Promise<Config> {
   await prepareConfig
diff --git a/src/utils/config/migrations/1.0.1.ts b/src/utils/config/migrations/1.0.1.ts
index 45d2a1b..c7904f5 100644
--- a/src/utils/config/migrations/1.0.1.ts
+++ b/src/utils/config/migrations/1.0.1.ts
@@ -1,3 +1,4 @@
+import { is } from 'utils/is'
 import { storageHelper } from 'utils/storageHelper'
 import { Migration } from '.'
 import { Storage } from '../../storageHelper'
@@ -5,7 +6,7 @@ import { Storage } from '../../storageHelper'
 export const migration: Migration = {
   version: '1.0.1',
   async migrate(version) {
-    const config: any | void = await storageHelper.get<Storage>([
+    const config: JSONObject | void = await storageHelper.get<Storage>([
       'configVersion',
       'sideBarWidth',
       'shortcut',
@@ -20,6 +21,7 @@ export const migration: Migration = {
       config &&
       (!('configVersion' in config) ||
         config.configVersion === null ||
+        !is.string(config.configVersion) ||
         config.configVersion < version)
     ) {
       await storageHelper.set({ platform_GitHub: config, configVersion: version })
diff --git a/src/utils/config/migrations/1.3.4.ts b/src/utils/config/migrations/1.3.4.ts
index 9fd8cd9..bf02f4f 100644
--- a/src/utils/config/migrations/1.3.4.ts
+++ b/src/utils/config/migrations/1.3.4.ts
@@ -1,3 +1,4 @@
+import { is } from 'utils/is'
 import { storageHelper } from 'utils/storageHelper'
 import { Migration } from '.'
 import { Storage } from '../../storageHelper'
@@ -6,7 +7,7 @@ import { Config, VersionedConfig } from '../helper'
 export const migration: Migration = {
   version: '1.3.4',
   async migrate(version) {
-    const config: any | void = await storageHelper.get<VersionedConfig<Config> & Storage>([
+    const config: JSONObject | void = await storageHelper.get<VersionedConfig<Config> & Storage>([
       'configVersion',
       'platform_undefined',
       'platform_GitHub',
@@ -15,6 +16,7 @@ export const migration: Migration = {
     if (
       config &&
       'configVersion' in config &&
+      is.string(config.configVersion) &&
       config.configVersion < version &&
       (config.platform_GitHub || config.platform_undefined) &&
       !config['platform_github.com']
diff --git a/src/utils/config/migrations/2.6.0.ts b/src/utils/config/migrations/2.6.0.ts
index d5a522f..2579bc3 100644
--- a/src/utils/config/migrations/2.6.0.ts
+++ b/src/utils/config/migrations/2.6.0.ts
@@ -13,12 +13,9 @@ export const migration: Migration = {
 
     await onConfigOutdated(version, async configs => {
       for (const key of Object.keys(configs)) {
-        if (
-          typeof configs[key] === 'object' &&
-          configs[key] !== null &&
-          'access_token' in configs[key]
-        ) {
-          const configBeforeMigrate: ConfigBeforeMigrate = configs[key]
+        const target = configs[key]
+        if (typeof target === 'object' && target !== null && 'access_token' in target) {
+          const configBeforeMigrate: ConfigBeforeMigrate = target
           const { access_token: accessToken, ...rest } = configBeforeMigrate
           const configAfterMigrate: ConfigAfterMigrate = {
             ...rest,
diff --git a/src/utils/config/migrations/3.0.0.ts b/src/utils/config/migrations/3.0.0.ts
index 4db2fba..2c4cbbd 100644
--- a/src/utils/config/migrations/3.0.0.ts
+++ b/src/utils/config/migrations/3.0.0.ts
@@ -16,7 +16,7 @@ export const migration: Migration = {
       const key = 'platform_github.com'
       const config = configs[key]
       if (typeof config === 'object' && config !== null && 'copySnippetButton' in config) {
-        const configBeforeMigrate: ConfigBeforeMigrate = config
+        const configBeforeMigrate = config as ConfigBeforeMigrate
         const { copySnippetButton, ...rest } = configBeforeMigrate
         if (copySnippetButton) {
           const configAfterMigrate: ConfigAfterMigrate = {
diff --git a/src/utils/config/migrations/3.5.0.ts b/src/utils/config/migrations/3.5.0.ts
index 1c25b3c..eb7415c 100644
--- a/src/utils/config/migrations/3.5.0.ts
+++ b/src/utils/config/migrations/3.5.0.ts
@@ -9,14 +9,14 @@ export const migration: Migration = {
       copyFileButton: boolean
     }
     type ConfigAfterMigrate = {
-      copyFileButton: boolean
+      copyFileButton: false
     }
 
     await onConfigOutdated(version, async configs => {
       const key = 'platform_github.com'
       const config = configs[key]
       if (typeof config === 'object' && config !== null && 'copyFileButton' in config) {
-        const configBeforeMigrate: ConfigBeforeMigrate = config
+        const configBeforeMigrate = config as ConfigBeforeMigrate
         const { copyFileButton, ...rest } = configBeforeMigrate
         if (copyFileButton) {
           const configAfterMigrate: ConfigAfterMigrate = {
diff --git a/src/utils/config/migrations/index.ts b/src/utils/config/migrations/index.ts
index 276c197..a864f86 100644
--- a/src/utils/config/migrations/index.ts
+++ b/src/utils/config/migrations/index.ts
@@ -19,14 +19,14 @@ export async function migrateConfig() {
   }
 }
 
-export async function onConfigOutdated<T extends { [key: string]: any }>(
+export async function onConfigOutdated<T extends JSONObject>(
   configVersion: string,
   runIfOutdated: (config: T) => Async<void>,
 ) {
   const config = await storageHelper.get<Storage>()
 
   if (config && config.configVersion < configVersion) {
-    const { configVersion: $configVersion, ...restConfig } = config
+    const { configVersion: $configVersion, ...restConfig } = config // eslint-disable-line @typescript-eslint/no-unused-vars
     await runIfOutdated(restConfig as T)
     await storageHelper.set({ configVersion })
   }
diff --git a/src/utils/general.ts b/src/utils/general.ts
index 982ed86..e06852f 100644
--- a/src/utils/general.ts
+++ b/src/utils/general.ts
@@ -60,21 +60,6 @@ export function friendlyFormatShortcut(shortcut?: string) {
   }
 }
 
-/**
- * if item's name matches path, return the depth of the item
- * else return 0
- */
-function measureDistance(item: TreeNode, path: TreeNode['name'][]): number {
-  const pathString = path.join('/')
-  if (item.name.startsWith(pathString + '/')) {
-    // If accessing a leading item of compressed node, path will be shorter than item.name
-    return path.length
-  } else if (pathString === item.name || pathString.startsWith(item.name + '/')) {
-    return item.name.split('/').length
-  }
-  return 0
-}
-
 export async function traverse<T>(
   range: T[] = [],
   conditionAndEffect: (node: T) => Async<boolean>,
@@ -121,7 +106,11 @@ export function parseURLSearch(search = window.location.search) {
   return new URLSearchParams(search)
 }
 
-export async function JSONRequest(url: string, data: any, extra: RequestInit = { method: 'post' }) {
+export async function JSONRequest<D>(
+  url: string,
+  data: D,
+  extra: RequestInit = { method: 'post' },
+) {
   return (
     await fetch(url, {
       mode: 'cors',
@@ -171,12 +160,12 @@ export function isValidRegexpSource(source: string) {
   return Boolean(safeRegexp(source))
 }
 
-export function withEffect<Method extends (...args: any[]) => any>(
+export function withEffect<Method extends (...args: any[]) => any>( // eslint-disable-line @typescript-eslint/no-explicit-any
   method: Method,
   effect: (payload: ReturnType<Method>) => void,
 ): (...args: Parameters<Method>) => ReturnType<Method> {
   return (...args) => {
-    const returnValue = method.apply(null, args)
+    const returnValue = method(...args)
     Promise.resolve(returnValue).then(effect)
     return returnValue
   }
@@ -186,22 +175,6 @@ export function run<T>(fn: () => T) {
   return fn()
 }
 
-export function createPromiseQueue() {
-  let promise: Promise<void>
-  return {
-    async enter() {
-      let leave: () => void
-      const current = new Promise<void>(resolve => (leave = () => resolve()))
-
-      const lastPromise = promise
-      promise = current!
-      if (lastPromise) await lastPromise
-
-      return leave!
-    },
-  }
-}
-
 export function isOpenInNewWindowClick(event: React.MouseEvent<HTMLElement, MouseEvent>) {
   return (
     (os === OperatingSystems.macOS && (event.metaKey || event.shiftKey)) ||
@@ -228,3 +201,11 @@ export function formatHash(hash?: string) {
 export function isNotFalsy<T>(value: T | undefined | null): value is T {
   return value !== undefined && value !== null
 }
+
+export function forOf<T, R>(target: T, callback: <K extends keyof T>(key: K, value: T[K]) => R) {
+  for (const key of Object.keys(target)) {
+    const $key = key as keyof typeof target
+    const r = callback($key, target[$key])
+    if (r !== undefined) return r
+  }
+}
diff --git a/src/utils/gitSubmodule.ts b/src/utils/gitSubmodule.ts
index c6ef1aa..35a82f7 100644
--- a/src/utils/gitSubmodule.ts
+++ b/src/utils/gitSubmodule.ts
@@ -10,7 +10,7 @@ const subModuleURLRegex = {
 function transformModuleGitURL(node: TreeNode, URL: string) {
   const matched = URL.match(subModuleURLRegex.git)
   if (!matched) return
-  const [_, userName, repoName] = matched
+  const [, userName, repoName] = matched
   return appendCommitPath(`https://${window.location.host}/${userName}/${repoName}`, node)
 }
 
diff --git a/src/utils/hooks/useAsyncMemo.ts b/src/utils/hooks/useAsyncMemo.ts
deleted file mode 100644
index 62e2f53..0000000
--- a/src/utils/hooks/useAsyncMemo.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import * as React from 'react'
-import { useStateIO } from './useStateIO'
-
-export function useAsyncMemo<T, D extends any[] | readonly any[]>(
-  factory: (dependencies: D) => T | Promise<T>,
-  deps: D,
-  initialValue: T,
-): T {
-  const firstTime = React.useRef(true)
-  const state = useStateIO<T>(() => initialValue)
-  React.useEffect(() => {
-    if (firstTime.current) firstTime.current = false
-    Promise.resolve(factory(deps)).then(consumed => state.onChange(() => consumed))
-  }, deps)
-  return state.value
-}
diff --git a/src/utils/hooks/useCatchNetworkError.ts b/src/utils/hooks/useCatchNetworkError.ts
index dbbb180..6885c3b 100644
--- a/src/utils/hooks/useCatchNetworkError.ts
+++ b/src/utils/hooks/useCatchNetworkError.ts
@@ -43,6 +43,6 @@ export function useCatchNetworkError() {
         }
       }
     },
-    [accessToken /* , stateContext.value, errorContext.value */],
+    [accessToken /* , stateContext.value, errorContext.value */], // eslint-disable-line react-hooks/exhaustive-deps
   )
 }
diff --git a/src/utils/hooks/useEffectOnSerializableUpdates.ts b/src/utils/hooks/useEffectOnSerializableUpdates.ts
index ecbcd4c..0ba2070 100644
--- a/src/utils/hooks/useEffectOnSerializableUpdates.ts
+++ b/src/utils/hooks/useEffectOnSerializableUpdates.ts
@@ -5,5 +5,6 @@ export function useEffectOnSerializableUpdates<T>(
   serialize: (value: T) => string,
   onChange: (value: T) => void,
 ) {
-  React.useEffect(() => onChange(value), [onChange, serialize(value)])
+  const serialized = React.useMemo(() => serialize(value), [value, serialize])
+  React.useEffect(() => onChange(value), [onChange, serialized]) // eslint-disable-line react-hooks/exhaustive-deps
 }
diff --git a/src/utils/hooks/useMediaStyleSheet.ts b/src/utils/hooks/useMediaStyleSheet.ts
deleted file mode 100644
index 40d3c76..0000000
--- a/src/utils/hooks/useMediaStyleSheet.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import * as React from 'react'
-import { createStyleSheet, setStyleSheetMedia } from '../general'
-
-export function useMediaStyleSheet(
-  content: string,
-  getMediaQuery: (width: number) => string[],
-  size: number,
-) {
-  const style = React.useRef<HTMLStyleElement>()
-  // this order may prevent first effect actually occur at first time
-  React.useEffect(() => {
-    setSheetMedia()
-  }, [size])
-  React.useEffect(() => {
-    style.current = createStyleSheet(content)
-    setSheetMedia()
-  }, [])
-  function setSheetMedia() {
-    if (style.current)
-      setStyleSheetMedia(
-        style.current,
-        getMediaQuery(size)
-          .map(query => `(${query})`)
-          .join(' and '),
-      )
-  }
-}
diff --git a/src/utils/hooks/usePJAX.ts b/src/utils/hooks/usePJAX.ts
index 396dcaf..9234e56 100644
--- a/src/utils/hooks/usePJAX.ts
+++ b/src/utils/hooks/usePJAX.ts
@@ -22,7 +22,7 @@ const config: Config = {
   },
   link: 'a:not(a)', // this helps fixing the go-back-in-history issue
   form: 'form:not(form)', // prevent blocking form submissions
-  fallback(target, reason) {
+  fallback(/* target, reason */) {
     // prevent unexpected reload
   },
 }
diff --git a/src/utils/hooks/useResizeHandler.ts b/src/utils/hooks/useResizeHandler.ts
index 2911a30..9c937d4 100644
--- a/src/utils/hooks/useResizeHandler.ts
+++ b/src/utils/hooks/useResizeHandler.ts
@@ -31,13 +31,14 @@ export function useResizeHandler(
       if (!pointerDown.current) return
       const [x0, y0] = initialSizeRef.current
       // Allow minor movement, this happened unintentionally for few times when I use track pad
-      pointerMoved.current = pointerMoved.current || (clientX - x0) ** 2 + (clientY - y0) ** 2 > distanceTolerance ** 2
+      pointerMoved.current =
+        pointerMoved.current || (clientX - x0) ** 2 + (clientY - y0) ** 2 > distanceTolerance ** 2
       const [x1, y1] = baseSize.current
       onResize([x1 + clientX - x0, y1 + clientY - y0])
     }
     window.addEventListener('pointermove', onPointerMove)
     return () => window.removeEventListener('pointermove', onPointerMove)
-  }, [onResize])
+  }, [onResize, distanceTolerance])
 
   React.useEffect(() => {
     const onPointerUp = (e: PointerEvent) => {
@@ -53,16 +54,19 @@ export function useResizeHandler(
     }
     window.addEventListener('pointerup', onPointerUp)
     return () => window.removeEventListener('pointerup', onPointerUp)
-  }, [])
+  }, [onClick, onResizeStateChange])
 
-  const onPointerDown = React.useCallback((e: React.PointerEvent) => {
-    e.preventDefault() // Prevent unexpected selection when dragging in Safari
-    const { clientX, clientY } = e
-    pointerDown.current = true
-    initialSizeRef.current = [clientX, clientY]
-    baseSize.current = latestPropSize.current
-    onResizeStateChange?.('resizing')
-  }, [])
+  const onPointerDown = React.useCallback(
+    (e: React.PointerEvent) => {
+      e.preventDefault() // Prevent unexpected selection when dragging in Safari
+      const { clientX, clientY } = e
+      pointerDown.current = true
+      initialSizeRef.current = [clientX, clientY]
+      baseSize.current = latestPropSize.current
+      onResizeStateChange?.('resizing')
+    },
+    [onResizeStateChange],
+  )
 
   return { onPointerDown }
 }
diff --git a/src/utils/hooks/useUpdateReason.ts b/src/utils/hooks/useUpdateReason.ts
index 327bf74..5b3abf2 100644
--- a/src/utils/hooks/useUpdateReason.ts
+++ b/src/utils/hooks/useUpdateReason.ts
@@ -5,19 +5,19 @@ export function useUpdateReason<P>(props: P) {
   const lastPropsRef = React.useRef<P>(props)
   React.useEffect(() => {
     if (IN_PRODUCTION_MODE) return
-    let output: unknown[][] = []
+    const output: ([string, keyof P, P[keyof P]] | [string, keyof P, P[keyof P], P[keyof P]])[] = []
     for (const key of Object.keys(props)) {
       if (key === 'children') continue
       const $key = key as keyof P
-      if (!(key in lastPropsRef.current)) output.push([`[Added]`, key, props[$key]])
+      if (!(key in lastPropsRef.current)) output.push([`[Added]`, $key, props[$key]])
       if (lastPropsRef.current[$key] !== props[$key])
-        output.push([`[Updated]`, key, lastPropsRef.current[$key], props[$key]])
+        output.push([`[Updated]`, $key, lastPropsRef.current[$key], props[$key]])
     }
 
     for (const key of Object.keys(lastPropsRef.current)) {
       if (key === 'children') continue
       const $key = key as keyof P
-      if (!(key in props)) output.push([`[Removed]`, key, props[$key]])
+      if (!(key in props)) output.push([`[Removed]`, $key, props[$key]])
     }
 
     if (output.length) {
diff --git a/src/utils/keyHelper.ts b/src/utils/keyHelper.ts
index 407d513..91f3f84 100644
--- a/src/utils/keyHelper.ts
+++ b/src/utils/keyHelper.ts
@@ -46,8 +46,8 @@ export function parseEvent(e: KeyboardEvent | React.KeyboardEvent) {
     const keys = { meta, ctrl, shift, alt, [code]: true }
     const combination = parse(
       Object.entries(keys)
-        .filter(([key, pressed]) => pressed)
-        .map(([key, pressed]) => key)
+        .filter(([, pressed]) => pressed)
+        .map(([key]) => key)
         .join('+'),
     )
     return combination
diff --git a/src/utils/parseIconMapCSV.ts b/src/utils/parseIconMapCSV.ts
index a820307..979442c 100644
--- a/src/utils/parseIconMapCSV.ts
+++ b/src/utils/parseIconMapCSV.ts
@@ -71,7 +71,7 @@ export function getFileIconURL(node: TreeNode) {
 // 1. swap time with space
 // 2. prevent app crash on when extension context invalidates
 const extensionURL = browser.runtime.getURL('').replace(/\/$/, '')
-export function getIconURL(type: 'folder' | 'file', name: string = 'default', open?: boolean) {
+export function getIconURL(type: 'folder' | 'file', name = 'default', open?: boolean) {
   const filename =
     (name === 'default' ? 'default_' + type : type + '_type_' + name) +
     (open ? '_opened' : '') +
diff --git a/src/utils/storageHelper.ts b/src/utils/storageHelper.ts
index e3dc40a..e393f9f 100644
--- a/src/utils/storageHelper.ts
+++ b/src/utils/storageHelper.ts
@@ -9,20 +9,12 @@ export type Storage = {
   // ['platform_github.com']?: Config
 }
 
-async function get<
-  T extends {
-    [key: string]: any
-  }
->(mapping: string | string[] | null = null): Promise<T | undefined> {
-  try {
-    return (await localStorage.get(mapping || undefined)) as T
-  } catch (err) {}
+async function get<T extends JSONObject>(mapping: string | string[] | null = null) {
+  return (await localStorage.get(mapping || undefined)) as T | undefined
 }
 
-function set(value: any): Promise<void> | void {
-  try {
-    return localStorage.set(value)
-  } catch (err) {}
+function set<T>(value: T): Promise<void> | void {
+  return localStorage.set(value)
 }
 
 export const storageHelper = { get, set }

From 9c6ccbe2fcf78178e386f4aebdf7a960662060cc Mon Sep 17 00:00:00 2001
From: EnixCoda <enixcoda@gmail.com>
Date: Tue, 17 May 2022 23:06:38 +0800
Subject: [PATCH 21/93] chore: add basic type assertion util

---
 src/global.d.ts | 11 +++++++++--
 src/utils/is.ts | 16 ++++++++++++++++
 2 files changed, 25 insertions(+), 2 deletions(-)
 create mode 100644 src/utils/is.ts

diff --git a/src/global.d.ts b/src/global.d.ts
index 668028f..7c00502 100644
--- a/src/global.d.ts
+++ b/src/global.d.ts
@@ -17,8 +17,8 @@ type TreeNode = {
   sha?: string
   accessDenied?: boolean
   comments?: {
-    active: number,
-    resolved: number,
+    active: number
+    resolved: number
   }
   diff?: {
     status: 'modified' | 'added' | 'removed' | 'renamed'
@@ -43,3 +43,10 @@ type VoidFN<T> = (payload: T) => void
 
 type Async<T> = T | Promise<T>
 type EnumString<S extends string> = S | (string & {})
+
+type JSONPrimitive = string | number | boolean | null | undefined
+type JSONObject = {
+  [key: string]: JSONValue
+}
+type JSONArray = JSONValue[]
+type JSONValue = JSONPrimitive | JSONObject | JSONArray
diff --git a/src/utils/is.ts b/src/utils/is.ts
new file mode 100644
index 0000000..b2ad89d
--- /dev/null
+++ b/src/utils/is.ts
@@ -0,0 +1,16 @@
+export const is = {
+  boolean: (d: unknown): d is boolean => typeof d === 'boolean',
+  number: (d: unknown): d is number => typeof d === 'number',
+  string: (d: unknown): d is string => typeof d === 'string',
+  JSON: {
+    object(d: unknown): d is JSONObject {
+      return (typeof d === 'object' && d && !Array.isArray(d)) || false
+    },
+    array(d: unknown): d is JSONArray {
+      return Array.isArray(d)
+    },
+    plain(d: unknown): d is JSONPrimitive {
+      return d === null || d === 'undefined' || is.boolean(d) || is.number(d) || is.string(d)
+    },
+  },
+}

From 9622a5a55752627742928ed65c903ffdc59e21b2 Mon Sep 17 00:00:00 2001
From: EnixCoda <enixcoda@gmail.com>
Date: Tue, 17 May 2022 23:06:47 +0800
Subject: [PATCH 22/93] fix: solve UI layering

---
 src/styles/index.scss | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/styles/index.scss b/src/styles/index.scss
index 52ec238..d6f70b0 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -399,9 +399,6 @@ $minimal-z-index: max(
         left: calc(0px - #{$resizeHandlerWidth} - var(--gitako-width));
       }
     }
-
-    .gitako-side-bar-body-wrapper-content {
-    }
   }
   .#{$name}-resize-handler {
     display: flex;
@@ -872,6 +869,7 @@ $minimal-z-index: max(
       flex-direction: column;
       max-height: calc(100vh - 240px);
       min-height: 240px;
+      z-index: 1;
 
       &-header {
         display: flex;
@@ -881,7 +879,7 @@ $minimal-z-index: max(
         padding: 10px;
         box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.2), 0 3px 4px 0 rgba(0, 0, 0, 0.14),
           0 3px 3px -2px rgba(0, 0, 0, 0.12);
-        z-index: 1;
+        z-index: 2;
       }
 
       &-content {

From ded704d6c0af0fd27ea72ac66ea1b48903199a65 Mon Sep 17 00:00:00 2001
From: EnixCoda <enixcoda@gmail.com>
Date: Tue, 17 May 2022 23:07:23 +0800
Subject: [PATCH 23/93] chore: deprecate driver error catcher

---
 src/analytics.ts      |  14 -----
 src/content.tsx       |   4 --
 src/driver/connect.ts | 119 ------------------------------------------
 3 files changed, 137 deletions(-)
 delete mode 100644 src/driver/connect.ts

diff --git a/src/analytics.ts b/src/analytics.ts
index 341a71e..1ad233f 100644
--- a/src/analytics.ts
+++ b/src/analytics.ts
@@ -1,5 +1,4 @@
 import * as Sentry from '@sentry/browser'
-import { Middleware } from 'driver/connect.js'
 import { IN_PRODUCTION_MODE, VERSION } from 'env'
 import { platform } from 'platforms'
 import { forOf } from 'utils/general'
@@ -57,19 +56,6 @@ const sentryOptions: Sentry.BrowserOptions = {
 }
 Sentry.init(sentryOptions)
 
-export const withErrorLog: Middleware = function withErrorLog(method, args) {
-  return [
-    async function (...args) {
-      try {
-        await method(...args)
-      } catch (error) {
-        if (error instanceof Error) raiseError(error)
-      }
-    } as typeof method,
-    args,
-  ]
-}
-
 export function raiseError(error: Error, extra?: unknown) {
   if (!IN_PRODUCTION_MODE || platform.isEnterprise()) {
     // ignore errors from enterprise to get less noise on Sentry
diff --git a/src/content.tsx b/src/content.tsx
index cc11087..ebf54ca 100644
--- a/src/content.tsx
+++ b/src/content.tsx
@@ -1,14 +1,10 @@
-import { withErrorLog } from 'analytics'
 import { Gitako } from 'components/Gitako'
-import { addMiddleware } from 'driver/connect'
 import { platform } from 'platforms'
 import * as React from 'react'
 import * as ReactDOM from 'react-dom'
 import './content.scss'
 
 if (platform.resolvePartialMetaData()) {
-  addMiddleware(withErrorLog)
-
   if (document.readyState === 'loading') {
     document.addEventListener('DOMContentLoaded', init)
   } else {
diff --git a/src/driver/connect.ts b/src/driver/connect.ts
deleted file mode 100644
index f710bcc..0000000
--- a/src/driver/connect.ts
+++ /dev/null
@@ -1,119 +0,0 @@
-import * as React from 'react'
-
-export type Method<Args extends any[] = any[]> = (...args: Args) => void | Promise<void>
-export type Middleware = <M extends Method, MM extends Method>(
-  method: M,
-  args: Parameters<M>,
-) => [MM | M, Parameters<MM | M>]
-
-const middlewares: Middleware[] = []
-
-export function addMiddleware(middleware: Middleware) {
-  if (typeof middleware !== 'function') return null
-  const m = middleware.bind(null)
-  middlewares.push(m)
-  return function removeMiddleware() {
-    const index = middlewares.indexOf(m)
-    if (index === -1) return
-    middlewares.splice(index, 1)
-  }
-}
-
-const applyMiddlewares: Middleware = function applyMiddlewares(method, args) {
-  for (const middleware of middlewares) {
-    ;[method = method, args = args] = middleware(method, args)
-  }
-  return [method, args]
-}
-
-function run<M extends Method>([method, args]: [M, Parameters<M>]) {
-  method.apply(null, args)
-}
-
-export type DispatchState<Props, State> = React.Component<Props, State>['setState']
-export type GetState<Props, State> = () => { state: State; props: Props }
-export type TriggerOtherMethod<Props, State> = <Args extends any[]>(
-  methodCreator: MethodCreator<Props, State, Args>,
-  ...args: Parameters<ReturnType<MethodCreator<Props, State, Args>>>
-) => void
-
-export type Dispatch<Props, State> = {
-  set: DispatchState<Props, State>
-  get: GetState<Props, State>
-  call: TriggerOtherMethod<Props, State>
-}
-
-export type MethodCreator<Props, State, Args extends any[] = []> = (
-  dispatch: Dispatch<Props, State>,
-) => Method<Args>
-
-export type Sources<P, S> = {
-  [key: string]: MethodCreator<P, S, any>
-}
-type WrappedMethods = {
-  [key: string]: Method
-}
-
-function link<P, S>(instance: React.Component<P, S>, sources: Sources<P, S>): WrappedMethods {
-  const wrappedMethods: WrappedMethods = {
-    /* [keyof sources] -> wrappedMethods.method */
-  }
-  const map = new Map<
-    MethodCreator<P, S, any>,
-    Method
-  >(/* sources.creator -> wrappedMethods.method */)
-
-  const dispatchCall: TriggerOtherMethod<P, S> = (createMethod, ...otherArgs) => {
-    const isFromSource = sourcesValues.includes(createMethod)
-    if (isFromSource) {
-      const method = map.get(createMethod)
-      if (!method) throw new Error('Method not found')
-      const runnable = applyMiddlewares(method, otherArgs)
-      run(runnable)
-    }
-  }
-  const dispatchState: DispatchState<P, S> = (updater, callback) => {
-    instance.setState(updater, callback)
-  }
-  const prepareState: GetState<P, S> = () => ({ state: instance.state, props: instance.props })
-  const dispatch: Dispatch<P, S> = {
-    call: dispatchCall,
-    get: prepareState,
-    set: dispatchState,
-  }
-
-  Object.entries(sources).forEach(([key, createMethod]) => {
-    const method = createMethod(dispatch)
-    wrappedMethods[key] = method
-    map.set(createMethod, method)
-  })
-
-  const sourcesValues = Object.values(sources)
-
-  return wrappedMethods
-}
-
-export function connect<BaseP, ExtraP>(mapping: Sources<BaseP, ExtraP>) {
-  return function linkComponent<State, ComponentType extends React.ComponentType<BaseP & ExtraP>>(
-    Component: ComponentType,
-  ) {
-    return class ConnectedComponent extends React.PureComponent<BaseP, ExtraP, State> {
-      static displayName = `Connected(${Component.displayName || Component.name})`
-      static defaultProps = Component.defaultProps
-
-      state: ExtraP = {} as ExtraP
-      connectedMethods: WrappedMethods = link<BaseP, ExtraP>(this, mapping)
-
-      render() {
-        const props = Object.assign({}, this.props, this.connectedMethods, this.state)
-        return React.createElement(Component, props)
-      }
-    }
-  }
-}
-
-export type GetCreatedMethod<MC> = MC extends MethodCreator<infer P, infer S, infer Args>
-  ? Args extends any[]
-    ? (...args: Args) => void
-    : never
-  : never

From 536d191fb8f19d4046744b8891a39a29e83a5af2 Mon Sep 17 00:00:00 2001
From: EnixCoda <enixcoda@gmail.com>
Date: Wed, 18 May 2022 22:36:52 +0800
Subject: [PATCH 24/93] refactor: scroll to focused element

---
 src/components/FileExplorer/ListView.tsx      | 28 ++++++++-----------
 .../hooks/useReactWindowAlignMode.tsx         | 13 ---------
 src/components/FileExplorer/index.tsx         |  3 --
 3 files changed, 12 insertions(+), 32 deletions(-)
 delete mode 100644 src/components/FileExplorer/hooks/useReactWindowAlignMode.tsx

diff --git a/src/components/FileExplorer/ListView.tsx b/src/components/FileExplorer/ListView.tsx
index ec55af2..127d3bc 100644
--- a/src/components/FileExplorer/ListView.tsx
+++ b/src/components/FileExplorer/ListView.tsx
@@ -1,7 +1,7 @@
 import { useConfigs } from 'containers/ConfigsContext'
 import { platform } from 'platforms'
 import * as React from 'react'
-import { Align as ReactWindowAlign, FixedSizeList } from 'react-window'
+import { FixedSizeList } from 'react-window'
 import { useOnLocationChange } from 'utils/hooks/useOnLocationChange'
 import { useOnPJAXDone } from 'utils/hooks/usePJAX'
 import { NodeRendererContext } from '.'
@@ -11,7 +11,6 @@ type ListViewProps = {
   height: number
   width: number
   nodeRendererContext: NodeRendererContext
-  alignMode: ReactWindowAlign
   metaData: MetaData
   expandTo: (path: string[]) => void
 }
@@ -22,25 +21,22 @@ export function ListView({
   metaData,
   expandTo,
   nodeRendererContext,
-  alignMode,
 }: ListViewProps) {
   const { visibleNodes } = nodeRendererContext
   const { focusedNode, nodes } = visibleNodes
+
   const listRef = React.useRef<FixedSizeList<NodeRendererContext>>(null)
-
-  // Scroll to focused node
+  const index = React.useMemo(
+    () =>
+      width && height && focusedNode?.path
+        ? nodes.findIndex(node => node.path === focusedNode.path)
+        : -1,
+    [focusedNode?.path, nodes, width, height],
+  )
   React.useEffect(() => {
-    if (listRef.current && focusedNode?.path) {
-      const index = nodes.findIndex(node => node.path === focusedNode.path)
-      if (index !== -1) {
-        listRef.current.scrollToItem(index, alignMode)
-      }
-    }
-  }, [focusedNode?.path, nodes, alignMode])
+    if (listRef.current && index !== -1) listRef.current.scrollToItem(index, 'smart')
+  }, [index])
 
-  // For some reason, removing the deps array above results in bug:
-  // If scroll fast and far, then clicking on items would result in redirect
-  // Not know the reason :(
   const goToCurrentItem = React.useCallback(() => {
     const targetPath = platform.getCurrentPath(metaData.branchName)
     if (targetPath) expandTo(targetPath)
@@ -54,7 +50,7 @@ export function ListView({
   return (
     <FixedSizeList<NodeRendererContext>
       ref={listRef}
-      itemKey={(index, { visibleNodes }) => visibleNodes?.nodes[index]?.path}
+      itemKey={(index, { visibleNodes }) => visibleNodes.nodes[index]?.path}
       itemData={nodeRendererContext}
       itemCount={visibleNodes.nodes.length}
       itemSize={compactFileTree ? 24 : 37}
diff --git a/src/components/FileExplorer/hooks/useReactWindowAlignMode.tsx b/src/components/FileExplorer/hooks/useReactWindowAlignMode.tsx
deleted file mode 100644
index 331c387..0000000
--- a/src/components/FileExplorer/hooks/useReactWindowAlignMode.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import * as React from 'react'
-import { Align as ReactWindowAlign } from 'react-window'
-import { useStateIO } from 'utils/hooks/useStateIO'
-
-export function useReactWindowAlignMode(searched: boolean) {
-  const $scrollMode = useStateIO<ReactWindowAlign>('start')
-  React.useEffect(() => {
-    // Use `auto` as default mode to prevent initial misalignment
-    // Switch to `smart` mode when start searching to make sure alignment is user-friendly when jump to files
-    if (searched && $scrollMode.value === 'start') $scrollMode.onChange('smart')
-  }, [searched, $scrollMode])
-  return $scrollMode.value
-}
diff --git a/src/components/FileExplorer/index.tsx b/src/components/FileExplorer/index.tsx
index e4fe6d0..e1dd122 100644
--- a/src/components/FileExplorer/index.tsx
+++ b/src/components/FileExplorer/index.tsx
@@ -23,7 +23,6 @@ import {
 import { useHandleNodeClick } from './hooks/useOnNodeClick'
 import { useOnSearch } from './hooks/useOnSearch'
 import { useVisibleNodesGeneratorMethods } from './hooks/useOnVisibleNodesGeneratorReady'
-import { useReactWindowAlignMode } from './hooks/useReactWindowAlignMode'
 import { useRenderLabelText } from './hooks/useRenderLabelText'
 import { useVisibleNodesGenerator } from './hooks/useSetupTree'
 import { ListView } from './ListView'
@@ -75,7 +74,6 @@ export function FileExplorer({ freeze, metaData }: Props) {
     renderLabelText,
   )
 
-  const alignMode = useReactWindowAlignMode(searched)
   const state = useLoadedContext(SideBarStateContext).value
   useFocusFileExplorerOnFirstRender()
 
@@ -125,7 +123,6 @@ export function FileExplorer({ freeze, metaData }: Props) {
                           nodeRendererContext={nodeRendererContext}
                           expandTo={expandTo}
                           metaData={metaData}
-                          alignMode={alignMode}
                         />
                       </div>
                     )}

From dd3f611db8fe415975b50bf1157b599fbe2c7d43 Mon Sep 17 00:00:00 2001
From: EnixCoda <enixcoda@gmail.com>
Date: Thu, 19 May 2022 00:01:21 +0800
Subject: [PATCH 25/93] fix: solve compatibility issue in Firefox

---
 package.json                          |  5 +-
 scripts/fix-deps/index.js             | 43 +++++++++++++++++
 scripts/fix-deps/pjax-api.js          | 45 +++++++++++++++++
 scripts/fix-deps/styled-components.js | 20 ++++++++
 scripts/fix-pjax-api.js               | 69 ---------------------------
 5 files changed, 112 insertions(+), 70 deletions(-)
 create mode 100644 scripts/fix-deps/index.js
 create mode 100644 scripts/fix-deps/pjax-api.js
 create mode 100644 scripts/fix-deps/styled-components.js
 delete mode 100644 scripts/fix-pjax-api.js

diff --git a/package.json b/package.json
index b07075f..509beca 100644
--- a/package.json
+++ b/package.json
@@ -12,7 +12,7 @@
     "dev-safari": "TARGET=safari yarn run dev",
     "debug-firefox": "web-ext run --source-dir=dist --firefox-profile=firefox-profile --profile-create-if-missing --keep-profile-changes --start-url github.com/EnixCoda/Gitako",
     "analyse-bundle": "ANALYSE= NODE_ENV=production webpack",
-    "postinstall": "node scripts/fix-pjax-api",
+    "postinstall": "node scripts/fix-deps",
     "build": "VERSION=v$(node scripts/get-version.js) NODE_ENV=production webpack",
     "roll": "make release",
     "test": "yarn run test:parallel && yarn run test:non-parallel",
@@ -109,6 +109,9 @@
       "plugin:react/recommended",
       "plugin:react-hooks/recommended"
     ],
+    "ignorePatterns": [
+      "scripts"
+    ],
     "rules": {
       "@typescript-eslint/ban-types": "off"
     }
diff --git a/scripts/fix-deps/index.js b/scripts/fix-deps/index.js
new file mode 100644
index 0000000..ec1cc9c
--- /dev/null
+++ b/scripts/fix-deps/index.js
@@ -0,0 +1,43 @@
+const fs = require('fs').promises
+const path = require('path')
+
+/**
+ * This script rewrites local dependency files to resolve compatibility issues.
+ * This is a bit dirty but really effective.
+ */
+
+function modify(source = '', pairs = []) {
+  for (const [original, replace] of pairs) {
+    if (source.includes(original)) {
+      source = source.replace(original, replace)
+    } else {
+      throw new Error(`Original string not found: ${JSON.stringify(original)}`)
+    }
+
+    if (source.includes(original)) {
+      throw new Error(`More than one original string found`, JSON.stringify(original))
+    }
+  }
+
+  return source
+}
+
+const nodeModulesPath = path.resolve(__dirname, '../../', `node_modules`)
+
+exports.fixDep = async function fixDep(targetFilePath, pairs) {
+  const filePath = path.resolve(nodeModulesPath, targetFilePath)
+  const source = await fs.readFile(filePath, 'utf-8')
+  const modified = modify(source, pairs,)
+  await fs.writeFile(filePath, modified, 'utf-8')
+}
+
+async function fixDeps() {
+  for (const fix of [
+    require('./pjax-api').fix,
+    require('./styled-components').fix,
+  ]) {
+    await fix()
+  }
+}
+
+fixDeps()
diff --git a/scripts/fix-deps/pjax-api.js b/scripts/fix-deps/pjax-api.js
new file mode 100644
index 0000000..e2f1582
--- /dev/null
+++ b/scripts/fix-deps/pjax-api.js
@@ -0,0 +1,45 @@
+const { fixDep } = require('.')
+
+const targetFilePath = `pjax-api/dist/pjax-api.js`;
+const pairs = [
+  // Firefox
+  [
+    `void xhr.open(method, requestURL.path, true);`,
+    `void xhr.open(method, requestURL.reference, true);`,
+  ],
+  // Firefox
+  [
+    `this.document = this.xhr.responseXML.cloneNode(true);`,
+    `this.document = this.xhr.responseXML;`,
+  ],
+  // Chrome: modifying cross-context history state causes troubles
+  // Scroll position can still be restored without this function
+  [
+    `
+            function savePosition() {
+                var _a;
+                void window.history.replaceState({
+                    ...window.history.state,
+                    position: {
+                        ...(_a = window.history.state) === null || _a === void 0 ? void 0 : _a.position,
+                        top: window.pageYOffset,
+                        left: window.pageXOffset
+                    }
+                }, document.title);
+            }`,
+    `
+            function savePosition() {
+                return;
+            }`,
+  ],
+]
+
+exports.fix = async () => {
+  try {
+    await fixDep(targetFilePath, pairs)
+  } catch (err) {
+    console.error((err && err.message) || err)
+    const shouldTerminate = process.env.IGNORE_FIX_PJAX_API_FAILURE !== 'true'
+    if (shouldTerminate) process.exit(1)
+  }
+}
diff --git a/scripts/fix-deps/styled-components.js b/scripts/fix-deps/styled-components.js
new file mode 100644
index 0000000..b3022cf
--- /dev/null
+++ b/scripts/fix-deps/styled-components.js
@@ -0,0 +1,20 @@
+const { fixDep } = require('.')
+
+const targetFilePath = `styled-components/dist/styled-components.browser.esm.js`;
+const pairs = [
+  // Firefox
+  // disable production check in `checkDynamicCreation`
+  [
+    `function(e,t){if("production"!==process.env.NODE_ENV)`,
+    `function(e,t){if(false)`,
+  ],
+]
+
+exports.fix = async () => {
+  try {
+    await fixDep(targetFilePath, pairs)
+  } catch (err) {
+    console.error((err && err.message) || err)
+    process.exit(1)
+  }
+}
diff --git a/scripts/fix-pjax-api.js b/scripts/fix-pjax-api.js
deleted file mode 100644
index b2b8b4a..0000000
--- a/scripts/fix-pjax-api.js
+++ /dev/null
@@ -1,69 +0,0 @@
-/**
- * This script rewrites code of pjax-api to resolve compatibility issues.
- * This is a bit dirty but really effective.
- */
-const fs = require('fs').promises
-const path = require('path')
-
-function modify(source = '', pairs = []) {
-  for (const [original, replace] of pairs) {
-    if (source.includes(original)) {
-      source = source.replace(original, replace)
-    } else {
-      throw new Error(`Original string not found: ${JSON.stringify(original)}`)
-    }
-
-    if (source.includes(original)) {
-      throw new Error(`More than one original string found`, JSON.stringify(original))
-    }
-  }
-
-  return source
-}
-
-async function fixPJAXAPI(loose) {
-  const pairs = [
-    // Firefox
-    [
-      `void xhr.open(method, requestURL.path, true);`,
-      `void xhr.open(method, requestURL.reference, true);`,
-    ],
-    // Firefox
-    [
-      `this.document = this.xhr.responseXML.cloneNode(true);`,
-      `this.document = this.xhr.responseXML;`,
-    ],
-    // Chrome: modifying cross-context history state causes troubles
-    // Scroll position can still be restored without this function
-    [
-      `
-            function savePosition() {
-                var _a;
-                void window.history.replaceState({
-                    ...window.history.state,
-                    position: {
-                        ...(_a = window.history.state) === null || _a === void 0 ? void 0 : _a.position,
-                        top: window.pageYOffset,
-                        left: window.pageXOffset
-                    }
-                }, document.title);
-            }`,
-      `
-            function savePosition() {
-                return;
-            }`,
-    ],
-  ]
-  try {
-    const filePath = path.resolve(__dirname, '..', `node_modules/pjax-api/dist/pjax-api.js`)
-    const source = await fs.readFile(filePath, 'utf-8')
-    const modified = modify(source, pairs, loose)
-    await fs.writeFile(filePath, modified, 'utf-8')
-  } catch (err) {
-    console.error((err && err.message) || err)
-    const shouldTerminate = process.env.IGNORE_FIX_PJAX_API_FAILURE !== 'true'
-    if (shouldTerminate) process.exit(1)
-  }
-}
-
-fixPJAXAPI()

From 8cb16fff6cf69ee75635de9199930fda853c9ddd Mon Sep 17 00:00:00 2001
From: EnixCoda <enixcoda@gmail.com>
Date: Tue, 24 May 2022 22:32:25 +0800
Subject: [PATCH 26/93] chore: render in the react 18 way

---
 src/content.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/content.tsx b/src/content.tsx
index ebf54ca..f4200f9 100644
--- a/src/content.tsx
+++ b/src/content.tsx
@@ -1,7 +1,7 @@
 import { Gitako } from 'components/Gitako'
 import { platform } from 'platforms'
 import * as React from 'react'
-import * as ReactDOM from 'react-dom'
+import { createRoot } from 'react-dom/client'
 import './content.scss'
 
 if (platform.resolvePartialMetaData()) {
@@ -16,7 +16,7 @@ async function init() {
   await injectStyles(browser.runtime.getURL('content.css'))
   const SideBarElement = document.createElement('div')
   document.body.appendChild(SideBarElement)
-  ReactDOM.render(<Gitako />, SideBarElement)
+  createRoot(SideBarElement).render(<Gitako />)
 }
 
 // injects a copy of stylesheets so that other extensions(e.g. dark reader) could read

From ec78f36e67679a85b0efd92700f4a3c7dbeb1122 Mon Sep 17 00:00:00 2001
From: EnixCoda <enixcoda@gmail.com>
Date: Thu, 26 May 2022 22:40:37 +0800
Subject: [PATCH 27/93] fix: get visible nodes properly

---
 .../FileExplorer/hooks/useSetupTree.tsx       | 22 +++++++++----------
 .../FileExplorer/useVisibleNodes.tsx          | 11 ++++++++--
 2 files changed, 20 insertions(+), 13 deletions(-)

diff --git a/src/components/FileExplorer/hooks/useSetupTree.tsx b/src/components/FileExplorer/hooks/useSetupTree.tsx
index 521b429..74779f9 100644
--- a/src/components/FileExplorer/hooks/useSetupTree.tsx
+++ b/src/components/FileExplorer/hooks/useSetupTree.tsx
@@ -40,17 +40,17 @@ export function useVisibleNodesGenerator(metaData: MetaData) {
 
           setStateContext('tree-rendering')
 
-          const visibleNodesGenerator = new VisibleNodesGenerator({
-            root: treeRoot,
-            defer,
-            compress: config.compressSingletonFolder,
-            async getTreeData(path) {
-              const { root } = await platform.getTreeData(metaData, path, false, accessToken)
-              return root
-            },
-          })
-
-          setVisibleNodesGenerator(visibleNodesGenerator)
+          setVisibleNodesGenerator(
+            new VisibleNodesGenerator({
+              root: treeRoot,
+              defer,
+              compress: config.compressSingletonFolder,
+              async getTreeData(path) {
+                const { root } = await platform.getTreeData(metaData, path, false, accessToken)
+                return root
+              },
+            }),
+          )
 
           setStateContext('tree-rendered')
         })
diff --git a/src/components/FileExplorer/useVisibleNodes.tsx b/src/components/FileExplorer/useVisibleNodes.tsx
index f5b1841..7d70b73 100644
--- a/src/components/FileExplorer/useVisibleNodes.tsx
+++ b/src/components/FileExplorer/useVisibleNodes.tsx
@@ -2,7 +2,14 @@ import { useEffect, useState } from 'react'
 import { VisibleNodes, VisibleNodesGenerator } from 'utils/VisibleNodesGenerator'
 
 export function useVisibleNodes(visibleNodesGenerator: VisibleNodesGenerator | null) {
-  const [visibleNodes, setVisibleNodes] = useState<VisibleNodes | null>(null)
-  useEffect(() => visibleNodesGenerator?.onUpdate(setVisibleNodes), [visibleNodesGenerator])
+  const [visibleNodes, setVisibleNodes] = useState<VisibleNodes | null>(
+    visibleNodesGenerator?.visibleNodes || null,
+  )
+  useEffect(() => {
+    const $visibleNodes = visibleNodesGenerator?.visibleNodes || null
+    if (visibleNodes !== $visibleNodes) setVisibleNodes($visibleNodes)
+
+    return visibleNodesGenerator?.onUpdate(setVisibleNodes)
+  }, [visibleNodesGenerator]) // eslint-disable-line react-hooks/exhaustive-deps
   return visibleNodes
 }

From cbac7542ff367797d0dc8c011324e23b083e3393 Mon Sep 17 00:00:00 2001
From: EnixCoda <enixcoda@gmail.com>
Date: Thu, 26 May 2022 22:41:26 +0800
Subject: [PATCH 28/93] refactor: use abort than checker

---
 src/components/FileExplorer/hooks/useSetupTree.tsx |  6 +++---
 src/utils/hooks/useSequentialEffect.ts             | 12 ++++++------
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/components/FileExplorer/hooks/useSetupTree.tsx b/src/components/FileExplorer/hooks/useSetupTree.tsx
index 74779f9..2d41fac 100644
--- a/src/components/FileExplorer/hooks/useSetupTree.tsx
+++ b/src/components/FileExplorer/hooks/useSetupTree.tsx
@@ -20,9 +20,9 @@ export function useVisibleNodesGenerator(metaData: MetaData) {
   // Only run when metadata or accessToken changes
   useSequentialEffect(
     useCallback(
-      checker => {
+      shouldAbort => {
         catchNetworkErrors(async () => {
-          if (!checker()) return
+          if (shouldAbort()) return
 
           setStateContext('tree-loading')
           const { userName, repoName, branchName } = metaData
@@ -36,7 +36,7 @@ export function useVisibleNodesGenerator(metaData: MetaData) {
             true,
             accessToken,
           )
-          if (!checker()) return
+          if (shouldAbort()) return
 
           setStateContext('tree-rendering')
 
diff --git a/src/utils/hooks/useSequentialEffect.ts b/src/utils/hooks/useSequentialEffect.ts
index 581fa19..861e5df 100644
--- a/src/utils/hooks/useSequentialEffect.ts
+++ b/src/utils/hooks/useSequentialEffect.ts
@@ -5,15 +5,15 @@ import { useEffect } from 'react'
  * the later effect ends earlier than the previous one, and the previous effect overlaps later effect's result.
  */
 export function useSequentialEffect(
-  effect: (checker: () => boolean) => (() => void | undefined) | void,
+  effect: (shouldAbort: () => boolean) => (() => void | undefined) | void,
 ) {
   useEffect(() => {
-    // The previous effect should stop running when finding checker returning false.
-    let valid = true
-    const checker = () => valid
-    const defect = effect(checker)
+    // The previous effect should stop running if shouldAbort returns true.
+    let end = false
+    const shouldAbort = () => end
+    const defect = effect(shouldAbort)
     return () => {
-      valid = false
+      end = true
       defect?.()
     }
   }, [effect])

From a0bc45f0a98d00c8fef390833c06f889fd41ee2d Mon Sep 17 00:00:00 2001
From: EnixCoda <enixcoda@gmail.com>
Date: Sat, 28 May 2022 16:41:59 +0800
Subject: [PATCH 29/93] feat: enhance search input action

---
 src/components/SearchBar.tsx | 40 +++++++++++++++++-------------------
 src/styles/index.scss        | 37 ++++++++-------------------------
 2 files changed, 28 insertions(+), 49 deletions(-)

diff --git a/src/components/SearchBar.tsx b/src/components/SearchBar.tsx
index 5c353e9..05daa1c 100644
--- a/src/components/SearchBar.tsx
+++ b/src/components/SearchBar.tsx
@@ -15,16 +15,15 @@ export function SearchBar({ onSearch, onFocus, value }: Props) {
   const configs = useConfigs()
   const { searchMode } = configs.value
 
-  const toggleButtonDescription = `${
+  const toggleButtonDescription =
     searchMode === 'regex'
       ? 'Match file name with regular expression.'
-      : 'Match file path sequence with input.'
-  } Click to toggle.`
+      : `Match file path sequence with plain input.`
 
   return (
     <div className={'search-input-wrapper'}>
       <TextInput
-        icon={SearchIcon}
+        leadingVisual={SearchIcon}
         onFocus={e => {
           onFocus(e)
           e.target.select()
@@ -37,24 +36,23 @@ export function SearchBar({ onSearch, onFocus, value }: Props) {
         placeholder={`Search files`}
         onChange={({ target: { value } }) => onSearch(value, searchMode)}
         value={value}
+        trailingAction={
+          <TextInput.Action
+            onClick={() => {
+              const newMode = searchMode === 'regex' ? 'fuzzy' : 'regex'
+              configs.onChange({
+                searchMode: newMode,
+              })
+              // Skip search if no input to prevent resetting folder expansions
+              if (value) onSearch(value, newMode)
+            }}
+            aria-label={toggleButtonDescription}
+            sx={{ color: 'fg.subtle' }}
+          >
+            {searchMode === 'regex' ? '.*$' : 'a/b'}
+          </TextInput.Action>
+        }
       />
-      <div className={`actions`}>
-        <button
-          className={`toggle-search-mode`}
-          title={toggleButtonDescription}
-          onClick={() => {
-            const newMode = searchMode === 'regex' ? 'fuzzy' : 'regex'
-            configs.onChange({
-              searchMode: newMode,
-            })
-            // Skip search if no input to prevent resetting folder expansions
-            if (value) onSearch(value, newMode)
-          }}
-          aria-label={toggleButtonDescription}
-        >
-          {searchMode === 'regex' ? '.*' : 'path'}
-        </button>
-      </div>
     </div>
   )
 }
diff --git a/src/styles/index.scss b/src/styles/index.scss
index d6f70b0..3b582a9 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -433,7 +433,6 @@ $minimal-z-index: max(
     flex-direction: column;
     background: var(--gitako-bg-subtle);
     border-left: 1px solid var(--gitako-border-default);
-    overflow: hidden;
 
     .octicon {
       transition: transform 0.3s ease;
@@ -597,38 +596,20 @@ $minimal-z-index: max(
             border-top: 1px solid var(--gitako-border-default);
             color: var(--gitako-fg-default);
             background: var(--gitako-bg-default);
-            padding-right: 40px; // save space for actions
+            padding-left: 10px;
+
+            .TextInput-action {
+              font-family: SFMono-Regular, Consolas, 'Liberation Mono', Menlo, Courier, monospace;
+
+              button {
+                font-weight: normal;
+              }
+            }
 
             &.error {
               border-color: var(--gitako-danger-emphasis);
             }
           }
-
-          .actions {
-            position: absolute;
-            top: 0px;
-            right: 0px;
-            height: 100%;
-            display: flex;
-            justify-content: flex-end;
-            align-items: center;
-            padding: 0 4px;
-
-            .toggle-search-mode {
-              margin: 0;
-              padding: 2px 4px;
-              min-width: 32px;
-              border: 1px solid var(--gitako-border-muted);
-              border-radius: 8px;
-              color: var(--gitako-fg-muted);
-              font-size: 12px;
-              font-weight: 500;
-              line-height: 1;
-              outline: none;
-
-              @include interactive-frame;
-            }
-          }
         }
 
         .status {

From b2d24cfa0da4291fcdfbc0eb8239e014750a6c58 Mon Sep 17 00:00:00 2001
From: EnixCoda <enixcoda@gmail.com>
Date: Sat, 28 May 2022 21:13:45 +0800
Subject: [PATCH 30/93] build: update primer

---
 package.json |  4 ++--
 yarn.lock    | 20 ++++++++++----------
 2 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/package.json b/package.json
index 509beca..a3c61cc 100644
--- a/package.json
+++ b/package.json
@@ -20,9 +20,9 @@
     "test:non-parallel": "NODE_ENV=test jest --config __tests__/jest.non-parallel.config.js"
   },
   "dependencies": {
-    "@primer/css": "^20.0.0",
+    "@primer/css": "^20.2.2",
     "@primer/octicons-react": "^17.1.0",
-    "@primer/react": "^35.2.1",
+    "@primer/react": "^35.2.2",
     "@sentry/browser": "^6.3.6",
     "@types/history": "^5.0.0",
     "@types/ini": "^1.3.31",
diff --git a/yarn.lock b/yarn.lock
index 42742cd..e051e8a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1975,12 +1975,12 @@
   resolved "https://registry.yarnpkg.com/@primer/behaviors/-/behaviors-1.1.1.tgz#51e2f02ebfe297c4c05f503cdc52ae8b4ce5794c"
   integrity sha512-wvF1PYjyxKNTr6+5w4uR5Gkz53t1fsRDgKjWxDKk7wmlh0cwiILBo4dDFjjVhWRF1mBSjaIxxJGB4WGaP7ct2Q==
 
-"@primer/css@^20.0.0":
-  version "20.0.0"
-  resolved "https://registry.yarnpkg.com/@primer/css/-/css-20.0.0.tgz#315075ff9c41c9cf0f09e9a2b962ac86da7e3738"
-  integrity sha512-bzKJEgKM68GqwwLPfXEK1g5xb1sfZ7dKpnMAAWDWl1hVAADrmL0lcQ6xm29DCCi90RTT2bFF2CgU49d0g7PlTg==
+"@primer/css@^20.2.2":
+  version "20.2.2"
+  resolved "https://registry.yarnpkg.com/@primer/css/-/css-20.2.2.tgz#c36b73e9c336651675e51074c5b9e56d13fae3f5"
+  integrity sha512-vUy0vMKpdX9f3rhnm5fEIdcg9yxOdRYvjbZk5QoBXtn32oJPonSvIb/7JwVJA+EdiOHTvhRDx9zDpUwOYX+XrQ==
   dependencies:
-    "@primer/primitives" "^7.7.0"
+    "@primer/primitives" "^7.8.3"
 
 "@primer/octicons-react@16.1.1":
   version "16.1.1"
@@ -1997,15 +1997,15 @@
   resolved "https://registry.yarnpkg.com/@primer/primitives/-/primitives-7.6.0.tgz#942efe38b6e09bf6d0351c045436e628e32c3ddb"
   integrity sha512-cu28QLjectVf2rT4P7m6zS9v4g4yHtErRuPfsgEWEJhbXVIII6vDBm6elJzYixGpTNxpVtSUNezxUXv16l1ejQ==
 
-"@primer/primitives@^7.7.0":
+"@primer/primitives@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@primer/primitives/-/primitives-7.8.3.tgz#de7e03492cf977e99f2417490d76421db9715e9f"
   integrity sha512-04ZwfJhpZ0QFwDrJfCuLX6iOh0BflWDTvuoRA80lQH9xk0RtIg16INbruwwtnbSgnKKXXRSykRRJ5BbxnqufRA==
 
-"@primer/react@^35.2.1":
-  version "35.2.1"
-  resolved "https://registry.yarnpkg.com/@primer/react/-/react-35.2.1.tgz#fe35510b650b249cd36207d4854a60786fd5cc3f"
-  integrity sha512-aa5N0bGgOWPkUCjW5qqVtAxcaUxWe6pT4TjG6YCfoUjuY/OkngENSoBipXhNNThFfE78z7moP7UwxvxY7JW8mA==
+"@primer/react@^35.2.2":
+  version "35.2.2"
+  resolved "https://registry.yarnpkg.com/@primer/react/-/react-35.2.2.tgz#b64c406b4e17a01cb0c850e9b6dea06ad4690393"
+  integrity sha512-JToTi4YwOJ5mlvSBF66Csz35fLeMl6PeGYcXqwE34giGXRrOLRID+eHVPZPWUEDo/Sg389cVYR44ueM03/C56A==
   dependencies:
     "@primer/behaviors" "1.1.1"
     "@primer/octicons-react" "16.1.1"

From 5814bc2b09e0c015834cf081b7c873e10a864b47 Mon Sep 17 00:00:00 2001
From: EnixCoda <enixcoda@gmail.com>
Date: Sat, 28 May 2022 21:44:15 +0800
Subject: [PATCH 31/93] build: upgrade typescript 4.7

---
 package.json | 2 +-
 yarn.lock    | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index a3c61cc..51a9d0b 100644
--- a/package.json
+++ b/package.json
@@ -79,7 +79,7 @@
     "raw-loader": "^4.0.0",
     "sass": "^1.26.2",
     "sass-loader": "^8.0.2",
-    "typescript": "^4.6.3",
+    "typescript": "^4.7.2",
     "uglifyjs-webpack-plugin": "^2.1.2",
     "url-loader": "^1.1.2",
     "web-ext": "^6.8.0",
diff --git a/yarn.lock b/yarn.lock
index e051e8a..a908e96 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -11477,10 +11477,10 @@ typedarray@^0.0.6:
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
   integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=
 
-typescript@^4.6.3:
-  version "4.6.3"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.6.3.tgz#eefeafa6afdd31d725584c67a0eaba80f6fc6c6c"
-  integrity sha512-yNIatDa5iaofVozS/uQJEl3JRWLKKGJKh6Yaiv0GLGSuhpFJe7P3SbHZ8/yjAHRQwKRoA6YZqlfjXWmVzoVSMw==
+typescript@^4.7.2:
+  version "4.7.2"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.7.2.tgz#1f9aa2ceb9af87cca227813b4310fff0b51593c4"
+  integrity sha512-Mamb1iX2FDUpcTRzltPxgWMKy3fhg0TN378ylbktPGPK/99KbDtMQ4W1hwgsbPAsG3a0xKa1vmw4VKZQbkvz5A==
 
 uglify-js@^3.6.0:
   version "3.6.0"

From 15da7ca97720cb76da52bcc3c209f88bc38d451a Mon Sep 17 00:00:00 2001
From: EnixCoda <enixcoda@gmail.com>
Date: Sat, 28 May 2022 21:51:47 +0800
Subject: [PATCH 32/93] chore: enhance wording for lazy mode

---
 src/components/FileExplorer/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/FileExplorer/index.tsx b/src/components/FileExplorer/index.tsx
index e1dd122..97e6b8c 100644
--- a/src/components/FileExplorer/index.tsx
+++ b/src/components/FileExplorer/index.tsx
@@ -93,7 +93,7 @@ export function FileExplorer({ freeze, metaData }: Props) {
                   {visibleNodesGenerator?.defer && (
                     <div className={'status'}>
                       <Label
-                        title="This repository is large. Gitako has switched to Lazy Mode to improve performance. Folders will be loaded when it gets expanded."
+                        title="This repository is large. Gitako has switched to Lazy Mode to improve performance. Folders will be loaded on demand."
                         className={'lazy-mode'}
                         variant="attention"
                       >

From a5efba62f43e7187bb2c524f47db939e558c8898 Mon Sep 17 00:00:00 2001
From: EnixCoda <enixcoda@gmail.com>
Date: Sat, 28 May 2022 21:52:17 +0800
Subject: [PATCH 33/93] fix: enhance borders

---
 src/components/FileExplorer/index.tsx | 28 ++++++-----
 src/components/SearchBar.tsx          | 70 ++++++++++++++-------------
 src/styles/index.scss                 | 33 ++++---------
 3 files changed, 61 insertions(+), 70 deletions(-)

diff --git a/src/components/FileExplorer/index.tsx b/src/components/FileExplorer/index.tsx
index 97e6b8c..bc65447 100644
--- a/src/components/FileExplorer/index.tsx
+++ b/src/components/FileExplorer/index.tsx
@@ -114,19 +114,21 @@ export function FileExplorer({ freeze, metaData }: Props) {
                       )}
                     </>
                   )}
-                  <SizeObserver<HTMLDivElement>>
-                    {({ width = 0, height = 0 }, ref) => (
-                      <div className={'files'} ref={ref}>
-                        <ListView
-                          height={height}
-                          width={width}
-                          nodeRendererContext={nodeRendererContext}
-                          expandTo={expandTo}
-                          metaData={metaData}
-                        />
-                      </div>
-                    )}
-                  </SizeObserver>
+                  {visibleNodes.nodes.length > 0 && (
+                    <SizeObserver<HTMLDivElement>>
+                      {({ width = 0, height = 0 }, ref) => (
+                        <div className={'files'} ref={ref}>
+                          <ListView
+                            height={height}
+                            width={width}
+                            nodeRendererContext={nodeRendererContext}
+                            expandTo={expandTo}
+                            metaData={metaData}
+                          />
+                        </div>
+                      )}
+                    </SizeObserver>
+                  )}
                 </>
               )
             )
diff --git a/src/components/SearchBar.tsx b/src/components/SearchBar.tsx
index 05daa1c..0b8b4b9 100644
--- a/src/components/SearchBar.tsx
+++ b/src/components/SearchBar.tsx
@@ -2,7 +2,6 @@ import { SearchIcon } from '@primer/octicons-react'
 import { TextInput, TextInputProps } from '@primer/react'
 import { useConfigs } from 'containers/ConfigsContext'
 import * as React from 'react'
-import { cx } from 'utils/cx'
 import { isValidRegexpSource } from 'utils/general'
 import { SearchMode } from './searchModes'
 
@@ -20,39 +19,42 @@ export function SearchBar({ onSearch, onFocus, value }: Props) {
       ? 'Match file name with regular expression.'
       : `Match file path sequence with plain input.`
 
+  const validationStatus = React.useMemo(
+    () => (searchMode === 'regex' && !isValidRegexpSource(value) ? 'error' : undefined),
+    [value, searchMode],
+  )
+
   return (
-    <div className={'search-input-wrapper'}>
-      <TextInput
-        leadingVisual={SearchIcon}
-        onFocus={e => {
-          onFocus(e)
-          e.target.select()
-        }}
-        tabIndex={0}
-        className={cx('search-input', {
-          error: searchMode === 'regex' && !isValidRegexpSource(value),
-        })}
-        aria-label="search files"
-        placeholder={`Search files`}
-        onChange={({ target: { value } }) => onSearch(value, searchMode)}
-        value={value}
-        trailingAction={
-          <TextInput.Action
-            onClick={() => {
-              const newMode = searchMode === 'regex' ? 'fuzzy' : 'regex'
-              configs.onChange({
-                searchMode: newMode,
-              })
-              // Skip search if no input to prevent resetting folder expansions
-              if (value) onSearch(value, newMode)
-            }}
-            aria-label={toggleButtonDescription}
-            sx={{ color: 'fg.subtle' }}
-          >
-            {searchMode === 'regex' ? '.*$' : 'a/b'}
-          </TextInput.Action>
-        }
-      />
-    </div>
+    <TextInput
+      leadingVisual={SearchIcon}
+      onFocus={e => {
+        onFocus(e)
+        e.target.select()
+      }}
+      block
+      sx={{ borderRadius: 0 }}
+      className={'search-input'}
+      aria-label="search files"
+      placeholder={`Search files`}
+      onChange={({ target: { value } }) => onSearch(value, searchMode)}
+      value={value}
+      validationStatus={validationStatus}
+      trailingAction={
+        <TextInput.Action
+          aria-label={toggleButtonDescription}
+          sx={{ color: 'fg.subtle' }}
+          onClick={() => {
+            const newMode = searchMode === 'regex' ? 'fuzzy' : 'regex'
+            configs.onChange({
+              searchMode: newMode,
+            })
+            // Skip search if no input to prevent resetting folder expansions
+            if (value) onSearch(value, newMode)
+          }}
+        >
+          {searchMode === 'regex' ? '.*$' : 'a/b'}
+        </TextInput.Action>
+      }
+    />
   )
 }
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 3b582a9..1df6241 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -584,30 +584,18 @@ $minimal-z-index: max(
           }
         }
 
-        /* search input */
-        .search-input-wrapper {
-          position: relative;
+        .search-input {
+          padding-left: 0;
 
-          .search-input {
-            width: 100%;
-            box-shadow: none; // stay low
-            border: none;
-            border-radius: 0;
-            border-top: 1px solid var(--gitako-border-default);
-            color: var(--gitako-fg-default);
-            background: var(--gitako-bg-default);
-            padding-left: 10px;
+          .TextInput-icon {
+            margin-left: 8px;
+          }
 
-            .TextInput-action {
-              font-family: SFMono-Regular, Consolas, 'Liberation Mono', Menlo, Courier, monospace;
+          .TextInput-action {
+            font-family: SFMono-Regular, Consolas, 'Liberation Mono', Menlo, Courier, monospace;
 
-              button {
-                font-weight: normal;
-              }
-            }
-
-            &.error {
-              border-color: var(--gitako-danger-emphasis);
+            button {
+              font-weight: normal;
             }
           }
         }
@@ -625,7 +613,6 @@ $minimal-z-index: max(
           position: relative;
           flex: 1;
           overflow: hidden;
-          border-top: 1px solid var(--gitako-border-default);
 
           // Put this inside files will help files to get proper size derived from parents, regardless of its content size
           .magic-size-container {
@@ -876,7 +863,7 @@ $minimal-z-index: max(
           top: 0;
           left: 0;
           background: var(--gitako-bg-subtle);
-          z-index: 1;
+          z-index: 2;
         }
         .settings-section {
           &:not(:last-of-type) {

From 3cdd3fa600feb6fcc888bf281c8bd55c96296d3f Mon Sep 17 00:00:00 2001
From: EnixCoda <enixcoda@gmail.com>
Date: Sat, 28 May 2022 22:24:29 +0800
Subject: [PATCH 34/93] feat: set VNG along with DOM focus

---
 src/components/FileExplorer/Node.tsx                     | 3 +++
 src/components/FileExplorer/VirtualNode.tsx              | 3 ++-
 .../FileExplorer/hooks/useNodeRenderContext.tsx          | 5 ++++-
 src/components/FileExplorer/index.tsx                    | 4 ++++
 src/components/FileExplorer/useHandleNodeFocus.tsx       | 9 +++++++++
 5 files changed, 22 insertions(+), 2 deletions(-)
 create mode 100644 src/components/FileExplorer/useHandleNodeFocus.tsx

diff --git a/src/components/FileExplorer/Node.tsx b/src/components/FileExplorer/Node.tsx
index 45f5a25..1f9800b 100644
--- a/src/components/FileExplorer/Node.tsx
+++ b/src/components/FileExplorer/Node.tsx
@@ -19,6 +19,7 @@ function getIconType(node: TreeNode) {
 type Props = {
   node: TreeNode
   onClick(event: React.MouseEvent<HTMLElement, MouseEvent>, node: TreeNode): void
+  onFocus(event: React.FocusEvent<HTMLElement, Element>, node: TreeNode): void
   depth: number
   expanded: boolean
   focused: boolean
@@ -37,12 +38,14 @@ export function Node({
   renderLabelText,
   style,
   onClick,
+  onFocus,
 }: Props) {
   const { compactFileTree: compact } = useConfigs().value
   return (
     <a
       href={node.url}
       onClick={event => onClick(event, node)}
+      onFocus={event => onFocus(event, node)}
       className={cx(`node-item`, { focused, disabled: node.accessDenied, expanded, compact })}
       style={{ ...style, paddingLeft: `${10 + (compact ? 10 : 20) * depth}px` }}
       title={node.path}
diff --git a/src/components/FileExplorer/VirtualNode.tsx b/src/components/FileExplorer/VirtualNode.tsx
index 8b7ff50..8d464a8 100644
--- a/src/components/FileExplorer/VirtualNode.tsx
+++ b/src/components/FileExplorer/VirtualNode.tsx
@@ -6,7 +6,7 @@ import { NodeRendererContext } from '.'
 export const VirtualNode = React.memo(function VirtualNode({
   index,
   style,
-  data: { onNodeClick, renderLabelText, renderActions, visibleNodes },
+  data: { onNodeClick, onNodeFocus, renderLabelText, renderActions, visibleNodes },
 }: Override<ListChildComponentProps, { data: NodeRendererContext }>) {
   if (!visibleNodes) return null
 
@@ -23,6 +23,7 @@ export const VirtualNode = React.memo(function VirtualNode({
       loading={loading.has(node.path)}
       expanded={expandedNodes.has(node.path)}
       onClick={onNodeClick}
+      onFocus={onNodeFocus}
       renderLabelText={renderLabelText}
       renderActions={renderActions}
     />
diff --git a/src/components/FileExplorer/hooks/useNodeRenderContext.tsx b/src/components/FileExplorer/hooks/useNodeRenderContext.tsx
index d9c4776..a739c51 100644
--- a/src/components/FileExplorer/hooks/useNodeRenderContext.tsx
+++ b/src/components/FileExplorer/hooks/useNodeRenderContext.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react'
 import { VisibleNodes } from 'utils/VisibleNodesGenerator'
 import { NodeRendererContext } from '../index'
+import { useHandleNodeFocus } from '../useHandleNodeFocus'
 import { useNodeRenderers } from './useNodeRenderers'
 import { useHandleNodeClick } from './useOnNodeClick'
 import { useRenderLabelText } from './useRenderLabelText'
@@ -8,6 +9,7 @@ import { useRenderLabelText } from './useRenderLabelText'
 export function useNodeRenderContext(
   visibleNodes: VisibleNodes | null,
   onNodeClick: ReturnType<typeof useHandleNodeClick>,
+  onNodeFocus: ReturnType<typeof useHandleNodeFocus>,
   renderActions: ReturnType<typeof useNodeRenderers>,
   renderLabelText: ReturnType<typeof useRenderLabelText>,
 ): NodeRendererContext | null {
@@ -16,9 +18,10 @@ export function useNodeRenderContext(
       visibleNodes && {
         visibleNodes,
         onNodeClick,
+        onNodeFocus,
         renderActions,
         renderLabelText,
       },
-    [visibleNodes, onNodeClick, renderActions, renderLabelText],
+    [visibleNodes, onNodeClick, onNodeFocus, renderActions, renderLabelText],
   )
 }
diff --git a/src/components/FileExplorer/index.tsx b/src/components/FileExplorer/index.tsx
index bc65447..ac413b5 100644
--- a/src/components/FileExplorer/index.tsx
+++ b/src/components/FileExplorer/index.tsx
@@ -26,10 +26,12 @@ import { useVisibleNodesGeneratorMethods } from './hooks/useOnVisibleNodesGenera
 import { useRenderLabelText } from './hooks/useRenderLabelText'
 import { useVisibleNodesGenerator } from './hooks/useSetupTree'
 import { ListView } from './ListView'
+import { useHandleNodeFocus } from './useHandleNodeFocus'
 import { useVisibleNodes } from './useVisibleNodes'
 
 export type NodeRendererContext = {
   onNodeClick: (event: React.MouseEvent<HTMLElement, MouseEvent>, node: TreeNode) => void
+  onNodeFocus: (event: React.FocusEvent<HTMLElement, Element>, node: TreeNode) => void
   renderLabelText: NodeRenderer
   renderActions: NodeRenderer | undefined
   visibleNodes: VisibleNodes
@@ -56,6 +58,7 @@ export function FileExplorer({ freeze, metaData }: Props) {
   )
   const { expandTo, goTo, focusNode } = methods
   const handleNodeClick = useHandleNodeClick(methods)
+  const handleNodeFocus = useHandleNodeFocus(methods)
   const handleKeyDown = useHandleKeyDown(visibleNodes, methods, searched)
   const handleFocusSearchBar = () => focusNode(null)
 
@@ -70,6 +73,7 @@ export function FileExplorer({ freeze, metaData }: Props) {
   const nodeRendererContext = useNodeRenderContext(
     visibleNodes,
     handleNodeClick,
+    handleNodeFocus,
     renderActions,
     renderLabelText,
   )
diff --git a/src/components/FileExplorer/useHandleNodeFocus.tsx b/src/components/FileExplorer/useHandleNodeFocus.tsx
new file mode 100644
index 0000000..dcaf1f8
--- /dev/null
+++ b/src/components/FileExplorer/useHandleNodeFocus.tsx
@@ -0,0 +1,9 @@
+import * as React from 'react'
+import { VisibleNodesGeneratorMethods } from './hooks/useOnVisibleNodesGeneratorReady'
+
+export function useHandleNodeFocus({ focusNode }: VisibleNodesGeneratorMethods) {
+  return React.useCallback(
+    (event: React.FocusEvent<HTMLElement, Element>, node: TreeNode) => focusNode(node),
+    [focusNode],
+  )
+}

From 6cfafa9e67190f9de3bac340f729b58280299953 Mon Sep 17 00:00:00 2001
From: EnixCoda <enixcoda@gmail.com>
Date: Sun, 29 May 2022 00:04:24 +0800
Subject: [PATCH 35/93] feat: simplify theme

---
 src/containers/Theme.tsx | 53 +++++++++++++++++++++++++++++-----------
 1 file changed, 39 insertions(+), 14 deletions(-)

diff --git a/src/containers/Theme.tsx b/src/containers/Theme.tsx
index d6818a5..c6fa123 100644
--- a/src/containers/Theme.tsx
+++ b/src/containers/Theme.tsx
@@ -1,19 +1,46 @@
 import { ThemeProvider } from '@primer/react'
+import theme from '@primer/react/lib-esm/theme'
 import * as React from 'react'
 
-const getIsPreferDarkTheme = () => {
-  const colorMode = document.documentElement.dataset.colorMode
-  return (
-    colorMode === 'dark' ||
-    (colorMode === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches)
-  )
+// <html lang="en" data-color-mode="auto" data-light-theme="light" data-dark-theme="dark" ...
+// <html lang="en" data-color-mode="light" data-light-theme="light" data-dark-theme="dark" ...
+// <html lang="en" data-color-mode="dark" data-light-theme="light" data-dark-theme="dark" ...
+
+const colorModeMap: Record<string, 'night' | 'day'> = {
+  dark: 'night',
+  light: 'day',
 }
-// No need to watch the property as it does not change in repo pages
-function usePreferDarkTheme() {
-  const [prefer, setPrefer] = React.useState(getIsPreferDarkTheme)
+
+const validColorSchemes = Object.keys(theme.colorSchemes) as EnumString<
+  | 'light'
+  | 'light_high_contrast'
+  | 'light_colorblind'
+  | 'light_tritanopia'
+  | 'dark'
+  | 'dark_dimmed'
+  | 'dark_high_contrast'
+  | 'dark_colorblind'
+  | 'dark_tritanopia'
+>[]
+// The `*_tritanopia` themes are actually not bundled within @primer/react@35.2.2
+// TODO: Upgrade @primer/react to support these themes
+// BUT: Do not remove the validation, there might be other themes in future
+
+const getPreferenceFromDOM = () => {
+  const { colorMode, lightTheme, darkTheme } = document.documentElement.dataset
+
+  return {
+    colorMode: (colorMode && colorModeMap[colorMode]) || 'auto',
+    dayScheme: lightTheme && validColorSchemes.includes(lightTheme) ? lightTheme : undefined,
+    nightScheme: darkTheme && validColorSchemes.includes(darkTheme) ? darkTheme : undefined,
+  } as const
+}
+
+function useThemePreference() {
+  const [prefer, setPrefer] = React.useState(getPreferenceFromDOM)
   React.useEffect(() => {
     const match = window.matchMedia('(prefers-color-scheme: dark)')
-    const update = () => setPrefer(match.matches) // `.matches` will update on media change
+    const update = () => setPrefer(getPreferenceFromDOM)
     match.addEventListener('change', update)
     return () => match.removeEventListener('change', update)
   }, [])
@@ -21,8 +48,6 @@ function usePreferDarkTheme() {
 }
 
 export function Theme({ children }: React.PropsWithChildren<{}>) {
-  const preferDarkTheme = usePreferDarkTheme()
-  return (
-    <ThemeProvider colorMode={preferDarkTheme ? 'night' : 'day'} dayScheme="" {...{ children }} />
-  )
+  const themePreference = useThemePreference()
+  return <ThemeProvider {...themePreference} {...{ children }} />
 }

From b97a85010037c0435c88785ec0cb8b1440b5813f Mon Sep 17 00:00:00 2001
From: EnixCoda <enixcoda@gmail.com>
Date: Sun, 29 May 2022 01:27:43 +0800
Subject: [PATCH 36/93] feat: use @primer/primitives

---
 src/styles/index.scss                    | 162 ++++-----
 src/styles/themes.scss                   | 112 +++---
 src/styles/themes/dark.scss              | 418 ----------------------
 src/styles/themes/darkColorblind.scss    | 418 ----------------------
 src/styles/themes/darkDimmed.scss        | 418 ----------------------
 src/styles/themes/darkHighContrast.scss  | 418 ----------------------
 src/styles/themes/darkTritanopia.scss    | 436 -----------------------
 src/styles/themes/light.scss             | 418 ----------------------
 src/styles/themes/lightColorblind.scss   | 418 ----------------------
 src/styles/themes/lightHighContrast.scss | 418 ----------------------
 src/styles/themes/lightTritanopia.scss   | 436 -----------------------
 11 files changed, 143 insertions(+), 3929 deletions(-)
 delete mode 100644 src/styles/themes/dark.scss
 delete mode 100644 src/styles/themes/darkColorblind.scss
 delete mode 100644 src/styles/themes/darkDimmed.scss
 delete mode 100644 src/styles/themes/darkHighContrast.scss
 delete mode 100644 src/styles/themes/darkTritanopia.scss
 delete mode 100644 src/styles/themes/light.scss
 delete mode 100644 src/styles/themes/lightColorblind.scss
 delete mode 100644 src/styles/themes/lightHighContrast.scss
 delete mode 100644 src/styles/themes/lightTritanopia.scss

diff --git a/src/styles/index.scss b/src/styles/index.scss
index 1df6241..b2c3619 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -24,9 +24,9 @@ $minimal-z-index: max(
 }
 
 @mixin interactive-border(
-  $default: var(--gitako-btn-border),
-  $hover: var(--gitako-btn-hover-border),
-  $active: var(--gitako-btn-active-border),
+  $default: var(--color-btn-border),
+  $hover: var(--color-btn-hover-border),
+  $active: var(--color-btn-active-border),
   $focus: $hover
 ) {
   border: 1px solid $default;
@@ -42,9 +42,9 @@ $minimal-z-index: max(
 }
 
 @mixin interactive-background(
-  $default: var(--gitako-btn-bg),
-  $hover: var(--gitako-btn-hover-bg),
-  $active: var(--gitako-btn-active-bg),
+  $default: var(--color-btn-bg),
+  $hover: var(--color-btn-hover-bg),
+  $active: var(--color-btn-active-bg),
   $focus: $hover
 ) {
   background-color: $default;
@@ -136,14 +136,14 @@ $minimal-z-index: max(
         }
 
         @include interactive-background-on-before(
-          var(--gitako-fg-subtle),
-          var(--gitako-fg-default),
-          var(--gitako-fg-muted)
+          var(--color-fg-subtle),
+          var(--color-fg-default),
+          var(--color-fg-muted)
         );
       }
 
       &.gitako-code-fold-active {
-        background-color: var(--gitako-neutral-muted);
+        background-color: var(--color-neutral-muted);
 
         .gitako-code-fold-handler {
           &::before {
@@ -151,14 +151,14 @@ $minimal-z-index: max(
           }
 
           @include interactive-background-on-before(
-            var(--gitako-fg-muted),
-            var(--gitako-fg-default),
-            var(--gitako-fg-subtle)
+            var(--color-fg-muted),
+            var(--color-fg-default),
+            var(--color-fg-subtle)
           );
         }
 
         .blob-code::after {
-          color: var(--gitako-fg-muted);
+          color: var(--color-fg-muted);
           content: '⋯';
           margin: 0.1em 0.2em 0px;
         }
@@ -187,7 +187,7 @@ $minimal-z-index: max(
       .clippy {
         width: 32px;
         height: 32px;
-        border: 1px solid var(--gitako-border-default);
+        border: 1px solid var(--color-border-default);
         border-radius: 4px;
 
         @include interactive-background;
@@ -283,8 +283,8 @@ $minimal-z-index: max(
 
 @mixin icon-button(
   $default: transparent,
-  $hover: var(--gitako-btn-hover-bg),
-  $active: var(--gitako-btn-focus-bg),
+  $hover: var(--color-btn-hover-bg),
+  $active: var(--color-btn-focus-bg),
   $focus: $hover
 ) {
   @include flex-center();
@@ -297,10 +297,10 @@ $minimal-z-index: max(
 
 // Why does not TextInput get theme properly?
 @mixin input {
-  color: var(--gitako-fg-default);
-  background-color: var(--gitako-canvas-default);
-  border-color: var(--gitako-border-default);
-  box-shadow: var(--gitako-primer-shadow-inset);
+  color: var(--color-fg-default);
+  background-color: var(--color-canvas-default);
+  border-color: var(--color-border-default);
+  box-shadow: var(--color-primer-shadow-inset);
 }
 
 .#{$name}-toggle-show-button-wrapper {
@@ -336,13 +336,13 @@ $minimal-z-index: max(
       object-fit: contain;
       transition: all ease 0.4s;
       transform: translateX(-8px);
-      filter: drop-shadow(0 0 1px var(--gitako-primer-canvas-backdrop));
+      filter: drop-shadow(0 0 1px var(--color-primer-canvas-backdrop));
     }
     &:active,
     &:hover {
       .tentacle {
         transform: translateX(-4px);
-        filter: drop-shadow(0 0 2px var(--gitako-primer-canvas-backdrop));
+        filter: drop-shadow(0 0 2px var(--color-primer-canvas-backdrop));
       }
     }
   }
@@ -352,10 +352,10 @@ $minimal-z-index: max(
     margin-left: 4px;
     padding: 2px 4px;
     font-size: 12px;
-    color: var(--gitako-danger-fg);
-    border: 1px solid var(--gitako-border-default);
+    color: var(--color-danger-fg);
+    border: 1px solid var(--color-border-default);
     border-radius: 2px;
-    background-color: var(--gitako-bg-subtle);
+    background-color: var(--color-bg-subtle);
   }
 
   &:hover {
@@ -367,6 +367,7 @@ $minimal-z-index: max(
 
 .#{$name}-side-bar {
   @include hide-for-print();
+  @include enableThemes;
 
   @import '~@primer/css/base/index.scss';
   button {
@@ -374,7 +375,7 @@ $minimal-z-index: max(
     font-weight: 600;
   }
   a {
-    color: var(--gitako-accent-fg);
+    color: var(--color-accent-fg);
   }
 
   $resizeHandlerWidth: 1px;
@@ -406,15 +407,15 @@ $minimal-z-index: max(
     cursor: ew-resize;
     user-select: none;
     width: 0;
-    background: var(--gitako-bg-subtle);
-    border-right: $resizeHandlerWidth solid var(--gitako-border-default);
+    background: var(--color-bg-subtle);
+    border-right: $resizeHandlerWidth solid var(--color-border-default);
     overflow: hidden;
     box-sizing: content-box;
     &:hover,
     &:active {
       width: 16px;
-      background: var(--gitako-bg-subtle);
-      border-left: 1px solid var(--gitako-border-default);
+      background: var(--color-bg-subtle);
+      border-left: 1px solid var(--color-border-default);
     }
 
     .octicon.Grabber {
@@ -431,18 +432,18 @@ $minimal-z-index: max(
     height: 100%;
     display: flex;
     flex-direction: column;
-    background: var(--gitako-bg-subtle);
-    border-left: 1px solid var(--gitako-border-default);
+    background: var(--color-bg-subtle);
+    border-left: 1px solid var(--color-border-default);
 
     .octicon {
       transition: transform 0.3s ease;
-      color: var(--gitako-fg-subtle);
+      color: var(--color-fg-subtle);
       width: 100%;
       height: 100%;
     }
 
     .octicon-color {
-      color: var(--gitako-fg-subtle);
+      color: var(--color-fg-subtle);
     }
 
     .octicon-wrapper {
@@ -461,7 +462,7 @@ $minimal-z-index: max(
       .header {
         position: relative;
         min-height: 62px; // GitHub header height if login
-        background: var(--gitako-bg-subtle);
+        background: var(--color-bg-subtle);
         padding: 6px 10px;
         flex-shrink: 0;
         position: relative; // prevent overlap by outline of other elements
@@ -476,7 +477,7 @@ $minimal-z-index: max(
             padding: 4px 0;
 
             a {
-              color: var(--gitako-accent-fg);
+              color: var(--color-accent-fg);
               white-space: normal;
             }
           }
@@ -485,8 +486,8 @@ $minimal-z-index: max(
         .branch-name {
           margin-left: 4px;
           padding: 4px 6px; // did not align well for some reason :/
-          color: var(--gitako-fg-muted);
-          background-color: var(--gitako-accent-subtle);
+          color: var(--color-fg-muted);
+          background-color: var(--color-accent-subtle);
           word-break: break-word;
         }
 
@@ -506,11 +507,11 @@ $minimal-z-index: max(
             }
 
             &.active .octicon {
-              color: var(--gitako-fg-default);
+              color: var(--color-fg-default);
             }
 
             .action-icon {
-              color: var(--gitako-fg-subtle);
+              color: var(--color-fg-subtle);
               width: 20px;
               height: 20px;
               text-align: center;
@@ -538,13 +539,13 @@ $minimal-z-index: max(
       .loading-indicator-container {
         width: 100%;
         height: 100%;
-        border-top: 1px solid var(--gitako-border-default);
+        border-top: 1px solid var(--color-border-default);
         @include flex-center();
 
         .loading-indicator {
           display: flex;
           align-items: center;
-          color: var(--gitako-fg-subtle);
+          color: var(--color-fg-subtle);
 
           &-icon {
             width: 20px;
@@ -602,7 +603,7 @@ $minimal-z-index: max(
 
         .status {
           padding: 4px;
-          background: var(--gitako-bg-subtle);
+          background: var(--color-bg-subtle);
 
           .lazy-mode {
             cursor: help;
@@ -632,21 +633,21 @@ $minimal-z-index: max(
 
           &.focused {
             @include interactive-background(
-              var(--gitako-canvas-subtle),
-              var(--gitako-canvas-subtle),
-              var(--gitako-canvas-inset)
+              var(--color-canvas-subtle),
+              var(--color-canvas-subtle),
+              var(--color-canvas-inset)
             );
           }
 
           @include interactive-background(
-            var(--gitako-canvas-default),
-            var(--gitako-canvas-subtle),
-            var(--gitako-canvas-inset)
+            var(--color-canvas-default),
+            var(--color-canvas-subtle),
+            var(--color-canvas-inset)
           );
 
           &.disabled {
             pointer-events: none;
-            color: var(--gitako-fg-muted);
+            color: var(--color-fg-muted);
           }
           display: flex;
           justify-content: space-between;
@@ -657,17 +658,17 @@ $minimal-z-index: max(
           white-space: nowrap;
           transition: padding 0.3s ease; // on toggle expansion in search results
 
-          border-bottom: 1px solid var(--gitako-border-muted);
+          border-bottom: 1px solid var(--color-border-muted);
           &.compact {
             border-bottom: none;
             &.focused {
-              border-top: 1px solid var(--gitako-border-muted);
-              border-bottom: 1px solid var(--gitako-border-muted);
+              border-top: 1px solid var(--color-border-muted);
+              border-bottom: 1px solid var(--color-border-muted);
             }
           }
 
           &:not(:hover) {
-            color: var(--gitako-fg-default);
+            color: var(--color-fg-default);
           }
 
           @mixin icon-size() {
@@ -714,7 +715,7 @@ $minimal-z-index: max(
 
           &:not(:hover) {
             .node-item-label .prefix {
-              color: var(--gitako-fg-muted);
+              color: var(--color-fg-muted);
             }
           }
 
@@ -727,7 +728,7 @@ $minimal-z-index: max(
               align-items: center;
               min-width: 36px;
               padding: 0 4px;
-              color: var(--gitako-fg-muted);
+              color: var(--color-fg-muted);
 
               .octicon-wrapper {
                 margin: 2px; // make it closer to the comment amount label
@@ -738,26 +739,26 @@ $minimal-z-index: max(
               display: inline-flex;
               align-items: center;
               padding: 0 4px;
-              color: var(--gitako-fg-muted);
+              color: var(--color-fg-muted);
 
               .octicon-wrapper {
                 margin: 0; // make it closer to the diff details
               }
 
               .added .octicon {
-                color: var(--gitako-success-emphasis);
+                color: var(--color-success-emphasis);
               }
               .removed .octicon {
-                color: var(--gitako-danger-emphasis);
+                color: var(--color-danger-emphasis);
               }
               .renamed .octicon {
-                color: var(--gitako-done-emphasis);
+                color: var(--color-done-emphasis);
               }
               .modified .octicon {
-                color: var(--gitako-accent-emphasis);
+                color: var(--color-accent-emphasis);
               }
               .ignored .octicon {
-                color: var(--gitako-neutral-emphasis);
+                color: var(--color-neutral-emphasis);
               }
 
               .diff-stat-graph {
@@ -769,15 +770,15 @@ $minimal-z-index: max(
                   height: 10px;
                   margin: 0 1px;
                   border-radius: 2px;
-                  background: var(--gitako-neutral-emphasis);
+                  background: var(--color-neutral-emphasis);
                 }
 
                 .diff-stat-graph-addition {
-                  background: var(--gitako-success-emphasis);
+                  background: var(--color-success-emphasis);
                 }
 
                 .diff-stat-graph-deletion {
-                  background: var(--gitako-danger-emphasis);
+                  background: var(--color-danger-emphasis);
                 }
               }
 
@@ -788,13 +789,13 @@ $minimal-z-index: max(
                 font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono,
                   monospace, 'Cascadia Code', 'Courier New', Courier;
                 .additions {
-                  color: var(--gitako-success-emphasis);
+                  color: var(--color-success-emphasis);
                 }
                 .delimiter {
-                  color: var(--gitako-neutral-emphasis);
+                  color: var(--color-neutral-emphasis);
                 }
                 .deletions {
-                  color: var(--gitako-danger-emphasis);
+                  color: var(--color-danger-emphasis);
                 }
               }
             }
@@ -832,18 +833,19 @@ $minimal-z-index: max(
     }
 
     .#{$name}-settings-bar {
-      background: var(--gitako-bg-subtle);
+      background: var(--color-bg-subtle);
       display: flex;
       flex-direction: column;
       max-height: calc(100vh - 240px);
       min-height: 240px;
       z-index: 1;
+      overflow: hidden; // prevent box-shadow of children overflow
 
       &-header {
         display: flex;
         justify-content: space-between;
         align-items: flex-start;
-        border-top: 1px solid var(--gitako-border-muted);
+        border-top: 1px solid var(--color-border-muted);
         padding: 10px;
         box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.2), 0 3px 4px 0 rgba(0, 0, 0, 0.14),
           0 3px 3px -2px rgba(0, 0, 0, 0.12);
@@ -862,7 +864,7 @@ $minimal-z-index: max(
           height: 10px;
           top: 0;
           left: 0;
-          background: var(--gitako-bg-subtle);
+          background: var(--color-bg-subtle);
           z-index: 2;
         }
         .settings-section {
@@ -899,10 +901,10 @@ $minimal-z-index: max(
                 height: 36px;
                 padding: 0 6px;
                 border-radius: 6px;
-                border: 1px solid var(--gitako-border-default);
-                background: var(--gitako-canvas-default);
-                color: var(--gitako-fg-default);
-                box-shadow: var(--gitako-primer-shadow-inset);
+                border: 1px solid var(--color-border-default);
+                background: var(--color-canvas-default);
+                color: var(--color-fg-default);
+                box-shadow: var(--color-primer-shadow-inset);
               }
 
               .chevron {
@@ -915,7 +917,7 @@ $minimal-z-index: max(
                 &::before {
                   width: 16px;
                   height: 20px;
-                  background-color: var(--gitako-fg-subtle);
+                  background-color: var(--color-fg-subtle);
                   @include pseudo-primer-icon('chevron-down-16');
                 }
               }
@@ -943,7 +945,7 @@ $minimal-z-index: max(
         margin-bottom: 4px;
       }
       .hint {
-        color: var(--gitako-fg-subtle);
+        color: var(--color-fg-subtle);
       }
       .access-token-input-control {
         display: flex;
@@ -967,10 +969,10 @@ $minimal-z-index: max(
       justify-content: space-between;
       align-items: center;
       padding: 2px 6px 2px 10px;
-      border-top: 1px solid var(--gitako-border-muted);
+      border-top: 1px solid var(--color-border-muted);
 
       .version {
-        color: var(--gitako-fg-muted);
+        color: var(--color-fg-muted);
       }
     }
 
diff --git a/src/styles/themes.scss b/src/styles/themes.scss
index 40632c5..852b34f 100644
--- a/src/styles/themes.scss
+++ b/src/styles/themes.scss
@@ -1,60 +1,70 @@
-@use './themes/light.scss' as light;
-@use './themes/dark.scss' as dark;
-@use './themes/lightHighContrast.scss' as lightHighContrast;
-@use './themes/darkHighContrast.scss' as darkHighContrast;
-@use './themes/lightColorblind.scss' as lightColorblind;
-@use './themes/darkColorblind.scss' as darkColorblind;
-@use './themes/lightTritanopia.scss' as lightTritanopia;
-@use './themes/darkTritanopia.scss' as darkTritanopia;
-@use './themes/darkDimmed.scss' as darkDimmed;
+@import '@primer/primitives/dist/scss/colors/_dark.scss';
+@import '@primer/primitives/dist/scss/colors/_dark_high_contrast.scss';
+@import '@primer/primitives/dist/scss/colors/_light_colorblind.scss';
+@import '@primer/primitives/dist/scss/colors/_dark_colorblind.scss';
+@import '@primer/primitives/dist/scss/colors/_dark_tritanopia.scss';
+@import '@primer/primitives/dist/scss/colors/_light_high_contrast.scss';
+@import '@primer/primitives/dist/scss/colors/_dark_dimmed.scss';
+@import '@primer/primitives/dist/scss/colors/_light.scss';
+@import '@primer/primitives/dist/scss/colors/_light_tritanopia.scss';
 
-@mixin setVariables($variables) {
-  @each $name, $value in $variables {
-    --gitako-#{$name}: #{$value};
+@mixin theme($themeName) {
+  &[data-color-mode='light'][data-light-theme='#{$themeName}'],
+  &[data-color-mode='dark'][data-dark-theme='#{$themeName}'] {
+    @content;
+  }
+
+  &[data-color-mode='auto'] {
+    &[data-light-theme='#{$themeName}'] {
+      @media (prefers-color-scheme: light) {
+        @content;
+      }
+    }
+
+    &[data-dark-theme='#{$themeName}'] {
+      @media (prefers-color-scheme: dark) {
+        @content;
+      }
+    }
   }
 }
 
-:root {
-  // default, e.g. when not login
-  @include setVariables(light.$variables);
+@mixin enableThemes() {
+  // default, e.g. when not login, when use in sites other than GitHub
+  @include primer-colors-light();
 
   // mapping 'canvas' to 'bg', this should be removed once GitHub exposes 'bg' colors
-  --gitako-bg-default-transparent: var(--gitako-canvas-default-transparent);
-  --gitako-bg-default: var(--gitako-canvas-default);
-  --gitako-bg-inset: var(--gitako-canvas-inset);
-  --gitako-bg-overlay: var(--gitako-canvas-overlay);
-  --gitako-bg-subtle: var(--gitako-canvas-subtle);
-}
+  --color-bg-default-transparent: var(--color-canvas-default-transparent);
+  --color-bg-default: var(--color-canvas-default);
+  --color-bg-inset: var(--color-canvas-inset);
+  --color-bg-overlay: var(--color-canvas-overlay);
+  --color-bg-subtle: var(--color-canvas-subtle);
 
-@mixin theme($themeName, $variables) {
-  :root {
-    &[data-color-mode='light'][data-light-theme='#{$themeName}'],
-    &[data-color-mode='dark'][data-dark-theme='#{$themeName}'] {
-      @include setVariables($variables);
-    }
-
-    &[data-color-mode='auto'] {
-      &[data-light-theme='#{$themeName}'] {
-        @media (prefers-color-scheme: light) {
-          @include setVariables($variables);
-        }
-      }
-
-      &[data-dark-theme='#{$themeName}'] {
-        @media (prefers-color-scheme: dark) {
-          @include setVariables($variables);
-        }
-      }
-    }
+  @include theme('dark') {
+    @include primer-colors-dark;
+  }
+  @include theme('dark_high_contrast') {
+    @include primer-colors-dark_high_contrast;
+  }
+  @include theme('light_colorblind') {
+    @include primer-colors-light_colorblind;
+  }
+  @include theme('dark_colorblind') {
+    @include primer-colors-dark_colorblind;
+  }
+  @include theme('dark_tritanopia') {
+    @include primer-colors-dark_tritanopia;
+  }
+  @include theme('light_high_contrast') {
+    @include primer-colors-light_high_contrast;
+  }
+  @include theme('dark_dimmed') {
+    @include primer-colors-dark_dimmed;
+  }
+  @include theme('light') {
+    @include primer-colors-light;
+  }
+  @include theme('light_tritanopia') {
+    @include primer-colors-light_tritanopia;
   }
 }
-
-@include theme('light', light.$variables);
-@include theme('dark', dark.$variables);
-@include theme('light_high_contrast', lightHighContrast.$variables);
-@include theme('dark_high_contrast', darkHighContrast.$variables);
-@include theme('light_colorblind', lightColorblind.$variables);
-@include theme('light_tritanopia', lightTritanopia.$variables);
-@include theme('dark_colorblind', darkColorblind.$variables);
-@include theme('dark_tritanopia', darkTritanopia.$variables);
-@include theme('dark_dimmed', darkDimmed.$variables);
diff --git a/src/styles/themes/dark.scss b/src/styles/themes/dark.scss
deleted file mode 100644
index 986117f..0000000
--- a/src/styles/themes/dark.scss
+++ /dev/null
@@ -1,418 +0,0 @@
-$variables: (
-  'accent-emphasis': '#1f6feb',
-  'accent-fg': '#58a6ff',
-  'accent-muted': 'rgba(56,139,253,0.4)',
-  'accent-subtle': 'rgba(56,139,253,0.15)',
-  'action-list-item-danger-active-bg': 'rgba(248,81,73,0.24)',
-  'action-list-item-danger-hover-bg': 'rgba(248,81,73,0.16)',
-  'action-list-item-danger-hover-text': '#ff7b72',
-  'action-list-item-default-active-bg': 'rgba(177,186,196,0.2)',
-  'action-list-item-default-hover-bg': 'rgba(177,186,196,0.12)',
-  'action-list-item-default-selected-bg': 'rgba(177,186,196,0.08)',
-  'action-list-item-inline-divider': 'rgba(48,54,61,0.48)',
-  'ansi-black-bright': '#6e7681',
-  'ansi-black': '#484f58',
-  'ansi-blue-bright': '#79c0ff',
-  'ansi-blue': '#58a6ff',
-  'ansi-cyan-bright': '#56d4dd',
-  'ansi-cyan': '#39c5cf',
-  'ansi-gray': '#6e7681',
-  'ansi-green-bright': '#56d364',
-  'ansi-green': '#3fb950',
-  'ansi-magenta-bright': '#d2a8ff',
-  'ansi-magenta': '#bc8cff',
-  'ansi-red-bright': '#ffa198',
-  'ansi-red': '#ff7b72',
-  'ansi-white-bright': '#f0f6fc',
-  'ansi-white': '#b1bac4',
-  'ansi-yellow-bright': '#e3b341',
-  'ansi-yellow': '#d29922',
-  'attention-emphasis': '#9e6a03',
-  'attention-fg': '#d29922',
-  'attention-muted': 'rgba(187,128,9,0.4)',
-  'attention-subtle': 'rgba(187,128,9,0.15)',
-  'avatar-bg': 'rgba(240,246,252,0.1)',
-  'avatar-border': 'rgba(240,246,252,0.1)',
-  'avatar-child-shadow': '-2px -2px 0 #0d1117',
-  'avatar-stack-fade-more': '#21262d',
-  'avatar-stack-fade': '#30363d',
-  'border-default': '#30363d',
-  'border-muted': '#21262d',
-  'border-subtle': 'rgba(240,246,252,0.1)',
-  'btn-active-bg': 'hsla(212,12%,18%,1)',
-  'btn-active-border': '#6e7681',
-  'btn-bg': '#21262d',
-  'btn-border': 'rgba(240,246,252,0.1)',
-  'btn-counter-bg': '#30363d',
-  'btn-danger-counter-bg': 'rgba(218,54,51,0.1)',
-  'btn-danger-disabled-bg': '#0d1117',
-  'btn-danger-disabled-counter-bg': 'rgba(218,54,51,0.05)',
-  'btn-danger-disabled-text': 'rgba(248,81,73,0.5)',
-  'btn-danger-focus-border': '#f85149',
-  'btn-danger-focus-shadow': '0 0 0 3px rgba(248,81,73,0.4)',
-  'btn-danger-hover-bg': '#da3633',
-  'btn-danger-hover-border': '#f85149',
-  'btn-danger-hover-counter-bg': 'rgba(255,255,255,0.2)',
-  'btn-danger-hover-icon': '#f0f6fc',
-  'btn-danger-hover-inset-shadow': '0 0 transparent',
-  'btn-danger-hover-shadow': '0 0 transparent',
-  'btn-danger-hover-text': '#f0f6fc',
-  'btn-danger-icon': '#f85149',
-  'btn-danger-selected-bg': '#b62324',
-  'btn-danger-selected-border': '#ff7b72',
-  'btn-danger-selected-shadow': '0 0 transparent',
-  'btn-danger-selected-text': '#ffffff',
-  'btn-danger-text': '#f85149',
-  'btn-focus-bg': '#21262d',
-  'btn-focus-border': '#8b949e',
-  'btn-focus-shadow': '0 0 0 3px rgba(139,148,158,0.3)',
-  'btn-hover-bg': '#30363d',
-  'btn-hover-border': '#8b949e',
-  'btn-inset-shadow': '0 0 transparent',
-  'btn-outline-counter-bg': 'rgba(31,111,235,0.1)',
-  'btn-outline-disabled-bg': '#0d1117',
-  'btn-outline-disabled-counter-bg': 'rgba(31,111,235,0.05)',
-  'btn-outline-disabled-text': 'rgba(88,166,255,0.5)',
-  'btn-outline-focus-border': 'rgba(240,246,252,0.1)',
-  'btn-outline-focus-shadow': '0 0 0 3px rgba(17,88,199,0.4)',
-  'btn-outline-hover-bg': '#30363d',
-  'btn-outline-hover-border': 'rgba(240,246,252,0.1)',
-  'btn-outline-hover-counter-bg': 'rgba(240,246,252,0.2)',
-  'btn-outline-hover-inset-shadow': 'inset 0 1px 0 rgba(240,246,252,0.03)',
-  'btn-outline-hover-shadow': '0 1px 0 rgba(1,4,9,0.1)',
-  'btn-outline-hover-text': '#58a6ff',
-  'btn-outline-selected-bg': '#0d419d',
-  'btn-outline-selected-border': 'rgba(240,246,252,0.1)',
-  'btn-outline-selected-shadow': '0 0 transparent',
-  'btn-outline-selected-text': '#f0f6fc',
-  'btn-outline-text': '#58a6ff',
-  'btn-primary-bg': '#238636',
-  'btn-primary-border': 'rgba(240,246,252,0.1)',
-  'btn-primary-counter-bg': 'rgba(240,246,252,0.2)',
-  'btn-primary-disabled-bg': 'rgba(35,134,54,0.6)',
-  'btn-primary-disabled-border': 'rgba(240,246,252,0.1)',
-  'btn-primary-disabled-text': 'rgba(240,246,252,0.5)',
-  'btn-primary-focus-bg': '#238636',
-  'btn-primary-focus-border': 'rgba(240,246,252,0.1)',
-  'btn-primary-focus-shadow': '0 0 0 3px rgba(46,164,79,0.4)',
-  'btn-primary-hover-bg': '#2ea043',
-  'btn-primary-hover-border': 'rgba(240,246,252,0.1)',
-  'btn-primary-icon': '#f0f6fc',
-  'btn-primary-inset-shadow': '0 0 transparent',
-  'btn-primary-selected-bg': '#238636',
-  'btn-primary-selected-shadow': '0 0 transparent',
-  'btn-primary-shadow': '0 0 transparent',
-  'btn-primary-text': '#ffffff',
-  'btn-selected-bg': '#161b22',
-  'btn-shadow-active': 'inset 0 0.15em 0.3em rgba(1,4,9,0.15)',
-  'btn-shadow-input-focus': '0 0 0 0.2em rgba(31,111,235,0.3)',
-  'btn-shadow': '0 0 transparent',
-  'btn-text': '#c9d1d9',
-  'canvas-default-transparent': 'rgba(13,17,23,0)',
-  'canvas-default': '#0d1117',
-  'canvas-inset': '#010409',
-  'canvas-overlay': '#161b22',
-  'canvas-subtle': '#161b22',
-  'checks-ansi-black-bright': '#161b22',
-  'checks-ansi-black': '#0d1117',
-  'checks-ansi-blue-bright': '#79c0ff',
-  'checks-ansi-blue': '#58a6ff',
-  'checks-ansi-cyan-bright': '#b3f0ff',
-  'checks-ansi-cyan': '#76e3ea',
-  'checks-ansi-gray': '#6e7681',
-  'checks-ansi-green-bright': '#56d364',
-  'checks-ansi-green': '#3fb950',
-  'checks-ansi-magenta-bright': '#d2a8ff',
-  'checks-ansi-magenta': '#bc8cff',
-  'checks-ansi-red-bright': '#ffa198',
-  'checks-ansi-red': '#ff7b72',
-  'checks-ansi-white-bright': '#b1bac4',
-  'checks-ansi-white': '#b1bac4',
-  'checks-ansi-yellow-bright': '#e3b341',
-  'checks-ansi-yellow': '#d29922',
-  'checks-bg': '#010409',
-  'checks-btn-hover-bg': 'rgba(110,118,129,0.1)',
-  'checks-btn-hover-icon': '#c9d1d9',
-  'checks-btn-icon': '#8b949e',
-  'checks-container-border-width': '1px',
-  'checks-donut-error': '#f85149',
-  'checks-donut-neutral': '#8b949e',
-  'checks-donut-pending': '#d29922',
-  'checks-donut-success': '#2ea043',
-  'checks-dropdown-bg': '#161b22',
-  'checks-dropdown-border': '#30363d',
-  'checks-dropdown-btn-hover-bg': 'rgba(110,118,129,0.1)',
-  'checks-dropdown-btn-hover-text': '#c9d1d9',
-  'checks-dropdown-hover-bg': 'rgba(110,118,129,0.1)',
-  'checks-dropdown-hover-text': '#c9d1d9',
-  'checks-dropdown-shadow': 'rgba(1,4,9,0.3)',
-  'checks-dropdown-text': '#c9d1d9',
-  'checks-gate-bg': 'rgba(187,128,9,0.15)',
-  'checks-gate-text': '#8b949e',
-  'checks-gate-waiting-text': '#d29922',
-  'checks-header-border': '#21262d',
-  'checks-header-icon': '#8b949e',
-  'checks-header-label-open-text': '#c9d1d9',
-  'checks-header-label-text': '#8b949e',
-  'checks-input-bg': '#161b22',
-  'checks-input-focus-text': '#c9d1d9',
-  'checks-input-placeholder-text': '#484f58',
-  'checks-input-shadow': '0 0 0 1px (obj) => get_1.default(obj, path)',
-  'checks-input-text': '#8b949e',
-  'checks-line-dt-fm-bg': '#9e6a03',
-  'checks-line-dt-fm-text': '#f0f6fc',
-  'checks-line-hover-bg': 'rgba(110,118,129,0.1)',
-  'checks-line-num-text': '#484f58',
-  'checks-line-selected-bg': 'rgba(56,139,253,0.15)',
-  'checks-line-selected-num-text': '#58a6ff',
-  'checks-line-text': '#8b949e',
-  'checks-line-timestamp-text': '#484f58',
-  'checks-logline-command-text': '#58a6ff',
-  'checks-logline-debug-text': '#a371f7',
-  'checks-logline-error-bg': 'rgba(248,81,73,0.15)',
-  'checks-logline-error-num-text': '#484f58',
-  'checks-logline-error-text': '#8b949e',
-  'checks-logline-num-text': '#484f58',
-  'checks-logline-section-text': '#3fb950',
-  'checks-logline-text': '#8b949e',
-  'checks-logline-warning-bg': 'rgba(187,128,9,0.15)',
-  'checks-logline-warning-num-text': '#d29922',
-  'checks-logline-warning-text': '#8b949e',
-  'checks-run-border-width': '1px',
-  'checks-scrollbar-thumb-bg': 'rgba(110,118,129,0.4)',
-  'checks-step-error-text': '#f85149',
-  'checks-step-header-open-bg': '#161b22',
-  'checks-step-warning-text': '#d29922',
-  'checks-text-link': '#58a6ff',
-  'checks-text-primary': '#c9d1d9',
-  'checks-text-secondary': '#8b949e',
-  'codemirror-activeline-bg': 'rgba(110,118,129,0.1)',
-  'codemirror-bg': '#0d1117',
-  'codemirror-cursor': '#c9d1d9',
-  'codemirror-guttermarker-subtle-text': '#484f58',
-  'codemirror-guttermarker-text': '#0d1117',
-  'codemirror-gutters-bg': '#0d1117',
-  'codemirror-linenumber-text': '#8b949e',
-  'codemirror-lines-bg': '#0d1117',
-  'codemirror-matchingbracket-text': '#c9d1d9',
-  'codemirror-selection-bg': 'rgba(56,139,253,0.4)',
-  'codemirror-syntax-comment': '#8b949e',
-  'codemirror-syntax-constant': '#79c0ff',
-  'codemirror-syntax-entity': '#d2a8ff',
-  'codemirror-syntax-keyword': '#ff7b72',
-  'codemirror-syntax-storage': '#ff7b72',
-  'codemirror-syntax-string': '#a5d6ff',
-  'codemirror-syntax-support': '#79c0ff',
-  'codemirror-syntax-variable': '#ffa657',
-  'codemirror-text': '#c9d1d9',
-  'counter-border': 'rgba(0,0,0,0)',
-  'danger-emphasis': '#da3633',
-  'danger-fg': '#f85149',
-  'danger-muted': 'rgba(248,81,73,0.4)',
-  'danger-subtle': 'rgba(248,81,73,0.15)',
-  'diff-blob-addition-fg': '#c9d1d9',
-  'diff-blob-addition-line-bg': 'rgba(46,160,67,0.15)',
-  'diff-blob-addition-num-bg': 'rgba(63,185,80,0.3)',
-  'diff-blob-addition-num-text': '#c9d1d9',
-  'diff-blob-addition-word-bg': 'rgba(46,160,67,0.4)',
-  'diff-blob-deletion-fg': '#c9d1d9',
-  'diff-blob-deletion-line-bg': 'rgba(248,81,73,0.15)',
-  'diff-blob-deletion-num-bg': 'rgba(248,81,73,0.3)',
-  'diff-blob-deletion-num-text': '#c9d1d9',
-  'diff-blob-deletion-word-bg': 'rgba(248,81,73,0.4)',
-  'diff-blob-expander-icon': '#8b949e',
-  'diff-blob-hunk-num-bg': 'rgba(56,139,253,0.4)',
-  'diff-blob-selected-line-highlight-mix-blend-mode': 'screen',
-  'diffstat-addition-bg': '#3fb950',
-  'diffstat-addition-border': 'rgba(240,246,252,0.1)',
-  'diffstat-deletion-border': 'rgba(240,246,252,0.1)',
-  'done-emphasis': '#8957e5',
-  'done-fg': '#a371f7',
-  'done-muted': 'rgba(163,113,247,0.4)',
-  'done-subtle': 'rgba(163,113,247,0.15)',
-  'fg-default': '#c9d1d9',
-  'fg-muted': '#8b949e',
-  'fg-on-emphasis': '#f0f6fc',
-  'fg-subtle': '#484f58',
-  'header-bg': '#161b22',
-  'header-divider': '#8b949e',
-  'header-logo': '#f0f6fc',
-  'header-search-bg': '#0d1117',
-  'header-search-border': '#30363d',
-  'header-text': 'rgba(240,246,252,0.7)',
-  'input-disabled-bg': 'rgba(110,118,129,0)',
-  'marketing-icon-primary': '#79c0ff',
-  'marketing-icon-secondary': '#1f6feb',
-  'menu-bg-active': '#161b22',
-  'mktg-btn-bg': '#f6f8fa',
-  'mktg-btn-shadow-focus': 'rgb(255 255 255 / 25%) 0 0 0 4px',
-  'mktg-btn-shadow-hover-muted': 'rgb(255 255 255) 0 0 0 2px inset',
-  'mktg-btn-shadow-hover':
-    '0 4px 7px rgba(0, 0, 0, 0.15), 0 100px 80px rgba(255, 255, 255, 0.02), 0 42px 33px rgba(255, 255, 255, 0.024), 0 22px 18px rgba(255, 255, 255, 0.028), 0 12px 10px rgba(255, 255, 255, 0.034), 0 7px 5px rgba(255, 255, 255, 0.04), 0 3px 2px rgba(255, 255, 255, 0.07)',
-  'mktg-btn-shadow-outline': 'rgb(255 255 255 / 25%) 0 0 0 1px inset',
-  'neutral-emphasis-plus': '#6e7681',
-  'neutral-emphasis': '#6e7681',
-  'neutral-muted': 'rgba(110,118,129,0.4)',
-  'neutral-subtle': 'rgba(110,118,129,0.1)',
-  'overlay-shadow': '0 0 0 1px #30363d, 0 16px 32px rgba(1,4,9,0.85)',
-  'page-header-bg': '#0d1117',
-  'prettylights-syntax-brackethighlighter-angle': '#8b949e',
-  'prettylights-syntax-brackethighlighter-unmatched': '#f85149',
-  'prettylights-syntax-carriage-return-bg': '#b62324',
-  'prettylights-syntax-carriage-return-text': '#f0f6fc',
-  'prettylights-syntax-comment': '#8b949e',
-  'prettylights-syntax-constant-other-reference-link': '#a5d6ff',
-  'prettylights-syntax-constant': '#79c0ff',
-  'prettylights-syntax-entity-tag': '#7ee787',
-  'prettylights-syntax-entity': '#d2a8ff',
-  'prettylights-syntax-invalid-illegal-bg': '#8e1519',
-  'prettylights-syntax-invalid-illegal-text': '#f0f6fc',
-  'prettylights-syntax-keyword': '#ff7b72',
-  'prettylights-syntax-markup-bold': '#c9d1d9',
-  'prettylights-syntax-markup-changed-bg': '#5a1e02',
-  'prettylights-syntax-markup-changed-text': '#ffdfb6',
-  'prettylights-syntax-markup-deleted-bg': '#67060c',
-  'prettylights-syntax-markup-deleted-text': '#ffdcd7',
-  'prettylights-syntax-markup-heading': '#1f6feb',
-  'prettylights-syntax-markup-ignored-bg': '#1158c7',
-  'prettylights-syntax-markup-ignored-text': '#c9d1d9',
-  'prettylights-syntax-markup-inserted-bg': '#033a16',
-  'prettylights-syntax-markup-inserted-text': '#aff5b4',
-  'prettylights-syntax-markup-italic': '#c9d1d9',
-  'prettylights-syntax-markup-list': '#f2cc60',
-  'prettylights-syntax-meta-diff-range': '#d2a8ff',
-  'prettylights-syntax-storage-modifier-import': '#c9d1d9',
-  'prettylights-syntax-string-regexp': '#7ee787',
-  'prettylights-syntax-string': '#a5d6ff',
-  'prettylights-syntax-sublimelinter-gutter-mark': '#484f58',
-  'prettylights-syntax-variable': '#ffa657',
-  'primer-border-active': '#F78166',
-  'primer-border-contrast': 'rgba(240,246,252,0.2)',
-  'primer-canvas-backdrop': 'rgba(1,4,9,0.8)',
-  'primer-canvas-sticky': 'rgba(13,17,23,0.95)',
-  'primer-fg-disabled': '#484f58',
-  'primer-shadow-focus': '0 0 0 3px #0c2d6b',
-  'primer-shadow-highlight': '0 0 transparent',
-  'primer-shadow-inset': '0 0 transparent',
-  'project-gradient-in': '#161b22',
-  'project-gradient-out': 'rgba(22,27,34,0)',
-  'project-header-bg': '#0d1117',
-  'project-sidebar-bg': '#161b22',
-  'scale-black': '#010409',
-  'scale-blue-0': '#cae8ff',
-  'scale-blue-1': '#a5d6ff',
-  'scale-blue-2': '#79c0ff',
-  'scale-blue-3': '#58a6ff',
-  'scale-blue-4': '#388bfd',
-  'scale-blue-5': '#1f6feb',
-  'scale-blue-6': '#1158c7',
-  'scale-blue-7': '#0d419d',
-  'scale-blue-8': '#0c2d6b',
-  'scale-blue-9': '#051d4d',
-  'scale-coral-0': '#FFDDD2',
-  'scale-coral-1': '#FFC2B2',
-  'scale-coral-2': '#FFA28B',
-  'scale-coral-3': '#F78166',
-  'scale-coral-4': '#EA6045',
-  'scale-coral-5': '#CF462D',
-  'scale-coral-6': '#AC3220',
-  'scale-coral-7': '#872012',
-  'scale-coral-8': '#640D04',
-  'scale-coral-9': '#460701',
-  'scale-gray-0': '#f0f6fc',
-  'scale-gray-1': '#c9d1d9',
-  'scale-gray-2': '#b1bac4',
-  'scale-gray-3': '#8b949e',
-  'scale-gray-4': '#6e7681',
-  'scale-gray-5': '#484f58',
-  'scale-gray-6': '#30363d',
-  'scale-gray-7': '#21262d',
-  'scale-gray-8': '#161b22',
-  'scale-gray-9': '#0d1117',
-  'scale-green-0': '#aff5b4',
-  'scale-green-1': '#7ee787',
-  'scale-green-2': '#56d364',
-  'scale-green-3': '#3fb950',
-  'scale-green-4': '#2ea043',
-  'scale-green-5': '#238636',
-  'scale-green-6': '#196c2e',
-  'scale-green-7': '#0f5323',
-  'scale-green-8': '#033a16',
-  'scale-green-9': '#04260f',
-  'scale-orange-0': '#ffdfb6',
-  'scale-orange-1': '#ffc680',
-  'scale-orange-2': '#ffa657',
-  'scale-orange-3': '#f0883e',
-  'scale-orange-4': '#db6d28',
-  'scale-orange-5': '#bd561d',
-  'scale-orange-6': '#9b4215',
-  'scale-orange-7': '#762d0a',
-  'scale-orange-8': '#5a1e02',
-  'scale-orange-9': '#3d1300',
-  'scale-pink-0': '#ffdaec',
-  'scale-pink-1': '#ffbedd',
-  'scale-pink-2': '#ff9bce',
-  'scale-pink-3': '#f778ba',
-  'scale-pink-4': '#db61a2',
-  'scale-pink-5': '#bf4b8a',
-  'scale-pink-6': '#9e3670',
-  'scale-pink-7': '#7d2457',
-  'scale-pink-8': '#5e103e',
-  'scale-pink-9': '#42062a',
-  'scale-purple-0': '#eddeff',
-  'scale-purple-1': '#e2c5ff',
-  'scale-purple-2': '#d2a8ff',
-  'scale-purple-3': '#bc8cff',
-  'scale-purple-4': '#a371f7',
-  'scale-purple-5': '#8957e5',
-  'scale-purple-6': '#6e40c9',
-  'scale-purple-7': '#553098',
-  'scale-purple-8': '#3c1e70',
-  'scale-purple-9': '#271052',
-  'scale-red-0': '#ffdcd7',
-  'scale-red-1': '#ffc1ba',
-  'scale-red-2': '#ffa198',
-  'scale-red-3': '#ff7b72',
-  'scale-red-4': '#f85149',
-  'scale-red-5': '#da3633',
-  'scale-red-6': '#b62324',
-  'scale-red-7': '#8e1519',
-  'scale-red-8': '#67060c',
-  'scale-red-9': '#490202',
-  'scale-white': '#f0f6fc',
-  'scale-yellow-0': '#f8e3a1',
-  'scale-yellow-1': '#f2cc60',
-  'scale-yellow-2': '#e3b341',
-  'scale-yellow-3': '#d29922',
-  'scale-yellow-4': '#bb8009',
-  'scale-yellow-5': '#9e6a03',
-  'scale-yellow-6': '#845306',
-  'scale-yellow-7': '#693e00',
-  'scale-yellow-8': '#4b2900',
-  'scale-yellow-9': '#341a00',
-  'search-keyword-hl': 'rgba(210,153,34,0.4)',
-  'select-menu-backdrop-border': '#484f58',
-  'select-menu-tap-focus-bg': '#0c2d6b',
-  'select-menu-tap-highlight': 'rgba(48,54,61,0.5)',
-  'severe-emphasis': '#bd561d',
-  'severe-fg': '#db6d28',
-  'severe-muted': 'rgba(219,109,40,0.4)',
-  'severe-subtle': 'rgba(219,109,40,0.15)',
-  'shadow-extra-large': '0 12px 48px #010409',
-  'shadow-large': '0 8px 24px #010409',
-  'shadow-medium': '0 3px 6px #010409',
-  'shadow-small': '0 0 transparent',
-  'sidenav-selected-bg': '#21262d',
-  'sponsors-emphasis': '#bf4b8a',
-  'sponsors-fg': '#db61a2',
-  'sponsors-muted': 'rgba(219,97,162,0.4)',
-  'sponsors-subtle': 'rgba(219,97,162,0.15)',
-  'success-emphasis': '#238636',
-  'success-fg': '#3fb950',
-  'success-muted': 'rgba(46,160,67,0.4)',
-  'success-subtle': 'rgba(46,160,67,0.15)',
-  'timeline-badge-bg': '#21262d',
-  'topic-tag-border': 'rgba(0,0,0,0)',
-  'underlinenav-border-hover': 'rgba(110,118,129,0.4)',
-  'underlinenav-icon': '#484f58',
-);
diff --git a/src/styles/themes/darkColorblind.scss b/src/styles/themes/darkColorblind.scss
deleted file mode 100644
index 49f7777..0000000
--- a/src/styles/themes/darkColorblind.scss
+++ /dev/null
@@ -1,418 +0,0 @@
-$variables: (
-  'accent-emphasis': '#1f6feb',
-  'accent-fg': '#58a6ff',
-  'accent-muted': 'rgba(56,139,253,0.4)',
-  'accent-subtle': 'rgba(56,139,253,0.15)',
-  'action-list-item-danger-active-bg': 'rgba(195,128,0,0.24)',
-  'action-list-item-danger-hover-bg': 'rgba(195,128,0,0.16)',
-  'action-list-item-danger-hover-text': '#d69a00',
-  'action-list-item-default-active-bg': 'rgba(177,186,196,0.2)',
-  'action-list-item-default-hover-bg': 'rgba(177,186,196,0.12)',
-  'action-list-item-default-selected-bg': 'rgba(177,186,196,0.08)',
-  'action-list-item-inline-divider': 'rgba(48,54,61,0.48)',
-  'ansi-black-bright': '#6e7681',
-  'ansi-black': '#484f58',
-  'ansi-blue-bright': '#79c0ff',
-  'ansi-blue': '#58a6ff',
-  'ansi-cyan-bright': '#56d4dd',
-  'ansi-cyan': '#39c5cf',
-  'ansi-gray': '#6e7681',
-  'ansi-green-bright': '#66baff',
-  'ansi-green': '#42a0ff',
-  'ansi-magenta-bright': '#d2a8ff',
-  'ansi-magenta': '#bc8cff',
-  'ansi-red-bright': '#e6b716',
-  'ansi-red': '#d69a00',
-  'ansi-white-bright': '#f0f6fc',
-  'ansi-white': '#b1bac4',
-  'ansi-yellow-bright': '#e3b341',
-  'ansi-yellow': '#d29922',
-  'attention-emphasis': '#9e6a03',
-  'attention-fg': '#d29922',
-  'attention-muted': 'rgba(187,128,9,0.4)',
-  'attention-subtle': 'rgba(187,128,9,0.15)',
-  'avatar-bg': 'rgba(240,246,252,0.1)',
-  'avatar-border': 'rgba(240,246,252,0.1)',
-  'avatar-child-shadow': '-2px -2px 0 #0d1117',
-  'avatar-stack-fade-more': '#21262d',
-  'avatar-stack-fade': '#30363d',
-  'border-default': '#30363d',
-  'border-muted': '#21262d',
-  'border-subtle': 'rgba(240,246,252,0.1)',
-  'btn-active-bg': 'hsla(212,12%,18%,1)',
-  'btn-active-border': '#6e7681',
-  'btn-bg': '#21262d',
-  'btn-border': 'rgba(240,246,252,0.1)',
-  'btn-counter-bg': '#30363d',
-  'btn-danger-counter-bg': 'rgba(166,105,0,0.1)',
-  'btn-danger-disabled-bg': '#0d1117',
-  'btn-danger-disabled-counter-bg': 'rgba(166,105,0,0.05)',
-  'btn-danger-disabled-text': 'rgba(195,128,0,0.5)',
-  'btn-danger-focus-border': '#c38000',
-  'btn-danger-focus-shadow': '0 0 0 3px rgba(195,128,0,0.4)',
-  'btn-danger-hover-bg': '#a66900',
-  'btn-danger-hover-border': '#c38000',
-  'btn-danger-hover-counter-bg': 'rgba(255,255,255,0.2)',
-  'btn-danger-hover-icon': '#f0f6fc',
-  'btn-danger-hover-inset-shadow': '0 0 transparent',
-  'btn-danger-hover-shadow': '0 0 transparent',
-  'btn-danger-hover-text': '#f0f6fc',
-  'btn-danger-icon': '#c38000',
-  'btn-danger-selected-bg': '#865401',
-  'btn-danger-selected-border': '#d69a00',
-  'btn-danger-selected-shadow': '0 0 transparent',
-  'btn-danger-selected-text': '#ffffff',
-  'btn-danger-text': '#c38000',
-  'btn-focus-bg': '#21262d',
-  'btn-focus-border': '#8b949e',
-  'btn-focus-shadow': '0 0 0 3px rgba(139,148,158,0.3)',
-  'btn-hover-bg': '#30363d',
-  'btn-hover-border': '#8b949e',
-  'btn-inset-shadow': '0 0 transparent',
-  'btn-outline-counter-bg': 'rgba(31,111,235,0.1)',
-  'btn-outline-disabled-bg': '#0d1117',
-  'btn-outline-disabled-counter-bg': 'rgba(31,111,235,0.05)',
-  'btn-outline-disabled-text': 'rgba(88,166,255,0.5)',
-  'btn-outline-focus-border': 'rgba(240,246,252,0.1)',
-  'btn-outline-focus-shadow': '0 0 0 3px rgba(17,88,199,0.4)',
-  'btn-outline-hover-bg': '#30363d',
-  'btn-outline-hover-border': 'rgba(240,246,252,0.1)',
-  'btn-outline-hover-counter-bg': 'rgba(240,246,252,0.2)',
-  'btn-outline-hover-inset-shadow': 'inset 0 1px 0 rgba(240,246,252,0.03)',
-  'btn-outline-hover-shadow': '0 1px 0 rgba(1,4,9,0.1)',
-  'btn-outline-hover-text': '#58a6ff',
-  'btn-outline-selected-bg': '#0d419d',
-  'btn-outline-selected-border': 'rgba(240,246,252,0.1)',
-  'btn-outline-selected-shadow': '0 0 transparent',
-  'btn-outline-selected-text': '#f0f6fc',
-  'btn-outline-text': '#58a6ff',
-  'btn-primary-bg': '#1d69e0',
-  'btn-primary-border': 'rgba(240,246,252,0.1)',
-  'btn-primary-counter-bg': 'rgba(240,246,252,0.2)',
-  'btn-primary-disabled-bg': 'rgba(29,105,224,0.6)',
-  'btn-primary-disabled-border': 'rgba(240,246,252,0.1)',
-  'btn-primary-disabled-text': 'rgba(240,246,252,0.5)',
-  'btn-primary-focus-bg': '#1d69e0',
-  'btn-primary-focus-border': 'rgba(240,246,252,0.1)',
-  'btn-primary-focus-shadow': '0 0 0 3px rgba(46,164,79,0.4)',
-  'btn-primary-hover-bg': '#1585fd',
-  'btn-primary-hover-border': 'rgba(240,246,252,0.1)',
-  'btn-primary-icon': '#f0f6fc',
-  'btn-primary-inset-shadow': '0 0 transparent',
-  'btn-primary-selected-bg': '#1d69e0',
-  'btn-primary-selected-shadow': '0 0 transparent',
-  'btn-primary-shadow': '0 0 transparent',
-  'btn-primary-text': '#ffffff',
-  'btn-selected-bg': '#161b22',
-  'btn-shadow-active': 'inset 0 0.15em 0.3em rgba(1,4,9,0.15)',
-  'btn-shadow-input-focus': '0 0 0 0.2em rgba(31,111,235,0.3)',
-  'btn-shadow': '0 0 transparent',
-  'btn-text': '#c9d1d9',
-  'canvas-default-transparent': 'rgba(13,17,23,0)',
-  'canvas-default': '#0d1117',
-  'canvas-inset': '#010409',
-  'canvas-overlay': '#161b22',
-  'canvas-subtle': '#161b22',
-  'checks-ansi-black-bright': '#161b22',
-  'checks-ansi-black': '#0d1117',
-  'checks-ansi-blue-bright': '#79c0ff',
-  'checks-ansi-blue': '#58a6ff',
-  'checks-ansi-cyan-bright': '#b3f0ff',
-  'checks-ansi-cyan': '#76e3ea',
-  'checks-ansi-gray': '#6e7681',
-  'checks-ansi-green-bright': '#66baff',
-  'checks-ansi-green': '#42a0ff',
-  'checks-ansi-magenta-bright': '#d2a8ff',
-  'checks-ansi-magenta': '#bc8cff',
-  'checks-ansi-red-bright': '#e6b716',
-  'checks-ansi-red': '#d69a00',
-  'checks-ansi-white-bright': '#b1bac4',
-  'checks-ansi-white': '#b1bac4',
-  'checks-ansi-yellow-bright': '#e3b341',
-  'checks-ansi-yellow': '#d29922',
-  'checks-bg': '#010409',
-  'checks-btn-hover-bg': 'rgba(110,118,129,0.1)',
-  'checks-btn-hover-icon': '#c9d1d9',
-  'checks-btn-icon': '#8b949e',
-  'checks-container-border-width': '1px',
-  'checks-donut-error': '#c38000',
-  'checks-donut-neutral': '#8b949e',
-  'checks-donut-pending': '#d29922',
-  'checks-donut-success': '#1585fd',
-  'checks-dropdown-bg': '#161b22',
-  'checks-dropdown-border': '#30363d',
-  'checks-dropdown-btn-hover-bg': 'rgba(110,118,129,0.1)',
-  'checks-dropdown-btn-hover-text': '#c9d1d9',
-  'checks-dropdown-hover-bg': 'rgba(110,118,129,0.1)',
-  'checks-dropdown-hover-text': '#c9d1d9',
-  'checks-dropdown-shadow': 'rgba(1,4,9,0.3)',
-  'checks-dropdown-text': '#c9d1d9',
-  'checks-gate-bg': 'rgba(187,128,9,0.15)',
-  'checks-gate-text': '#8b949e',
-  'checks-gate-waiting-text': '#d29922',
-  'checks-header-border': '#21262d',
-  'checks-header-icon': '#8b949e',
-  'checks-header-label-open-text': '#c9d1d9',
-  'checks-header-label-text': '#8b949e',
-  'checks-input-bg': '#161b22',
-  'checks-input-focus-text': '#c9d1d9',
-  'checks-input-placeholder-text': '#484f58',
-  'checks-input-shadow': '0 0 0 1px (obj) => get_1.default(obj, path)',
-  'checks-input-text': '#8b949e',
-  'checks-line-dt-fm-bg': '#9e6a03',
-  'checks-line-dt-fm-text': '#f0f6fc',
-  'checks-line-hover-bg': 'rgba(110,118,129,0.1)',
-  'checks-line-num-text': '#484f58',
-  'checks-line-selected-bg': 'rgba(56,139,253,0.15)',
-  'checks-line-selected-num-text': '#58a6ff',
-  'checks-line-text': '#8b949e',
-  'checks-line-timestamp-text': '#484f58',
-  'checks-logline-command-text': '#58a6ff',
-  'checks-logline-debug-text': '#a371f7',
-  'checks-logline-error-bg': 'rgba(195,128,0,0.15)',
-  'checks-logline-error-num-text': '#484f58',
-  'checks-logline-error-text': '#8b949e',
-  'checks-logline-num-text': '#484f58',
-  'checks-logline-section-text': '#42a0ff',
-  'checks-logline-text': '#8b949e',
-  'checks-logline-warning-bg': 'rgba(187,128,9,0.15)',
-  'checks-logline-warning-num-text': '#d29922',
-  'checks-logline-warning-text': '#8b949e',
-  'checks-run-border-width': '1px',
-  'checks-scrollbar-thumb-bg': 'rgba(110,118,129,0.4)',
-  'checks-step-error-text': '#c38000',
-  'checks-step-header-open-bg': '#161b22',
-  'checks-step-warning-text': '#d29922',
-  'checks-text-link': '#58a6ff',
-  'checks-text-primary': '#c9d1d9',
-  'checks-text-secondary': '#8b949e',
-  'codemirror-activeline-bg': 'rgba(110,118,129,0.1)',
-  'codemirror-bg': '#0d1117',
-  'codemirror-cursor': '#c9d1d9',
-  'codemirror-guttermarker-subtle-text': '#484f58',
-  'codemirror-guttermarker-text': '#0d1117',
-  'codemirror-gutters-bg': '#0d1117',
-  'codemirror-linenumber-text': '#8b949e',
-  'codemirror-lines-bg': '#0d1117',
-  'codemirror-matchingbracket-text': '#c9d1d9',
-  'codemirror-selection-bg': 'rgba(56,139,253,0.4)',
-  'codemirror-syntax-comment': '#8b949e',
-  'codemirror-syntax-constant': '#79c0ff',
-  'codemirror-syntax-entity': '#d2a8ff',
-  'codemirror-syntax-keyword': '#d69a00',
-  'codemirror-syntax-storage': '#d69a00',
-  'codemirror-syntax-string': '#a5d6ff',
-  'codemirror-syntax-support': '#79c0ff',
-  'codemirror-syntax-variable': '#ffa657',
-  'codemirror-text': '#c9d1d9',
-  'counter-border': 'rgba(0,0,0,0)',
-  'danger-emphasis': '#a66900',
-  'danger-fg': '#c38000',
-  'danger-muted': 'rgba(195,128,0,0.4)',
-  'danger-subtle': 'rgba(195,128,0,0.15)',
-  'diff-blob-addition-fg': '#c9d1d9',
-  'diff-blob-addition-line-bg': 'rgba(21,133,253,0.15)',
-  'diff-blob-addition-num-bg': 'rgba(66,160,255,0.3)',
-  'diff-blob-addition-num-text': '#c9d1d9',
-  'diff-blob-addition-word-bg': 'rgba(21,133,253,0.4)',
-  'diff-blob-deletion-fg': '#c9d1d9',
-  'diff-blob-deletion-line-bg': 'rgba(195,128,0,0.15)',
-  'diff-blob-deletion-num-bg': 'rgba(195,128,0,0.3)',
-  'diff-blob-deletion-num-text': '#c9d1d9',
-  'diff-blob-deletion-word-bg': 'rgba(195,128,0,0.4)',
-  'diff-blob-expander-icon': '#8b949e',
-  'diff-blob-hunk-num-bg': 'rgba(56,139,253,0.4)',
-  'diff-blob-selected-line-highlight-mix-blend-mode': 'screen',
-  'diffstat-addition-bg': '#42a0ff',
-  'diffstat-addition-border': 'rgba(240,246,252,0.1)',
-  'diffstat-deletion-border': 'rgba(240,246,252,0.1)',
-  'done-emphasis': '#8957e5',
-  'done-fg': '#a371f7',
-  'done-muted': 'rgba(163,113,247,0.4)',
-  'done-subtle': 'rgba(163,113,247,0.15)',
-  'fg-default': '#c9d1d9',
-  'fg-muted': '#8b949e',
-  'fg-on-emphasis': '#f0f6fc',
-  'fg-subtle': '#484f58',
-  'header-bg': '#161b22',
-  'header-divider': '#8b949e',
-  'header-logo': '#f0f6fc',
-  'header-search-bg': '#0d1117',
-  'header-search-border': '#30363d',
-  'header-text': 'rgba(240,246,252,0.7)',
-  'input-disabled-bg': 'rgba(110,118,129,0)',
-  'marketing-icon-primary': '#79c0ff',
-  'marketing-icon-secondary': '#1f6feb',
-  'menu-bg-active': '#161b22',
-  'mktg-btn-bg': '#f6f8fa',
-  'mktg-btn-shadow-focus': 'rgb(255 255 255 / 25%) 0 0 0 4px',
-  'mktg-btn-shadow-hover-muted': 'rgb(255 255 255) 0 0 0 2px inset',
-  'mktg-btn-shadow-hover':
-    '0 4px 7px rgba(0, 0, 0, 0.15), 0 100px 80px rgba(255, 255, 255, 0.02), 0 42px 33px rgba(255, 255, 255, 0.024), 0 22px 18px rgba(255, 255, 255, 0.028), 0 12px 10px rgba(255, 255, 255, 0.034), 0 7px 5px rgba(255, 255, 255, 0.04), 0 3px 2px rgba(255, 255, 255, 0.07)',
-  'mktg-btn-shadow-outline': 'rgb(255 255 255 / 25%) 0 0 0 1px inset',
-  'neutral-emphasis-plus': '#6e7681',
-  'neutral-emphasis': '#6e7681',
-  'neutral-muted': 'rgba(110,118,129,0.4)',
-  'neutral-subtle': 'rgba(110,118,129,0.1)',
-  'overlay-shadow': '0 0 0 1px #30363d, 0 16px 32px rgba(1,4,9,0.85)',
-  'page-header-bg': '#0d1117',
-  'prettylights-syntax-brackethighlighter-angle': '#8b949e',
-  'prettylights-syntax-brackethighlighter-unmatched': '#c38000',
-  'prettylights-syntax-carriage-return-bg': '#865401',
-  'prettylights-syntax-carriage-return-text': '#f0f6fc',
-  'prettylights-syntax-comment': '#8b949e',
-  'prettylights-syntax-constant-other-reference-link': '#a5d6ff',
-  'prettylights-syntax-constant': '#79c0ff',
-  'prettylights-syntax-entity-tag': '#83d4ff',
-  'prettylights-syntax-entity': '#d2a8ff',
-  'prettylights-syntax-invalid-illegal-bg': '#633e00',
-  'prettylights-syntax-invalid-illegal-text': '#f0f6fc',
-  'prettylights-syntax-keyword': '#d69a00',
-  'prettylights-syntax-markup-bold': '#c9d1d9',
-  'prettylights-syntax-markup-changed-bg': '#5a1e02',
-  'prettylights-syntax-markup-changed-text': '#ffdfb6',
-  'prettylights-syntax-markup-deleted-bg': '#452f00',
-  'prettylights-syntax-markup-deleted-text': '#f0ec59',
-  'prettylights-syntax-markup-heading': '#1f6feb',
-  'prettylights-syntax-markup-ignored-bg': '#1158c7',
-  'prettylights-syntax-markup-ignored-text': '#c9d1d9',
-  'prettylights-syntax-markup-inserted-bg': '#0a2861',
-  'prettylights-syntax-markup-inserted-text': '#a0e8ff',
-  'prettylights-syntax-markup-italic': '#c9d1d9',
-  'prettylights-syntax-markup-list': '#f2cc60',
-  'prettylights-syntax-meta-diff-range': '#d2a8ff',
-  'prettylights-syntax-storage-modifier-import': '#c9d1d9',
-  'prettylights-syntax-string-regexp': '#83d4ff',
-  'prettylights-syntax-string': '#a5d6ff',
-  'prettylights-syntax-sublimelinter-gutter-mark': '#484f58',
-  'prettylights-syntax-variable': '#ffa657',
-  'primer-border-active': '#F78166',
-  'primer-border-contrast': 'rgba(240,246,252,0.2)',
-  'primer-canvas-backdrop': 'rgba(1,4,9,0.8)',
-  'primer-canvas-sticky': 'rgba(13,17,23,0.95)',
-  'primer-fg-disabled': '#484f58',
-  'primer-shadow-focus': '0 0 0 3px #0c2d6b',
-  'primer-shadow-highlight': '0 0 transparent',
-  'primer-shadow-inset': '0 0 transparent',
-  'project-gradient-in': '#161b22',
-  'project-gradient-out': 'rgba(22,27,34,0)',
-  'project-header-bg': '#0d1117',
-  'project-sidebar-bg': '#161b22',
-  'scale-black': '#010409',
-  'scale-blue-0': '#cae8ff',
-  'scale-blue-1': '#a5d6ff',
-  'scale-blue-2': '#79c0ff',
-  'scale-blue-3': '#58a6ff',
-  'scale-blue-4': '#388bfd',
-  'scale-blue-5': '#1f6feb',
-  'scale-blue-6': '#1158c7',
-  'scale-blue-7': '#0d419d',
-  'scale-blue-8': '#0c2d6b',
-  'scale-blue-9': '#051d4d',
-  'scale-coral-0': '#FFDDD2',
-  'scale-coral-1': '#FFC2B2',
-  'scale-coral-2': '#FFA28B',
-  'scale-coral-3': '#F78166',
-  'scale-coral-4': '#EA6045',
-  'scale-coral-5': '#CF462D',
-  'scale-coral-6': '#AC3220',
-  'scale-coral-7': '#872012',
-  'scale-coral-8': '#640D04',
-  'scale-coral-9': '#460701',
-  'scale-gray-0': '#f0f6fc',
-  'scale-gray-1': '#c9d1d9',
-  'scale-gray-2': '#b1bac4',
-  'scale-gray-3': '#8b949e',
-  'scale-gray-4': '#6e7681',
-  'scale-gray-5': '#484f58',
-  'scale-gray-6': '#30363d',
-  'scale-gray-7': '#21262d',
-  'scale-gray-8': '#161b22',
-  'scale-gray-9': '#0d1117',
-  'scale-green-0': '#a0e8ff',
-  'scale-green-1': '#83d4ff',
-  'scale-green-2': '#66baff',
-  'scale-green-3': '#42a0ff',
-  'scale-green-4': '#1585fd',
-  'scale-green-5': '#1d69e0',
-  'scale-green-6': '#0f53bc',
-  'scale-green-7': '#0b3c92',
-  'scale-green-8': '#0a2861',
-  'scale-green-9': '#041843',
-  'scale-orange-0': '#ffdfb6',
-  'scale-orange-1': '#ffc680',
-  'scale-orange-2': '#ffa657',
-  'scale-orange-3': '#f0883e',
-  'scale-orange-4': '#db6d28',
-  'scale-orange-5': '#bd561d',
-  'scale-orange-6': '#9b4215',
-  'scale-orange-7': '#762d0a',
-  'scale-orange-8': '#5a1e02',
-  'scale-orange-9': '#3d1300',
-  'scale-pink-0': '#ffdaec',
-  'scale-pink-1': '#ffbedd',
-  'scale-pink-2': '#ff9bce',
-  'scale-pink-3': '#f778ba',
-  'scale-pink-4': '#db61a2',
-  'scale-pink-5': '#bf4b8a',
-  'scale-pink-6': '#9e3670',
-  'scale-pink-7': '#7d2457',
-  'scale-pink-8': '#5e103e',
-  'scale-pink-9': '#42062a',
-  'scale-purple-0': '#eddeff',
-  'scale-purple-1': '#e2c5ff',
-  'scale-purple-2': '#d2a8ff',
-  'scale-purple-3': '#bc8cff',
-  'scale-purple-4': '#a371f7',
-  'scale-purple-5': '#8957e5',
-  'scale-purple-6': '#6e40c9',
-  'scale-purple-7': '#553098',
-  'scale-purple-8': '#3c1e70',
-  'scale-purple-9': '#271052',
-  'scale-red-0': '#f0ec59',
-  'scale-red-1': '#ecd334',
-  'scale-red-2': '#e6b716',
-  'scale-red-3': '#d69a00',
-  'scale-red-4': '#c38000',
-  'scale-red-5': '#a66900',
-  'scale-red-6': '#865401',
-  'scale-red-7': '#633e00',
-  'scale-red-8': '#452f00',
-  'scale-red-9': '#292100',
-  'scale-white': '#f0f6fc',
-  'scale-yellow-0': '#f8e3a1',
-  'scale-yellow-1': '#f2cc60',
-  'scale-yellow-2': '#e3b341',
-  'scale-yellow-3': '#d29922',
-  'scale-yellow-4': '#bb8009',
-  'scale-yellow-5': '#9e6a03',
-  'scale-yellow-6': '#845306',
-  'scale-yellow-7': '#693e00',
-  'scale-yellow-8': '#4b2900',
-  'scale-yellow-9': '#341a00',
-  'search-keyword-hl': 'rgba(210,153,34,0.4)',
-  'select-menu-backdrop-border': '#484f58',
-  'select-menu-tap-focus-bg': '#0c2d6b',
-  'select-menu-tap-highlight': 'rgba(48,54,61,0.5)',
-  'severe-emphasis': '#bd561d',
-  'severe-fg': '#db6d28',
-  'severe-muted': 'rgba(219,109,40,0.4)',
-  'severe-subtle': 'rgba(219,109,40,0.15)',
-  'shadow-extra-large': '0 12px 48px #010409',
-  'shadow-large': '0 8px 24px #010409',
-  'shadow-medium': '0 3px 6px #010409',
-  'shadow-small': '0 0 transparent',
-  'sidenav-selected-bg': '#21262d',
-  'sponsors-emphasis': '#bf4b8a',
-  'sponsors-fg': '#db61a2',
-  'sponsors-muted': 'rgba(219,97,162,0.4)',
-  'sponsors-subtle': 'rgba(219,97,162,0.15)',
-  'success-emphasis': '#1d69e0',
-  'success-fg': '#42a0ff',
-  'success-muted': 'rgba(21,133,253,0.4)',
-  'success-subtle': 'rgba(21,133,253,0.15)',
-  'timeline-badge-bg': '#21262d',
-  'topic-tag-border': 'rgba(0,0,0,0)',
-  'underlinenav-border-hover': 'rgba(110,118,129,0.4)',
-  'underlinenav-icon': '#484f58',
-);
diff --git a/src/styles/themes/darkDimmed.scss b/src/styles/themes/darkDimmed.scss
deleted file mode 100644
index 1d0a300..0000000
--- a/src/styles/themes/darkDimmed.scss
+++ /dev/null
@@ -1,418 +0,0 @@
-$variables: (
-  'accent-emphasis': '#316dca',
-  'accent-fg': '#539bf5',
-  'accent-muted': 'rgba(65,132,228,0.4)',
-  'accent-subtle': 'rgba(65,132,228,0.15)',
-  'action-list-item-danger-active-bg': 'rgba(229,83,75,0.24)',
-  'action-list-item-danger-hover-bg': 'rgba(229,83,75,0.16)',
-  'action-list-item-danger-hover-text': '#f47067',
-  'action-list-item-default-active-bg': 'rgba(144,157,171,0.2)',
-  'action-list-item-default-hover-bg': 'rgba(144,157,171,0.12)',
-  'action-list-item-default-selected-bg': 'rgba(144,157,171,0.08)',
-  'action-list-item-inline-divider': 'rgba(68,76,86,0.48)',
-  'ansi-black-bright': '#636e7b',
-  'ansi-black': '#545d68',
-  'ansi-blue-bright': '#6cb6ff',
-  'ansi-blue': '#539bf5',
-  'ansi-cyan-bright': '#56d4dd',
-  'ansi-cyan': '#39c5cf',
-  'ansi-gray': '#636e7b',
-  'ansi-green-bright': '#6bc46d',
-  'ansi-green': '#57ab5a',
-  'ansi-magenta-bright': '#dcbdfb',
-  'ansi-magenta': '#b083f0',
-  'ansi-red-bright': '#ff938a',
-  'ansi-red': '#f47067',
-  'ansi-white-bright': '#cdd9e5',
-  'ansi-white': '#909dab',
-  'ansi-yellow-bright': '#daaa3f',
-  'ansi-yellow': '#c69026',
-  'attention-emphasis': '#966600',
-  'attention-fg': '#c69026',
-  'attention-muted': 'rgba(174,124,20,0.4)',
-  'attention-subtle': 'rgba(174,124,20,0.15)',
-  'avatar-bg': 'rgba(205,217,229,0.1)',
-  'avatar-border': 'rgba(205,217,229,0.1)',
-  'avatar-child-shadow': '-2px -2px 0 #22272e',
-  'avatar-stack-fade-more': '#373e47',
-  'avatar-stack-fade': '#444c56',
-  'border-default': '#444c56',
-  'border-muted': '#373e47',
-  'border-subtle': 'rgba(205,217,229,0.1)',
-  'btn-active-bg': 'hsla(213,12%,27%,1)',
-  'btn-active-border': '#636e7b',
-  'btn-bg': '#373e47',
-  'btn-border': 'rgba(205,217,229,0.1)',
-  'btn-counter-bg': '#444c56',
-  'btn-danger-counter-bg': 'rgba(201,60,55,0.1)',
-  'btn-danger-disabled-bg': '#22272e',
-  'btn-danger-disabled-counter-bg': 'rgba(201,60,55,0.05)',
-  'btn-danger-disabled-text': 'rgba(229,83,75,0.5)',
-  'btn-danger-focus-border': '#e5534b',
-  'btn-danger-focus-shadow': '0 0 0 3px rgba(229,83,75,0.4)',
-  'btn-danger-hover-bg': '#c93c37',
-  'btn-danger-hover-border': '#e5534b',
-  'btn-danger-hover-counter-bg': 'rgba(255,255,255,0.2)',
-  'btn-danger-hover-icon': '#cdd9e5',
-  'btn-danger-hover-inset-shadow': '0 0 transparent',
-  'btn-danger-hover-shadow': '0 0 transparent',
-  'btn-danger-hover-text': '#cdd9e5',
-  'btn-danger-icon': '#e5534b',
-  'btn-danger-selected-bg': '#ad2e2c',
-  'btn-danger-selected-border': '#f47067',
-  'btn-danger-selected-shadow': '0 0 transparent',
-  'btn-danger-selected-text': '#ffffff',
-  'btn-danger-text': '#e5534b',
-  'btn-focus-bg': '#373e47',
-  'btn-focus-border': '#768390',
-  'btn-focus-shadow': '0 0 0 3px rgba(118,131,144,0.3)',
-  'btn-hover-bg': '#444c56',
-  'btn-hover-border': '#768390',
-  'btn-inset-shadow': '0 0 transparent',
-  'btn-outline-counter-bg': 'rgba(49,109,202,0.1)',
-  'btn-outline-disabled-bg': '#22272e',
-  'btn-outline-disabled-counter-bg': 'rgba(49,109,202,0.05)',
-  'btn-outline-disabled-text': 'rgba(83,155,245,0.5)',
-  'btn-outline-focus-border': 'rgba(205,217,229,0.1)',
-  'btn-outline-focus-shadow': '0 0 0 3px rgba(37,90,178,0.4)',
-  'btn-outline-hover-bg': '#444c56',
-  'btn-outline-hover-border': 'rgba(205,217,229,0.1)',
-  'btn-outline-hover-counter-bg': 'rgba(205,217,229,0.2)',
-  'btn-outline-hover-inset-shadow': 'inset 0 1px 0 rgba(205,217,229,0.03)',
-  'btn-outline-hover-shadow': '0 1px 0 rgba(28,33,40,0.1)',
-  'btn-outline-hover-text': '#539bf5',
-  'btn-outline-selected-bg': '#1b4b91',
-  'btn-outline-selected-border': 'rgba(205,217,229,0.1)',
-  'btn-outline-selected-shadow': '0 0 transparent',
-  'btn-outline-selected-text': '#cdd9e5',
-  'btn-outline-text': '#539bf5',
-  'btn-primary-bg': '#347d39',
-  'btn-primary-border': 'rgba(205,217,229,0.1)',
-  'btn-primary-counter-bg': 'rgba(205,217,229,0.2)',
-  'btn-primary-disabled-bg': 'rgba(52,125,57,0.6)',
-  'btn-primary-disabled-border': 'rgba(205,217,229,0.1)',
-  'btn-primary-disabled-text': 'rgba(205,217,229,0.5)',
-  'btn-primary-focus-bg': '#347d39',
-  'btn-primary-focus-border': 'rgba(205,217,229,0.1)',
-  'btn-primary-focus-shadow': '0 0 0 3px rgba(46,164,79,0.4)',
-  'btn-primary-hover-bg': '#46954a',
-  'btn-primary-hover-border': 'rgba(205,217,229,0.1)',
-  'btn-primary-icon': '#cdd9e5',
-  'btn-primary-inset-shadow': '0 0 transparent',
-  'btn-primary-selected-bg': '#347d39',
-  'btn-primary-selected-shadow': '0 0 transparent',
-  'btn-primary-shadow': '0 0 transparent',
-  'btn-primary-text': '#ffffff',
-  'btn-selected-bg': '#2d333b',
-  'btn-shadow-active': 'inset 0 0.15em 0.3em rgba(28,33,40,0.15)',
-  'btn-shadow-input-focus': '0 0 0 0.2em rgba(49,109,202,0.3)',
-  'btn-shadow': '0 0 transparent',
-  'btn-text': '#adbac7',
-  'canvas-default-transparent': 'rgba(34,39,46,0)',
-  'canvas-default': '#22272e',
-  'canvas-inset': '#1c2128',
-  'canvas-overlay': '#2d333b',
-  'canvas-subtle': '#2d333b',
-  'checks-ansi-black-bright': '#2d333b',
-  'checks-ansi-black': '#22272e',
-  'checks-ansi-blue-bright': '#6cb6ff',
-  'checks-ansi-blue': '#539bf5',
-  'checks-ansi-cyan-bright': '#b3f0ff',
-  'checks-ansi-cyan': '#76e3ea',
-  'checks-ansi-gray': '#636e7b',
-  'checks-ansi-green-bright': '#6bc46d',
-  'checks-ansi-green': '#57ab5a',
-  'checks-ansi-magenta-bright': '#dcbdfb',
-  'checks-ansi-magenta': '#b083f0',
-  'checks-ansi-red-bright': '#ff938a',
-  'checks-ansi-red': '#f47067',
-  'checks-ansi-white-bright': '#909dab',
-  'checks-ansi-white': '#909dab',
-  'checks-ansi-yellow-bright': '#daaa3f',
-  'checks-ansi-yellow': '#c69026',
-  'checks-bg': '#1c2128',
-  'checks-btn-hover-bg': 'rgba(99,110,123,0.1)',
-  'checks-btn-hover-icon': '#adbac7',
-  'checks-btn-icon': '#768390',
-  'checks-container-border-width': '1px',
-  'checks-donut-error': '#e5534b',
-  'checks-donut-neutral': '#768390',
-  'checks-donut-pending': '#c69026',
-  'checks-donut-success': '#46954a',
-  'checks-dropdown-bg': '#2d333b',
-  'checks-dropdown-border': '#444c56',
-  'checks-dropdown-btn-hover-bg': 'rgba(99,110,123,0.1)',
-  'checks-dropdown-btn-hover-text': '#adbac7',
-  'checks-dropdown-hover-bg': 'rgba(99,110,123,0.1)',
-  'checks-dropdown-hover-text': '#adbac7',
-  'checks-dropdown-shadow': 'rgba(28,33,40,0.3)',
-  'checks-dropdown-text': '#adbac7',
-  'checks-gate-bg': 'rgba(174,124,20,0.15)',
-  'checks-gate-text': '#768390',
-  'checks-gate-waiting-text': '#c69026',
-  'checks-header-border': '#373e47',
-  'checks-header-icon': '#768390',
-  'checks-header-label-open-text': '#adbac7',
-  'checks-header-label-text': '#768390',
-  'checks-input-bg': '#2d333b',
-  'checks-input-focus-text': '#adbac7',
-  'checks-input-placeholder-text': '#545d68',
-  'checks-input-shadow': '0 0 0 1px (obj) => get_1.default(obj, path)',
-  'checks-input-text': '#768390',
-  'checks-line-dt-fm-bg': '#966600',
-  'checks-line-dt-fm-text': '#cdd9e5',
-  'checks-line-hover-bg': 'rgba(99,110,123,0.1)',
-  'checks-line-num-text': '#545d68',
-  'checks-line-selected-bg': 'rgba(65,132,228,0.15)',
-  'checks-line-selected-num-text': '#539bf5',
-  'checks-line-text': '#768390',
-  'checks-line-timestamp-text': '#545d68',
-  'checks-logline-command-text': '#539bf5',
-  'checks-logline-debug-text': '#986ee2',
-  'checks-logline-error-bg': 'rgba(229,83,75,0.15)',
-  'checks-logline-error-num-text': '#545d68',
-  'checks-logline-error-text': '#768390',
-  'checks-logline-num-text': '#545d68',
-  'checks-logline-section-text': '#57ab5a',
-  'checks-logline-text': '#768390',
-  'checks-logline-warning-bg': 'rgba(174,124,20,0.15)',
-  'checks-logline-warning-num-text': '#c69026',
-  'checks-logline-warning-text': '#768390',
-  'checks-run-border-width': '1px',
-  'checks-scrollbar-thumb-bg': 'rgba(99,110,123,0.4)',
-  'checks-step-error-text': '#e5534b',
-  'checks-step-header-open-bg': '#2d333b',
-  'checks-step-warning-text': '#c69026',
-  'checks-text-link': '#539bf5',
-  'checks-text-primary': '#adbac7',
-  'checks-text-secondary': '#768390',
-  'codemirror-activeline-bg': 'rgba(99,110,123,0.1)',
-  'codemirror-bg': '#22272e',
-  'codemirror-cursor': '#adbac7',
-  'codemirror-guttermarker-subtle-text': '#545d68',
-  'codemirror-guttermarker-text': '#22272e',
-  'codemirror-gutters-bg': '#22272e',
-  'codemirror-linenumber-text': '#768390',
-  'codemirror-lines-bg': '#22272e',
-  'codemirror-matchingbracket-text': '#adbac7',
-  'codemirror-selection-bg': 'rgba(65,132,228,0.4)',
-  'codemirror-syntax-comment': '#768390',
-  'codemirror-syntax-constant': '#6cb6ff',
-  'codemirror-syntax-entity': '#dcbdfb',
-  'codemirror-syntax-keyword': '#f47067',
-  'codemirror-syntax-storage': '#f47067',
-  'codemirror-syntax-string': '#96d0ff',
-  'codemirror-syntax-support': '#6cb6ff',
-  'codemirror-syntax-variable': '#f69d50',
-  'codemirror-text': '#adbac7',
-  'counter-border': 'rgba(0,0,0,0)',
-  'danger-emphasis': '#c93c37',
-  'danger-fg': '#e5534b',
-  'danger-muted': 'rgba(229,83,75,0.4)',
-  'danger-subtle': 'rgba(229,83,75,0.15)',
-  'diff-blob-addition-fg': '#adbac7',
-  'diff-blob-addition-line-bg': 'rgba(70,149,74,0.15)',
-  'diff-blob-addition-num-bg': 'rgba(87,171,90,0.3)',
-  'diff-blob-addition-num-text': '#adbac7',
-  'diff-blob-addition-word-bg': 'rgba(70,149,74,0.4)',
-  'diff-blob-deletion-fg': '#adbac7',
-  'diff-blob-deletion-line-bg': 'rgba(229,83,75,0.15)',
-  'diff-blob-deletion-num-bg': 'rgba(229,83,75,0.3)',
-  'diff-blob-deletion-num-text': '#adbac7',
-  'diff-blob-deletion-word-bg': 'rgba(229,83,75,0.4)',
-  'diff-blob-expander-icon': '#768390',
-  'diff-blob-hunk-num-bg': 'rgba(65,132,228,0.4)',
-  'diff-blob-selected-line-highlight-mix-blend-mode': 'screen',
-  'diffstat-addition-bg': '#57ab5a',
-  'diffstat-addition-border': 'rgba(205,217,229,0.1)',
-  'diffstat-deletion-border': 'rgba(205,217,229,0.1)',
-  'done-emphasis': '#8256d0',
-  'done-fg': '#986ee2',
-  'done-muted': 'rgba(152,110,226,0.4)',
-  'done-subtle': 'rgba(152,110,226,0.15)',
-  'fg-default': '#adbac7',
-  'fg-muted': '#768390',
-  'fg-on-emphasis': '#cdd9e5',
-  'fg-subtle': '#545d68',
-  'header-bg': '#2d333b',
-  'header-divider': '#768390',
-  'header-logo': '#cdd9e5',
-  'header-search-bg': '#22272e',
-  'header-search-border': '#444c56',
-  'header-text': 'rgba(205,217,229,0.7)',
-  'input-disabled-bg': 'rgba(99,110,123,0)',
-  'marketing-icon-primary': '#6cb6ff',
-  'marketing-icon-secondary': '#316dca',
-  'menu-bg-active': '#2d333b',
-  'mktg-btn-bg': '#f6f8fa',
-  'mktg-btn-shadow-focus': 'rgb(255 255 255 / 25%) 0 0 0 4px',
-  'mktg-btn-shadow-hover-muted': 'rgb(255 255 255) 0 0 0 2px inset',
-  'mktg-btn-shadow-hover':
-    '0 4px 7px rgba(0, 0, 0, 0.15), 0 100px 80px rgba(255, 255, 255, 0.02), 0 42px 33px rgba(255, 255, 255, 0.024), 0 22px 18px rgba(255, 255, 255, 0.028), 0 12px 10px rgba(255, 255, 255, 0.034), 0 7px 5px rgba(255, 255, 255, 0.04), 0 3px 2px rgba(255, 255, 255, 0.07)',
-  'mktg-btn-shadow-outline': 'rgb(255 255 255 / 25%) 0 0 0 1px inset',
-  'neutral-emphasis-plus': '#636e7b',
-  'neutral-emphasis': '#636e7b',
-  'neutral-muted': 'rgba(99,110,123,0.4)',
-  'neutral-subtle': 'rgba(99,110,123,0.1)',
-  'overlay-shadow': '0 0 0 1px #444c56, 0 16px 32px rgba(28,33,40,0.85)',
-  'page-header-bg': '#22272e',
-  'prettylights-syntax-brackethighlighter-angle': '#768390',
-  'prettylights-syntax-brackethighlighter-unmatched': '#e5534b',
-  'prettylights-syntax-carriage-return-bg': '#ad2e2c',
-  'prettylights-syntax-carriage-return-text': '#cdd9e5',
-  'prettylights-syntax-comment': '#768390',
-  'prettylights-syntax-constant-other-reference-link': '#96d0ff',
-  'prettylights-syntax-constant': '#6cb6ff',
-  'prettylights-syntax-entity-tag': '#8ddb8c',
-  'prettylights-syntax-entity': '#dcbdfb',
-  'prettylights-syntax-invalid-illegal-bg': '#922323',
-  'prettylights-syntax-invalid-illegal-text': '#cdd9e5',
-  'prettylights-syntax-keyword': '#f47067',
-  'prettylights-syntax-markup-bold': '#adbac7',
-  'prettylights-syntax-markup-changed-bg': '#682d0f',
-  'prettylights-syntax-markup-changed-text': '#ffddb0',
-  'prettylights-syntax-markup-deleted-bg': '#78191b',
-  'prettylights-syntax-markup-deleted-text': '#ffd8d3',
-  'prettylights-syntax-markup-heading': '#316dca',
-  'prettylights-syntax-markup-ignored-bg': '#255ab2',
-  'prettylights-syntax-markup-ignored-text': '#adbac7',
-  'prettylights-syntax-markup-inserted-bg': '#1b4721',
-  'prettylights-syntax-markup-inserted-text': '#b4f1b4',
-  'prettylights-syntax-markup-italic': '#adbac7',
-  'prettylights-syntax-markup-list': '#eac55f',
-  'prettylights-syntax-meta-diff-range': '#dcbdfb',
-  'prettylights-syntax-storage-modifier-import': '#adbac7',
-  'prettylights-syntax-string-regexp': '#8ddb8c',
-  'prettylights-syntax-string': '#96d0ff',
-  'prettylights-syntax-sublimelinter-gutter-mark': '#545d68',
-  'prettylights-syntax-variable': '#f69d50',
-  'primer-border-active': '#EC775C',
-  'primer-border-contrast': 'rgba(205,217,229,0.2)',
-  'primer-canvas-backdrop': 'rgba(28,33,40,0.8)',
-  'primer-canvas-sticky': 'rgba(34,39,46,0.95)',
-  'primer-fg-disabled': '#545d68',
-  'primer-shadow-focus': '0 0 0 3px #143d79',
-  'primer-shadow-highlight': '0 0 transparent',
-  'primer-shadow-inset': '0 0 transparent',
-  'project-gradient-in': '#2d333b',
-  'project-gradient-out': 'rgba(45,51,59,0)',
-  'project-header-bg': '#22272e',
-  'project-sidebar-bg': '#2d333b',
-  'scale-black': '#1c2128',
-  'scale-blue-0': '#c6e6ff',
-  'scale-blue-1': '#96d0ff',
-  'scale-blue-2': '#6cb6ff',
-  'scale-blue-3': '#539bf5',
-  'scale-blue-4': '#4184e4',
-  'scale-blue-5': '#316dca',
-  'scale-blue-6': '#255ab2',
-  'scale-blue-7': '#1b4b91',
-  'scale-blue-8': '#143d79',
-  'scale-blue-9': '#0f2d5c',
-  'scale-coral-0': '#FFDACF',
-  'scale-coral-1': '#FFB9A5',
-  'scale-coral-2': '#F79981',
-  'scale-coral-3': '#EC775C',
-  'scale-coral-4': '#DE5B41',
-  'scale-coral-5': '#C2442D',
-  'scale-coral-6': '#A93524',
-  'scale-coral-7': '#8D291B',
-  'scale-coral-8': '#771D13',
-  'scale-coral-9': '#5D1008',
-  'scale-gray-0': '#cdd9e5',
-  'scale-gray-1': '#adbac7',
-  'scale-gray-2': '#909dab',
-  'scale-gray-3': '#768390',
-  'scale-gray-4': '#636e7b',
-  'scale-gray-5': '#545d68',
-  'scale-gray-6': '#444c56',
-  'scale-gray-7': '#373e47',
-  'scale-gray-8': '#2d333b',
-  'scale-gray-9': '#22272e',
-  'scale-green-0': '#b4f1b4',
-  'scale-green-1': '#8ddb8c',
-  'scale-green-2': '#6bc46d',
-  'scale-green-3': '#57ab5a',
-  'scale-green-4': '#46954a',
-  'scale-green-5': '#347d39',
-  'scale-green-6': '#2b6a30',
-  'scale-green-7': '#245829',
-  'scale-green-8': '#1b4721',
-  'scale-green-9': '#113417',
-  'scale-orange-0': '#ffddb0',
-  'scale-orange-1': '#ffbc6f',
-  'scale-orange-2': '#f69d50',
-  'scale-orange-3': '#e0823d',
-  'scale-orange-4': '#cc6b2c',
-  'scale-orange-5': '#ae5622',
-  'scale-orange-6': '#94471b',
-  'scale-orange-7': '#7f3913',
-  'scale-orange-8': '#682d0f',
-  'scale-orange-9': '#4d210c',
-  'scale-pink-0': '#ffd7eb',
-  'scale-pink-1': '#ffb3d8',
-  'scale-pink-2': '#fc8dc7',
-  'scale-pink-3': '#e275ad',
-  'scale-pink-4': '#c96198',
-  'scale-pink-5': '#ae4c82',
-  'scale-pink-6': '#983b6e',
-  'scale-pink-7': '#7e325a',
-  'scale-pink-8': '#69264a',
-  'scale-pink-9': '#551639',
-  'scale-purple-0': '#eedcff',
-  'scale-purple-1': '#dcbdfb',
-  'scale-purple-2': '#dcbdfb',
-  'scale-purple-3': '#b083f0',
-  'scale-purple-4': '#986ee2',
-  'scale-purple-5': '#8256d0',
-  'scale-purple-6': '#6b44bc',
-  'scale-purple-7': '#5936a2',
-  'scale-purple-8': '#472c82',
-  'scale-purple-9': '#352160',
-  'scale-red-0': '#ffd8d3',
-  'scale-red-1': '#ffb8b0',
-  'scale-red-2': '#ff938a',
-  'scale-red-3': '#f47067',
-  'scale-red-4': '#e5534b',
-  'scale-red-5': '#c93c37',
-  'scale-red-6': '#ad2e2c',
-  'scale-red-7': '#922323',
-  'scale-red-8': '#78191b',
-  'scale-red-9': '#5D0F12',
-  'scale-white': '#cdd9e5',
-  'scale-yellow-0': '#fbe090',
-  'scale-yellow-1': '#eac55f',
-  'scale-yellow-2': '#daaa3f',
-  'scale-yellow-3': '#c69026',
-  'scale-yellow-4': '#ae7c14',
-  'scale-yellow-5': '#966600',
-  'scale-yellow-6': '#805400',
-  'scale-yellow-7': '#6c4400',
-  'scale-yellow-8': '#593600',
-  'scale-yellow-9': '#452700',
-  'search-keyword-hl': 'rgba(198,144,38,0.4)',
-  'select-menu-backdrop-border': '#545d68',
-  'select-menu-tap-focus-bg': '#143d79',
-  'select-menu-tap-highlight': 'rgba(68,76,86,0.5)',
-  'severe-emphasis': '#ae5622',
-  'severe-fg': '#cc6b2c',
-  'severe-muted': 'rgba(204,107,44,0.4)',
-  'severe-subtle': 'rgba(204,107,44,0.15)',
-  'shadow-extra-large': '0 12px 48px #1c2128',
-  'shadow-large': '0 8px 24px #1c2128',
-  'shadow-medium': '0 3px 6px #1c2128',
-  'shadow-small': '0 0 transparent',
-  'sidenav-selected-bg': '#373e47',
-  'sponsors-emphasis': '#ae4c82',
-  'sponsors-fg': '#c96198',
-  'sponsors-muted': 'rgba(201,97,152,0.4)',
-  'sponsors-subtle': 'rgba(201,97,152,0.15)',
-  'success-emphasis': '#347d39',
-  'success-fg': '#57ab5a',
-  'success-muted': 'rgba(70,149,74,0.4)',
-  'success-subtle': 'rgba(70,149,74,0.15)',
-  'timeline-badge-bg': '#373e47',
-  'topic-tag-border': 'rgba(0,0,0,0)',
-  'underlinenav-border-hover': 'rgba(99,110,123,0.4)',
-  'underlinenav-icon': '#545d68',
-);
diff --git a/src/styles/themes/darkHighContrast.scss b/src/styles/themes/darkHighContrast.scss
deleted file mode 100644
index eb3f09b..0000000
--- a/src/styles/themes/darkHighContrast.scss
+++ /dev/null
@@ -1,418 +0,0 @@
-$variables: (
-  'accent-emphasis': '#409eff',
-  'accent-fg': '#71b7ff',
-  'accent-muted': '#409eff',
-  'accent-subtle': 'rgba(64,158,255,0.15)',
-  'action-list-item-danger-active-bg': '#ff4445',
-  'action-list-item-danger-hover-bg': '#ff6a69',
-  'action-list-item-danger-hover-text': '#0a0c10',
-  'action-list-item-default-active-bg': 'rgba(217,222,227,0.24)',
-  'action-list-item-default-hover-bg': 'rgba(217,222,227,0.12)',
-  'action-list-item-default-selected-bg': 'rgba(217,222,227,0.08)',
-  'action-list-item-inline-divider': '#7a828e',
-  'ansi-black-bright': '#9ea7b3',
-  'ansi-black': '#7a828e',
-  'ansi-blue-bright': '#91cbff',
-  'ansi-blue': '#71b7ff',
-  'ansi-cyan-bright': '#56d4dd',
-  'ansi-cyan': '#39c5cf',
-  'ansi-gray': '#9ea7b3',
-  'ansi-green-bright': '#4ae168',
-  'ansi-green': '#26cd4d',
-  'ansi-magenta-bright': '#dbb7ff',
-  'ansi-magenta': '#cb9eff',
-  'ansi-red-bright': '#ffb1af',
-  'ansi-red': '#ff9492',
-  'ansi-white-bright': '#ffffff',
-  'ansi-white': '#d9dee3',
-  'ansi-yellow-bright': '#f7c843',
-  'ansi-yellow': '#f0b72f',
-  'attention-emphasis': '#e09b13',
-  'attention-fg': '#f0b72f',
-  'attention-muted': '#e09b13',
-  'attention-subtle': 'rgba(224,155,19,0.15)',
-  'avatar-bg': 'rgba(255,255,255,0.1)',
-  'avatar-border': 'rgba(255,255,255,0.9)',
-  'avatar-child-shadow': '-2px -2px 0 #0a0c10',
-  'avatar-stack-fade-more': '#272b33',
-  'avatar-stack-fade': '#525964',
-  'border-default': '#7a828e',
-  'border-muted': '#7a828e',
-  'border-subtle': '#7a828e',
-  'btn-active-bg': 'hsla(217,10%,33%,1)',
-  'btn-active-border': '#9ea7b3',
-  'btn-bg': '#272b33',
-  'btn-border': '#7a828e',
-  'btn-counter-bg': '#525964',
-  'btn-danger-counter-bg': 'rgba(1,4,9,0.15)',
-  'btn-danger-disabled-bg': '#0a0c10',
-  'btn-danger-disabled-counter-bg': 'rgba(255,106,105,0.05)',
-  'btn-danger-disabled-text': 'rgba(255,106,105,0.5)',
-  'btn-danger-focus-border': '#ff6a69',
-  'btn-danger-focus-shadow': '0 0 0 3px rgba(255,106,105,0.4)',
-  'btn-danger-hover-bg': '#ff6a69',
-  'btn-danger-hover-border': '#ff6a69',
-  'btn-danger-hover-counter-bg': 'rgba(1,4,9,0.15)',
-  'btn-danger-hover-icon': '#0a0c10',
-  'btn-danger-hover-inset-shadow': '0 0 transparent',
-  'btn-danger-hover-shadow': '0 0 transparent',
-  'btn-danger-hover-text': '#0a0c10',
-  'btn-danger-icon': '#ff6a69',
-  'btn-danger-selected-bg': '#ff4445',
-  'btn-danger-selected-border': '#ff9492',
-  'btn-danger-selected-shadow': '0 0 transparent',
-  'btn-danger-selected-text': '#ffffff',
-  'btn-danger-text': '#ff6a69',
-  'btn-focus-bg': '#272b33',
-  'btn-focus-border': '#bdc4cc',
-  'btn-focus-shadow': '0 0 0 3px rgba(189,196,204,0.3)',
-  'btn-hover-bg': '#525964',
-  'btn-hover-border': '#bdc4cc',
-  'btn-inset-shadow': '0 0 transparent',
-  'btn-outline-counter-bg': 'rgba(64,158,255,0.1)',
-  'btn-outline-disabled-bg': '#0a0c10',
-  'btn-outline-disabled-counter-bg': 'rgba(64,158,255,0.05)',
-  'btn-outline-disabled-text': 'rgba(113,183,255,0.5)',
-  'btn-outline-focus-border': '#7a828e',
-  'btn-outline-focus-shadow': '0 0 0 3px rgba(49,139,248,0.4)',
-  'btn-outline-hover-bg': '#525964',
-  'btn-outline-hover-border': '#7a828e',
-  'btn-outline-hover-counter-bg': 'rgba(255,255,255,0.2)',
-  'btn-outline-hover-inset-shadow': 'inset 0 1px 0 rgba(255,255,255,0.03)',
-  'btn-outline-hover-shadow': '0 1px 0 rgba(1,4,9,0.1)',
-  'btn-outline-hover-text': '#71b7ff',
-  'btn-outline-selected-bg': '#2672f3',
-  'btn-outline-selected-border': '#7a828e',
-  'btn-outline-selected-shadow': '0 0 transparent',
-  'btn-outline-selected-text': '#ffffff',
-  'btn-outline-text': '#71b7ff',
-  'btn-primary-bg': '#09b43a',
-  'btn-primary-border': '#4ae168',
-  'btn-primary-counter-bg': 'rgba(1,4,9,0.15)',
-  'btn-primary-disabled-bg': 'rgba(9,180,58,0.6)',
-  'btn-primary-disabled-border': 'rgba(74,225,104,0.4)',
-  'btn-primary-disabled-text': 'rgba(10,12,16,0.5)',
-  'btn-primary-focus-bg': '#09b43a',
-  'btn-primary-focus-border': '#7a828e',
-  'btn-primary-focus-shadow': '0 0 0 3px rgba(46,164,79,0.4)',
-  'btn-primary-hover-bg': '#26cd4d',
-  'btn-primary-hover-border': '#4ae168',
-  'btn-primary-icon': '#0a0c10',
-  'btn-primary-inset-shadow': '0 0 transparent',
-  'btn-primary-selected-bg': '#09b43a',
-  'btn-primary-selected-shadow': '0 0 transparent',
-  'btn-primary-shadow': '0 0 transparent',
-  'btn-primary-text': '#0a0c10',
-  'btn-selected-bg': 'rgba(82,89,100,0.9)',
-  'btn-shadow-active': 'inset 0 0.15em 0.3em rgba(1,4,9,0.15)',
-  'btn-shadow-input-focus': '0 0 0 0.2em rgba(64,158,255,0.3)',
-  'btn-shadow': '0 0 transparent',
-  'btn-text': '#f0f3f6',
-  'canvas-default-transparent': 'rgba(10,12,16,0)',
-  'canvas-default': '#0a0c10',
-  'canvas-inset': '#010409',
-  'canvas-overlay': '#272b33',
-  'canvas-subtle': '#272b33',
-  'checks-ansi-black-bright': '#272b33',
-  'checks-ansi-black': '#0a0c10',
-  'checks-ansi-blue-bright': '#91cbff',
-  'checks-ansi-blue': '#71b7ff',
-  'checks-ansi-cyan-bright': '#b3f0ff',
-  'checks-ansi-cyan': '#76e3ea',
-  'checks-ansi-gray': '#9ea7b3',
-  'checks-ansi-green-bright': '#4ae168',
-  'checks-ansi-green': '#26cd4d',
-  'checks-ansi-magenta-bright': '#dbb7ff',
-  'checks-ansi-magenta': '#cb9eff',
-  'checks-ansi-red-bright': '#ffb1af',
-  'checks-ansi-red': '#ff9492',
-  'checks-ansi-white-bright': '#d9dee3',
-  'checks-ansi-white': '#d9dee3',
-  'checks-ansi-yellow-bright': '#f7c843',
-  'checks-ansi-yellow': '#f0b72f',
-  'checks-bg': '#010409',
-  'checks-btn-hover-bg': 'rgba(158,167,179,0.1)',
-  'checks-btn-hover-icon': '#f0f3f6',
-  'checks-btn-icon': '#f0f3f6',
-  'checks-container-border-width': '1px',
-  'checks-donut-error': '#ff6a69',
-  'checks-donut-neutral': '#bdc4cc',
-  'checks-donut-pending': '#f0b72f',
-  'checks-donut-success': '#09b43a',
-  'checks-dropdown-bg': '#272b33',
-  'checks-dropdown-border': '#7a828e',
-  'checks-dropdown-btn-hover-bg': 'rgba(158,167,179,0.1)',
-  'checks-dropdown-btn-hover-text': '#f0f3f6',
-  'checks-dropdown-hover-bg': 'rgba(158,167,179,0.1)',
-  'checks-dropdown-hover-text': '#f0f3f6',
-  'checks-dropdown-shadow': 'rgba(1,4,9,0.3)',
-  'checks-dropdown-text': '#f0f3f6',
-  'checks-gate-bg': 'rgba(224,155,19,0.15)',
-  'checks-gate-text': '#f0f3f6',
-  'checks-gate-waiting-text': '#f0b72f',
-  'checks-header-border': '#7a828e',
-  'checks-header-icon': '#f0f3f6',
-  'checks-header-label-open-text': '#f0f3f6',
-  'checks-header-label-text': '#f0f3f6',
-  'checks-input-bg': '#272b33',
-  'checks-input-focus-text': '#f0f3f6',
-  'checks-input-placeholder-text': '#7a828e',
-  'checks-input-shadow': '0 0 0 1px (obj) => get_1.default(obj, path)',
-  'checks-input-text': '#f0f3f6',
-  'checks-line-dt-fm-bg': '#e09b13',
-  'checks-line-dt-fm-text': '#0a0c10',
-  'checks-line-hover-bg': 'rgba(158,167,179,0.1)',
-  'checks-line-num-text': '#7a828e',
-  'checks-line-selected-bg': 'rgba(64,158,255,0.15)',
-  'checks-line-selected-num-text': '#71b7ff',
-  'checks-line-text': '#f0f3f6',
-  'checks-line-timestamp-text': '#7a828e',
-  'checks-logline-command-text': '#71b7ff',
-  'checks-logline-debug-text': '#b780ff',
-  'checks-logline-error-bg': 'rgba(255,106,105,0.15)',
-  'checks-logline-error-num-text': '#7a828e',
-  'checks-logline-error-text': '#f0f3f6',
-  'checks-logline-num-text': '#7a828e',
-  'checks-logline-section-text': '#26cd4d',
-  'checks-logline-text': '#f0f3f6',
-  'checks-logline-warning-bg': 'rgba(224,155,19,0.15)',
-  'checks-logline-warning-num-text': '#f0b72f',
-  'checks-logline-warning-text': '#f0f3f6',
-  'checks-run-border-width': '1px',
-  'checks-scrollbar-thumb-bg': 'rgba(158,167,179,0.4)',
-  'checks-step-error-text': '#ff6a69',
-  'checks-step-header-open-bg': '#272b33',
-  'checks-step-warning-text': '#f0b72f',
-  'checks-text-link': '#71b7ff',
-  'checks-text-primary': '#f0f3f6',
-  'checks-text-secondary': '#f0f3f6',
-  'codemirror-activeline-bg': 'rgba(158,167,179,0.1)',
-  'codemirror-bg': '#0a0c10',
-  'codemirror-cursor': '#f0f3f6',
-  'codemirror-guttermarker-subtle-text': '#7a828e',
-  'codemirror-guttermarker-text': '#0a0c10',
-  'codemirror-gutters-bg': '#0a0c10',
-  'codemirror-linenumber-text': '#f0f3f6',
-  'codemirror-lines-bg': '#0a0c10',
-  'codemirror-matchingbracket-text': '#f0f3f6',
-  'codemirror-selection-bg': 'rgba(64,158,255,0.4)',
-  'codemirror-syntax-comment': '#bdc4cc',
-  'codemirror-syntax-constant': '#91cbff',
-  'codemirror-syntax-entity': '#dbb7ff',
-  'codemirror-syntax-keyword': '#ff9492',
-  'codemirror-syntax-storage': '#ff9492',
-  'codemirror-syntax-string': '#addcff',
-  'codemirror-syntax-support': '#91cbff',
-  'codemirror-syntax-variable': '#ffb757',
-  'codemirror-text': '#f0f3f6',
-  'counter-border': 'rgba(0,0,0,0)',
-  'danger-emphasis': '#ff6a69',
-  'danger-fg': '#ff6a69',
-  'danger-muted': '#ff6a69',
-  'danger-subtle': 'rgba(255,106,105,0.15)',
-  'diff-blob-addition-fg': '#0a0c10',
-  'diff-blob-addition-line-bg': 'rgba(9,180,58,0.15)',
-  'diff-blob-addition-num-bg': 'rgba(38,205,77,0.3)',
-  'diff-blob-addition-num-text': '#f0f3f6',
-  'diff-blob-addition-word-bg': '#09b43a',
-  'diff-blob-deletion-fg': '#0a0c10',
-  'diff-blob-deletion-line-bg': 'rgba(255,106,105,0.15)',
-  'diff-blob-deletion-num-bg': 'rgba(255,106,105,0.3)',
-  'diff-blob-deletion-num-text': '#f0f3f6',
-  'diff-blob-deletion-word-bg': '#ff6a69',
-  'diff-blob-expander-icon': '#f0f3f6',
-  'diff-blob-hunk-num-bg': 'rgba(64,158,255,0.4)',
-  'diff-blob-selected-line-highlight-mix-blend-mode': 'screen',
-  'diffstat-addition-bg': '#26cd4d',
-  'diffstat-addition-border': '#4ae168',
-  'diffstat-deletion-border': '#ffb1af',
-  'done-emphasis': '#b87fff',
-  'done-fg': '#b780ff',
-  'done-muted': '#b780ff',
-  'done-subtle': 'rgba(183,128,255,0.15)',
-  'fg-default': '#f0f3f6',
-  'fg-muted': '#f0f3f6',
-  'fg-on-emphasis': '#0a0c10',
-  'fg-subtle': '#7a828e',
-  'header-bg': '#272b33',
-  'header-divider': '#bdc4cc',
-  'header-logo': '#ffffff',
-  'header-search-bg': '#0a0c10',
-  'header-search-border': '#525964',
-  'header-text': 'rgba(255,255,255,0.7)',
-  'input-disabled-bg': 'rgba(158,167,179,0)',
-  'marketing-icon-primary': '#91cbff',
-  'marketing-icon-secondary': '#409eff',
-  'menu-bg-active': '#272b33',
-  'mktg-btn-bg': '#f6f8fa',
-  'mktg-btn-shadow-focus': 'rgb(255 255 255 / 25%) 0 0 0 4px',
-  'mktg-btn-shadow-hover-muted': 'rgb(255 255 255) 0 0 0 2px inset',
-  'mktg-btn-shadow-hover':
-    '0 4px 7px rgba(0, 0, 0, 0.15), 0 100px 80px rgba(255, 255, 255, 0.02), 0 42px 33px rgba(255, 255, 255, 0.024), 0 22px 18px rgba(255, 255, 255, 0.028), 0 12px 10px rgba(255, 255, 255, 0.034), 0 7px 5px rgba(255, 255, 255, 0.04), 0 3px 2px rgba(255, 255, 255, 0.07)',
-  'mktg-btn-shadow-outline': 'rgb(255 255 255 / 25%) 0 0 0 1px inset',
-  'neutral-emphasis-plus': '#ffffff',
-  'neutral-emphasis': '#9ea7b3',
-  'neutral-muted': 'rgba(158,167,179,0.4)',
-  'neutral-subtle': 'rgba(158,167,179,0.1)',
-  'overlay-shadow': '0 0 0 1px #525964, 0 16px 32px rgba(1,4,9,0.85)',
-  'page-header-bg': '#0a0c10',
-  'prettylights-syntax-brackethighlighter-angle': '#bdc4cc',
-  'prettylights-syntax-brackethighlighter-unmatched': '#ff6a69',
-  'prettylights-syntax-carriage-return-bg': '#ff4445',
-  'prettylights-syntax-carriage-return-text': '#ffffff',
-  'prettylights-syntax-comment': '#bdc4cc',
-  'prettylights-syntax-constant-other-reference-link': '#addcff',
-  'prettylights-syntax-constant': '#91cbff',
-  'prettylights-syntax-entity-tag': '#72f088',
-  'prettylights-syntax-entity': '#dbb7ff',
-  'prettylights-syntax-invalid-illegal-bg': '#e82a2f',
-  'prettylights-syntax-invalid-illegal-text': '#ffffff',
-  'prettylights-syntax-keyword': '#ff9492',
-  'prettylights-syntax-markup-bold': '#f0f3f6',
-  'prettylights-syntax-markup-changed-bg': '#a74c00',
-  'prettylights-syntax-markup-changed-text': '#ffe1b4',
-  'prettylights-syntax-markup-deleted-bg': '#cc1421',
-  'prettylights-syntax-markup-deleted-text': '#ffdedb',
-  'prettylights-syntax-markup-heading': '#409eff',
-  'prettylights-syntax-markup-ignored-bg': '#318bf8',
-  'prettylights-syntax-markup-ignored-text': '#f0f3f6',
-  'prettylights-syntax-markup-inserted-bg': '#007728',
-  'prettylights-syntax-markup-inserted-text': '#acf7b6',
-  'prettylights-syntax-markup-italic': '#f0f3f6',
-  'prettylights-syntax-markup-list': '#fbd669',
-  'prettylights-syntax-meta-diff-range': '#dbb7ff',
-  'prettylights-syntax-storage-modifier-import': '#f0f3f6',
-  'prettylights-syntax-string-regexp': '#72f088',
-  'prettylights-syntax-string': '#addcff',
-  'prettylights-syntax-sublimelinter-gutter-mark': '#7a828e',
-  'prettylights-syntax-variable': '#ffb757',
-  'primer-border-active': '#FF967D',
-  'primer-border-contrast': 'rgba(255,255,255,0.2)',
-  'primer-canvas-backdrop': 'rgba(1,4,9,0.8)',
-  'primer-canvas-sticky': 'rgba(10,12,16,0.95)',
-  'primer-fg-disabled': '#7a828e',
-  'primer-shadow-focus': '0 0 0 3px #1e60d5',
-  'primer-shadow-highlight': '0 0 transparent',
-  'primer-shadow-inset': '0 0 transparent',
-  'project-gradient-in': '#272b33',
-  'project-gradient-out': 'rgba(39,43,51,0)',
-  'project-header-bg': '#0a0c10',
-  'project-sidebar-bg': '#272b33',
-  'scale-black': '#010409',
-  'scale-blue-0': '#caeaff',
-  'scale-blue-1': '#addcff',
-  'scale-blue-2': '#91cbff',
-  'scale-blue-3': '#71b7ff',
-  'scale-blue-4': '#409eff',
-  'scale-blue-5': '#409eff',
-  'scale-blue-6': '#318bf8',
-  'scale-blue-7': '#2672f3',
-  'scale-blue-8': '#1e60d5',
-  'scale-blue-9': '#194fb1',
-  'scale-coral-0': '#FFDED4',
-  'scale-coral-1': '#FFCBB9',
-  'scale-coral-2': '#FFB39B',
-  'scale-coral-3': '#FF967D',
-  'scale-coral-4': '#FC704F',
-  'scale-coral-5': '#FC704F',
-  'scale-coral-6': '#F75133',
-  'scale-coral-7': '#E03B21',
-  'scale-coral-8': '#C62612',
-  'scale-coral-9': '#A91500',
-  'scale-gray-0': '#ffffff',
-  'scale-gray-1': '#f0f3f6',
-  'scale-gray-2': '#d9dee3',
-  'scale-gray-3': '#bdc4cc',
-  'scale-gray-4': '#9ea7b3',
-  'scale-gray-5': '#7a828e',
-  'scale-gray-6': '#525964',
-  'scale-gray-7': '#272b33',
-  'scale-gray-8': '#272b33',
-  'scale-gray-9': '#0a0c10',
-  'scale-green-0': '#acf7b6',
-  'scale-green-1': '#72f088',
-  'scale-green-2': '#4ae168',
-  'scale-green-3': '#26cd4d',
-  'scale-green-4': '#09b43a',
-  'scale-green-5': '#09b43a',
-  'scale-green-6': '#02a232',
-  'scale-green-7': '#008c2c',
-  'scale-green-8': '#007728',
-  'scale-green-9': '#006222',
-  'scale-orange-0': '#ffe1b4',
-  'scale-orange-1': '#ffcf86',
-  'scale-orange-2': '#ffb757',
-  'scale-orange-3': '#fe9a2d',
-  'scale-orange-4': '#e7811d',
-  'scale-orange-5': '#e7811d',
-  'scale-orange-6': '#d57014',
-  'scale-orange-7': '#bf5e0a',
-  'scale-orange-8': '#a74c00',
-  'scale-orange-9': '#8f3c00',
-  'scale-pink-0': '#ffdceb',
-  'scale-pink-1': '#ffc7e1',
-  'scale-pink-2': '#ffadd4',
-  'scale-pink-3': '#ff8dc7',
-  'scale-pink-4': '#ef6eb1',
-  'scale-pink-5': '#ef6eb1',
-  'scale-pink-6': '#e456a3',
-  'scale-pink-7': '#d23d91',
-  'scale-pink-8': '#b72c7d',
-  'scale-pink-9': '#9c1d6a',
-  'scale-purple-0': '#f0dfff',
-  'scale-purple-1': '#e6ccff',
-  'scale-purple-2': '#dbb7ff',
-  'scale-purple-3': '#cb9eff',
-  'scale-purple-4': '#b780ff',
-  'scale-purple-5': '#b87fff',
-  'scale-purple-6': '#a66bff',
-  'scale-purple-7': '#954ffd',
-  'scale-purple-8': '#8031f7',
-  'scale-purple-9': '#6921d7',
-  'scale-red-0': '#ffdedb',
-  'scale-red-1': '#ffc9c7',
-  'scale-red-2': '#ffb1af',
-  'scale-red-3': '#ff9492',
-  'scale-red-4': '#ff6a69',
-  'scale-red-5': '#ff6a69',
-  'scale-red-6': '#ff4445',
-  'scale-red-7': '#e82a2f',
-  'scale-red-8': '#cc1421',
-  'scale-red-9': '#ad0116',
-  'scale-white': '#ffffff',
-  'scale-yellow-0': '#fbe59e',
-  'scale-yellow-1': '#fbd669',
-  'scale-yellow-2': '#f7c843',
-  'scale-yellow-3': '#f0b72f',
-  'scale-yellow-4': '#e09b13',
-  'scale-yellow-5': '#e09b13',
-  'scale-yellow-6': '#c88508',
-  'scale-yellow-7': '#ae7104',
-  'scale-yellow-8': '#945d02',
-  'scale-yellow-9': '#7b4900',
-  'search-keyword-hl': 'rgba(240,183,47,0.4)',
-  'select-menu-backdrop-border': '#7a828e',
-  'select-menu-tap-focus-bg': '#1e60d5',
-  'select-menu-tap-highlight': 'rgba(82,89,100,0.5)',
-  'severe-emphasis': '#e7811d',
-  'severe-fg': '#e7811d',
-  'severe-muted': '#e7811d',
-  'severe-subtle': 'rgba(231,129,29,0.15)',
-  'shadow-extra-large': '0 12px 48px #010409',
-  'shadow-large': '0 8px 24px #010409',
-  'shadow-medium': '0 3px 6px #010409',
-  'shadow-small': '0 0 transparent',
-  'sidenav-selected-bg': '#272b33',
-  'sponsors-emphasis': '#ef6eb1',
-  'sponsors-fg': '#ef6eb1',
-  'sponsors-muted': '#ef6eb1',
-  'sponsors-subtle': 'rgba(239,110,177,0.15)',
-  'success-emphasis': '#09b43a',
-  'success-fg': '#26cd4d',
-  'success-muted': '#09b43a',
-  'success-subtle': 'rgba(9,180,58,0.15)',
-  'timeline-badge-bg': '#272b33',
-  'topic-tag-border': '#409eff',
-  'underlinenav-border-hover': '#bdc4cc',
-  'underlinenav-icon': '#f0f3f6',
-);
diff --git a/src/styles/themes/darkTritanopia.scss b/src/styles/themes/darkTritanopia.scss
deleted file mode 100644
index 02acf0a..0000000
--- a/src/styles/themes/darkTritanopia.scss
+++ /dev/null
@@ -1,436 +0,0 @@
-$variables: (
-  'accent-emphasis': '#1f6feb',
-  'accent-fg': '#58a6ff',
-  'accent-muted': 'rgba(56,139,253,0.4)',
-  'accent-subtle': 'rgba(56,139,253,0.15)',
-  'action-list-item-danger-active-bg': 'rgba(248,81,73,0.24)',
-  'action-list-item-danger-hover-bg': 'rgba(248,81,73,0.16)',
-  'action-list-item-danger-hover-text': '#ff7b72',
-  'action-list-item-default-active-bg': 'rgba(177,186,196,0.2)',
-  'action-list-item-default-active-border': 'rgba(0,0,0,0)',
-  'action-list-item-default-hover-bg': 'rgba(177,186,196,0.12)',
-  'action-list-item-default-hover-border': 'rgba(0,0,0,0)',
-  'action-list-item-default-selected-bg': 'rgba(177,186,196,0.08)',
-  'action-list-item-inline-divider': 'rgba(48,54,61,0.48)',
-  'ansi-black-bright': '#6e7681',
-  'ansi-black': '#484f58',
-  'ansi-blue-bright': '#79c0ff',
-  'ansi-blue': '#58a6ff',
-  'ansi-cyan-bright': '#56d4dd',
-  'ansi-cyan': '#39c5cf',
-  'ansi-gray': '#6e7681',
-  'ansi-green-bright': '#79c0ff',
-  'ansi-green': '#58a6ff',
-  'ansi-magenta-bright': '#d2a8ff',
-  'ansi-magenta': '#bc8cff',
-  'ansi-red-bright': '#ffa198',
-  'ansi-red': '#ff7b72',
-  'ansi-white-bright': '#ffffff',
-  'ansi-white': '#b1bac4',
-  'ansi-yellow-bright': '#e3b341',
-  'ansi-yellow': '#d29922',
-  'attention-emphasis': '#9e6a03',
-  'attention-fg': '#d29922',
-  'attention-muted': 'rgba(187,128,9,0.4)',
-  'attention-subtle': 'rgba(187,128,9,0.15)',
-  'avatar-bg': 'rgba(255,255,255,0.1)',
-  'avatar-border': 'rgba(240,246,252,0.1)',
-  'avatar-child-shadow': '-2px -2px 0 #0d1117',
-  'avatar-stack-fade-more': '#21262d',
-  'avatar-stack-fade': '#30363d',
-  'border-default': '#30363d',
-  'border-muted': '#21262d',
-  'border-subtle': 'rgba(240,246,252,0.1)',
-  'btn-active-bg': 'hsla(212,12%,18%,1)',
-  'btn-active-border': '#6e7681',
-  'btn-bg': '#21262d',
-  'btn-border': 'rgba(240,246,252,0.1)',
-  'btn-counter-bg': '#30363d',
-  'btn-danger-counter-bg': 'rgba(218,54,51,0.1)',
-  'btn-danger-disabled-bg': '#0d1117',
-  'btn-danger-disabled-counter-bg': 'rgba(218,54,51,0.05)',
-  'btn-danger-disabled-text': 'rgba(248,81,73,0.5)',
-  'btn-danger-focus-border': '#f85149',
-  'btn-danger-focus-shadow': '0 0 0 3px rgba(248,81,73,0.4)',
-  'btn-danger-hover-bg': '#da3633',
-  'btn-danger-hover-border': '#f85149',
-  'btn-danger-hover-counter-bg': 'rgba(255,255,255,0.2)',
-  'btn-danger-hover-icon': '#ffffff',
-  'btn-danger-hover-inset-shadow': '0 0 transparent',
-  'btn-danger-hover-shadow': '0 0 transparent',
-  'btn-danger-hover-text': '#ffffff',
-  'btn-danger-icon': '#f85149',
-  'btn-danger-selected-bg': '#b62324',
-  'btn-danger-selected-border': '#ff7b72',
-  'btn-danger-selected-shadow': '0 0 transparent',
-  'btn-danger-selected-text': '#ffffff',
-  'btn-danger-text': '#f85149',
-  'btn-focus-bg': '#21262d',
-  'btn-focus-border': '#8b949e',
-  'btn-focus-shadow': '0 0 0 3px rgba(139,148,158,0.3)',
-  'btn-hover-bg': '#30363d',
-  'btn-hover-border': '#8b949e',
-  'btn-inset-shadow': '0 0 transparent',
-  'btn-outline-counter-bg': 'rgba(31,111,235,0.1)',
-  'btn-outline-disabled-bg': '#0d1117',
-  'btn-outline-disabled-counter-bg': 'rgba(31,111,235,0.05)',
-  'btn-outline-disabled-text': 'rgba(88,166,255,0.5)',
-  'btn-outline-focus-border': 'rgba(240,246,252,0.1)',
-  'btn-outline-focus-shadow': '0 0 0 3px rgba(17,88,199,0.4)',
-  'btn-outline-hover-bg': '#30363d',
-  'btn-outline-hover-border': 'rgba(240,246,252,0.1)',
-  'btn-outline-hover-counter-bg': 'rgba(255,255,255,0.2)',
-  'btn-outline-hover-inset-shadow': 'inset 0 1px 0 rgba(255,255,255,0.03)',
-  'btn-outline-hover-shadow': '0 1px 0 rgba(1,4,9,0.1)',
-  'btn-outline-hover-text': '#58a6ff',
-  'btn-outline-selected-bg': '#0d419d',
-  'btn-outline-selected-border': 'rgba(240,246,252,0.1)',
-  'btn-outline-selected-shadow': '0 0 transparent',
-  'btn-outline-selected-text': '#ffffff',
-  'btn-outline-text': '#58a6ff',
-  'btn-primary-bg': '#1f6feb',
-  'btn-primary-border': 'rgba(240,246,252,0.1)',
-  'btn-primary-counter-bg': 'rgba(255,255,255,0.2)',
-  'btn-primary-disabled-bg': 'rgba(31,111,235,0.6)',
-  'btn-primary-disabled-border': 'rgba(240,246,252,0.1)',
-  'btn-primary-disabled-text': 'rgba(255,255,255,0.5)',
-  'btn-primary-focus-bg': '#1f6feb',
-  'btn-primary-focus-border': 'rgba(240,246,252,0.1)',
-  'btn-primary-focus-shadow': '0 0 0 3px rgba(46,164,79,0.4)',
-  'btn-primary-hover-bg': '#388bfd',
-  'btn-primary-hover-border': 'rgba(240,246,252,0.1)',
-  'btn-primary-icon': '#ffffff',
-  'btn-primary-inset-shadow': '0 0 transparent',
-  'btn-primary-selected-bg': '#1f6feb',
-  'btn-primary-selected-shadow': '0 0 transparent',
-  'btn-primary-shadow': '0 0 transparent',
-  'btn-primary-text': '#ffffff',
-  'btn-selected-bg': '#161b22',
-  'btn-shadow-active': 'inset 0 0.15em 0.3em rgba(1,4,9,0.15)',
-  'btn-shadow-input-focus': '0 0 0 0.2em rgba(31,111,235,0.3)',
-  'btn-shadow': '0 0 transparent',
-  'btn-text': '#c9d1d9',
-  'canvas-default-transparent': 'rgba(13,17,23,0)',
-  'canvas-default': '#0d1117',
-  'canvas-inset': '#010409',
-  'canvas-overlay': '#161b22',
-  'canvas-subtle': '#161b22',
-  'checks-ansi-black-bright': '#161b22',
-  'checks-ansi-black': '#0d1117',
-  'checks-ansi-blue-bright': '#79c0ff',
-  'checks-ansi-blue': '#58a6ff',
-  'checks-ansi-cyan-bright': '#b3f0ff',
-  'checks-ansi-cyan': '#76e3ea',
-  'checks-ansi-gray': '#6e7681',
-  'checks-ansi-green-bright': '#79c0ff',
-  'checks-ansi-green': '#58a6ff',
-  'checks-ansi-magenta-bright': '#d2a8ff',
-  'checks-ansi-magenta': '#bc8cff',
-  'checks-ansi-red-bright': '#ffa198',
-  'checks-ansi-red': '#ff7b72',
-  'checks-ansi-white-bright': '#b1bac4',
-  'checks-ansi-white': '#b1bac4',
-  'checks-ansi-yellow-bright': '#e3b341',
-  'checks-ansi-yellow': '#d29922',
-  'checks-bg': '#010409',
-  'checks-btn-hover-bg': 'rgba(110,118,129,0.1)',
-  'checks-btn-hover-icon': '#c9d1d9',
-  'checks-btn-icon': '#8b949e',
-  'checks-container-border-width': '1px',
-  'checks-donut-error': '#f85149',
-  'checks-donut-neutral': '#8b949e',
-  'checks-donut-pending': '#d29922',
-  'checks-donut-success': '#388bfd',
-  'checks-dropdown-bg': '#161b22',
-  'checks-dropdown-border': '#30363d',
-  'checks-dropdown-btn-hover-bg': 'rgba(110,118,129,0.1)',
-  'checks-dropdown-btn-hover-text': '#c9d1d9',
-  'checks-dropdown-hover-bg': 'rgba(110,118,129,0.1)',
-  'checks-dropdown-hover-text': '#c9d1d9',
-  'checks-dropdown-shadow': 'rgba(1,4,9,0.3)',
-  'checks-dropdown-text': '#c9d1d9',
-  'checks-gate-bg': 'rgba(187,128,9,0.15)',
-  'checks-gate-text': '#8b949e',
-  'checks-gate-waiting-text': '#d29922',
-  'checks-header-border': '#21262d',
-  'checks-header-icon': '#8b949e',
-  'checks-header-label-open-text': '#c9d1d9',
-  'checks-header-label-text': '#8b949e',
-  'checks-input-bg': '#161b22',
-  'checks-input-focus-text': '#c9d1d9',
-  'checks-input-placeholder-text': '#6e7681',
-  'checks-input-shadow': '0 0 0 1px (obj) => get_1.default(obj, path)',
-  'checks-input-text': '#8b949e',
-  'checks-line-dt-fm-bg': '#9e6a03',
-  'checks-line-dt-fm-text': '#ffffff',
-  'checks-line-hover-bg': 'rgba(110,118,129,0.1)',
-  'checks-line-num-text': '#6e7681',
-  'checks-line-selected-bg': 'rgba(56,139,253,0.15)',
-  'checks-line-selected-num-text': '#58a6ff',
-  'checks-line-text': '#8b949e',
-  'checks-line-timestamp-text': '#6e7681',
-  'checks-logline-command-text': '#58a6ff',
-  'checks-logline-debug-text': '#a371f7',
-  'checks-logline-error-bg': 'rgba(248,81,73,0.15)',
-  'checks-logline-error-num-text': '#6e7681',
-  'checks-logline-error-text': '#8b949e',
-  'checks-logline-num-text': '#6e7681',
-  'checks-logline-section-text': '#58a6ff',
-  'checks-logline-text': '#8b949e',
-  'checks-logline-warning-bg': 'rgba(187,128,9,0.15)',
-  'checks-logline-warning-num-text': '#d29922',
-  'checks-logline-warning-text': '#8b949e',
-  'checks-run-border-width': '1px',
-  'checks-scrollbar-thumb-bg': 'rgba(110,118,129,0.4)',
-  'checks-step-error-text': '#f85149',
-  'checks-step-header-open-bg': '#161b22',
-  'checks-step-warning-text': '#d29922',
-  'checks-text-link': '#58a6ff',
-  'checks-text-primary': '#c9d1d9',
-  'checks-text-secondary': '#8b949e',
-  'closed-emphasis': '#6e7681',
-  'closed-fg': '#8b949e',
-  'closed-muted': 'rgba(110,118,129,0.4)',
-  'closed-subtle': 'rgba(110,118,129,0.1)',
-  'codemirror-activeline-bg': 'rgba(110,118,129,0.1)',
-  'codemirror-bg': '#0d1117',
-  'codemirror-cursor': '#c9d1d9',
-  'codemirror-guttermarker-subtle-text': '#6e7681',
-  'codemirror-guttermarker-text': '#0d1117',
-  'codemirror-gutters-bg': '#0d1117',
-  'codemirror-linenumber-text': '#8b949e',
-  'codemirror-lines-bg': '#0d1117',
-  'codemirror-matchingbracket-text': '#c9d1d9',
-  'codemirror-selection-bg': 'rgba(56,139,253,0.4)',
-  'codemirror-syntax-comment': '#8b949e',
-  'codemirror-syntax-constant': '#79c0ff',
-  'codemirror-syntax-entity': '#d2a8ff',
-  'codemirror-syntax-keyword': '#ff7b72',
-  'codemirror-syntax-storage': '#ff7b72',
-  'codemirror-syntax-string': '#a5d6ff',
-  'codemirror-syntax-support': '#79c0ff',
-  'codemirror-syntax-variable': '#ffa198',
-  'codemirror-text': '#c9d1d9',
-  'counter-border': 'rgba(0,0,0,0)',
-  'danger-emphasis': '#da3633',
-  'danger-fg': '#f85149',
-  'danger-muted': 'rgba(248,81,73,0.4)',
-  'danger-subtle': 'rgba(248,81,73,0.15)',
-  'diff-blob-addition-fg': '#c9d1d9',
-  'diff-blob-addition-line-bg': 'rgba(56,139,253,0.15)',
-  'diff-blob-addition-num-bg': 'rgba(88,166,255,0.3)',
-  'diff-blob-addition-num-text': '#c9d1d9',
-  'diff-blob-addition-word-bg': 'rgba(56,139,253,0.4)',
-  'diff-blob-deletion-fg': '#c9d1d9',
-  'diff-blob-deletion-line-bg': 'rgba(248,81,73,0.15)',
-  'diff-blob-deletion-num-bg': 'rgba(248,81,73,0.3)',
-  'diff-blob-deletion-num-text': '#c9d1d9',
-  'diff-blob-deletion-word-bg': 'rgba(248,81,73,0.4)',
-  'diff-blob-expander-icon': '#8b949e',
-  'diff-blob-hunk-num-bg': 'rgba(56,139,253,0.4)',
-  'diff-blob-selected-line-highlight-mix-blend-mode': 'screen',
-  'diffstat-addition-bg': '#58a6ff',
-  'diffstat-addition-border': 'rgba(240,246,252,0.1)',
-  'diffstat-deletion-border': 'rgba(240,246,252,0.1)',
-  'done-emphasis': '#8957e5',
-  'done-fg': '#a371f7',
-  'done-muted': 'rgba(163,113,247,0.4)',
-  'done-subtle': 'rgba(163,113,247,0.15)',
-  'fg-default': '#c9d1d9',
-  'fg-muted': '#8b949e',
-  'fg-on-emphasis': '#ffffff',
-  'fg-subtle': '#6e7681',
-  'header-bg': '#161b22',
-  'header-divider': '#8b949e',
-  'header-logo': '#f0f6fc',
-  'header-search-bg': '#0d1117',
-  'header-search-border': '#30363d',
-  'header-text': 'rgba(255,255,255,0.7)',
-  'input-disabled-bg': 'rgba(110,118,129,0)',
-  'marketing-icon-primary': '#79c0ff',
-  'marketing-icon-secondary': '#1f6feb',
-  'menu-bg-active': '#161b22',
-  'mktg-btn-bg': '#f6f8fa',
-  'mktg-btn-shadow-focus': 'rgb(255 255 255 / 25%) 0 0 0 4px',
-  'mktg-btn-shadow-hover-muted': 'rgb(255 255 255) 0 0 0 2px inset',
-  'mktg-btn-shadow-hover':
-    '0 4px 7px rgba(0, 0, 0, 0.15), 0 100px 80px rgba(255, 255, 255, 0.02), 0 42px 33px rgba(255, 255, 255, 0.024), 0 22px 18px rgba(255, 255, 255, 0.028), 0 12px 10px rgba(255, 255, 255, 0.034), 0 7px 5px rgba(255, 255, 255, 0.04), 0 3px 2px rgba(255, 255, 255, 0.07)',
-  'mktg-btn-shadow-outline': 'rgb(255 255 255 / 25%) 0 0 0 1px inset',
-  'neutral-emphasis-plus': '#6e7681',
-  'neutral-emphasis': '#6e7681',
-  'neutral-muted': 'rgba(110,118,129,0.4)',
-  'neutral-subtle': 'rgba(110,118,129,0.1)',
-  'open-emphasis': '#da3633',
-  'open-fg': '#ff7b72',
-  'open-muted': 'rgba(248,81,73,0.4)',
-  'open-subtle': 'rgba(248,81,73,0.15)',
-  'overlay-shadow': '0 0 0 1px #30363d, 0 16px 32px rgba(1,4,9,0.85)',
-  'page-header-bg': '#0d1117',
-  'prettylights-syntax-brackethighlighter-angle': '#8b949e',
-  'prettylights-syntax-brackethighlighter-unmatched': '#f85149',
-  'prettylights-syntax-carriage-return-bg': '#b62324',
-  'prettylights-syntax-carriage-return-text': '#f0f6fc',
-  'prettylights-syntax-comment': '#8b949e',
-  'prettylights-syntax-constant-other-reference-link': '#a5d6ff',
-  'prettylights-syntax-constant': '#79c0ff',
-  'prettylights-syntax-entity-tag': '#a5d6ff',
-  'prettylights-syntax-entity': '#d2a8ff',
-  'prettylights-syntax-invalid-illegal-bg': '#8e1519',
-  'prettylights-syntax-invalid-illegal-text': '#f0f6fc',
-  'prettylights-syntax-keyword': '#ff7b72',
-  'prettylights-syntax-markup-bold': '#c9d1d9',
-  'prettylights-syntax-markup-changed-bg': '#67060c',
-  'prettylights-syntax-markup-changed-text': '#ffdcd7',
-  'prettylights-syntax-markup-deleted-bg': '#67060c',
-  'prettylights-syntax-markup-deleted-text': '#ffdcd7',
-  'prettylights-syntax-markup-heading': '#1f6feb',
-  'prettylights-syntax-markup-ignored-bg': '#1158c7',
-  'prettylights-syntax-markup-ignored-text': '#c9d1d9',
-  'prettylights-syntax-markup-inserted-bg': '#0c2d6b',
-  'prettylights-syntax-markup-inserted-text': '#cae8ff',
-  'prettylights-syntax-markup-italic': '#c9d1d9',
-  'prettylights-syntax-markup-list': '#f2cc60',
-  'prettylights-syntax-meta-diff-range': '#d2a8ff',
-  'prettylights-syntax-storage-modifier-import': '#c9d1d9',
-  'prettylights-syntax-string-regexp': '#a5d6ff',
-  'prettylights-syntax-string': '#a5d6ff',
-  'prettylights-syntax-sublimelinter-gutter-mark': '#484f58',
-  'prettylights-syntax-variable': '#ffa198',
-  'primer-border-active': '#F78166',
-  'primer-border-contrast': 'rgba(255,255,255,0.2)',
-  'primer-canvas-backdrop': 'rgba(1,4,9,0.8)',
-  'primer-canvas-sticky': 'rgba(13,17,23,0.95)',
-  'primer-fg-disabled': '#484f58',
-  'primer-shadow-focus': '0 0 0 3px #0c2d6b',
-  'primer-shadow-highlight': '0 0 transparent',
-  'primer-shadow-inset': '0 0 transparent',
-  'project-gradient-in': '#161b22',
-  'project-gradient-out': 'rgba(22,27,34,0)',
-  'project-header-bg': '#0d1117',
-  'project-sidebar-bg': '#161b22',
-  'scale-black': '#010409',
-  'scale-blue-0': '#cae8ff',
-  'scale-blue-1': '#a5d6ff',
-  'scale-blue-2': '#79c0ff',
-  'scale-blue-3': '#58a6ff',
-  'scale-blue-4': '#388bfd',
-  'scale-blue-5': '#1f6feb',
-  'scale-blue-6': '#1158c7',
-  'scale-blue-7': '#0d419d',
-  'scale-blue-8': '#0c2d6b',
-  'scale-blue-9': '#051d4d',
-  'scale-coral-0': '#FFDDD2',
-  'scale-coral-1': '#FFC2B2',
-  'scale-coral-2': '#FFA28B',
-  'scale-coral-3': '#F78166',
-  'scale-coral-4': '#EA6045',
-  'scale-coral-5': '#CF462D',
-  'scale-coral-6': '#AC3220',
-  'scale-coral-7': '#872012',
-  'scale-coral-8': '#640D04',
-  'scale-coral-9': '#460701',
-  'scale-gray-0': '#f0f6fc',
-  'scale-gray-1': '#c9d1d9',
-  'scale-gray-2': '#b1bac4',
-  'scale-gray-3': '#8b949e',
-  'scale-gray-4': '#6e7681',
-  'scale-gray-5': '#484f58',
-  'scale-gray-6': '#30363d',
-  'scale-gray-7': '#21262d',
-  'scale-gray-8': '#161b22',
-  'scale-gray-9': '#0d1117',
-  'scale-green-0': '#cae8ff',
-  'scale-green-1': '#a5d6ff',
-  'scale-green-2': '#79c0ff',
-  'scale-green-3': '#58a6ff',
-  'scale-green-4': '#388bfd',
-  'scale-green-5': '#1f6feb',
-  'scale-green-6': '#1158c7',
-  'scale-green-7': '#0d419d',
-  'scale-green-8': '#0c2d6b',
-  'scale-green-9': '#051d4d',
-  'scale-orange-0': '#ffdcd7',
-  'scale-orange-1': '#ffc1ba',
-  'scale-orange-2': '#ffa198',
-  'scale-orange-3': '#ff7b72',
-  'scale-orange-4': '#f85149',
-  'scale-orange-5': '#da3633',
-  'scale-orange-6': '#b62324',
-  'scale-orange-7': '#8e1519',
-  'scale-orange-8': '#67060c',
-  'scale-orange-9': '#490202',
-  'scale-pink-0': '#ffdaec',
-  'scale-pink-1': '#ffbedd',
-  'scale-pink-2': '#ff9bce',
-  'scale-pink-3': '#f778ba',
-  'scale-pink-4': '#db61a2',
-  'scale-pink-5': '#bf4b8a',
-  'scale-pink-6': '#9e3670',
-  'scale-pink-7': '#7d2457',
-  'scale-pink-8': '#5e103e',
-  'scale-pink-9': '#42062a',
-  'scale-purple-0': '#eddeff',
-  'scale-purple-1': '#e2c5ff',
-  'scale-purple-2': '#d2a8ff',
-  'scale-purple-3': '#bc8cff',
-  'scale-purple-4': '#a371f7',
-  'scale-purple-5': '#8957e5',
-  'scale-purple-6': '#6e40c9',
-  'scale-purple-7': '#553098',
-  'scale-purple-8': '#3c1e70',
-  'scale-purple-9': '#271052',
-  'scale-red-0': '#ffdcd7',
-  'scale-red-1': '#ffc1ba',
-  'scale-red-2': '#ffa198',
-  'scale-red-3': '#ff7b72',
-  'scale-red-4': '#f85149',
-  'scale-red-5': '#da3633',
-  'scale-red-6': '#b62324',
-  'scale-red-7': '#8e1519',
-  'scale-red-8': '#67060c',
-  'scale-red-9': '#490202',
-  'scale-white': '#ffffff',
-  'scale-yellow-0': '#f8e3a1',
-  'scale-yellow-1': '#f2cc60',
-  'scale-yellow-2': '#e3b341',
-  'scale-yellow-3': '#d29922',
-  'scale-yellow-4': '#bb8009',
-  'scale-yellow-5': '#9e6a03',
-  'scale-yellow-6': '#845306',
-  'scale-yellow-7': '#693e00',
-  'scale-yellow-8': '#4b2900',
-  'scale-yellow-9': '#341a00',
-  'search-keyword-hl': 'rgba(210,153,34,0.4)',
-  'select-menu-backdrop-border': '#484f58',
-  'select-menu-tap-focus-bg': '#0c2d6b',
-  'select-menu-tap-highlight': 'rgba(48,54,61,0.5)',
-  'severe-emphasis': '#da3633',
-  'severe-fg': '#f85149',
-  'severe-muted': 'rgba(248,81,73,0.4)',
-  'severe-subtle': 'rgba(248,81,73,0.15)',
-  'shadow-extra-large': '0 12px 48px #010409',
-  'shadow-large': '0 8px 24px #010409',
-  'shadow-medium': '0 3px 6px #010409',
-  'shadow-small': '0 0 transparent',
-  'sidenav-selected-bg': '#21262d',
-  'sponsors-emphasis': '#bf4b8a',
-  'sponsors-fg': '#db61a2',
-  'sponsors-muted': 'rgba(219,97,162,0.4)',
-  'sponsors-subtle': 'rgba(219,97,162,0.15)',
-  'success-emphasis': '#1f6feb',
-  'success-fg': '#58a6ff',
-  'success-muted': 'rgba(56,139,253,0.4)',
-  'success-subtle': 'rgba(56,139,253,0.15)',
-  'switch-knob-checked-bg': '#1f6feb',
-  'switch-knob-checked-disabled-bg': '#484f58',
-  'switch-track-bg': '#010409',
-  'switch-track-border': '#6e7681',
-  'switch-track-checked-active-bg': 'rgba(31,111,235,0.65)',
-  'switch-track-checked-bg': 'rgba(31,111,235,0.35)',
-  'switch-track-checked-border': '#58a6ff',
-  'switch-track-checked-hover-bg': 'rgba(31,111,235,0.5)',
-  'timeline-badge-bg': '#21262d',
-  'topic-tag-border': 'rgba(0,0,0,0)',
-  'underlinenav-border-hover': 'rgba(110,118,129,0.4)',
-  'underlinenav-icon': '#6e7681',
-);
diff --git a/src/styles/themes/light.scss b/src/styles/themes/light.scss
deleted file mode 100644
index ff031ff..0000000
--- a/src/styles/themes/light.scss
+++ /dev/null
@@ -1,418 +0,0 @@
-$variables: (
-  'accent-emphasis': '#0969da',
-  'accent-fg': '#0969da',
-  'accent-muted': 'rgba(84,174,255,0.4)',
-  'accent-subtle': '#ddf4ff',
-  'action-list-item-danger-active-bg': '#FFEBE9',
-  'action-list-item-danger-hover-bg': 'rgba(255,235,233,0.64)',
-  'action-list-item-danger-hover-text': '#cf222e',
-  'action-list-item-default-active-bg': 'rgba(208,215,222,0.48)',
-  'action-list-item-default-hover-bg': 'rgba(208,215,222,0.32)',
-  'action-list-item-default-selected-bg': 'rgba(208,215,222,0.24)',
-  'action-list-item-inline-divider': 'rgba(208,215,222,0.48)',
-  'ansi-black-bright': '#57606a',
-  'ansi-black': '#24292f',
-  'ansi-blue-bright': '#218bff',
-  'ansi-blue': '#0969da',
-  'ansi-cyan-bright': '#3192aa',
-  'ansi-cyan': '#1b7c83',
-  'ansi-gray': '#6e7781',
-  'ansi-green-bright': '#1a7f37',
-  'ansi-green': '#116329',
-  'ansi-magenta-bright': '#a475f9',
-  'ansi-magenta': '#8250df',
-  'ansi-red-bright': '#a40e26',
-  'ansi-red': '#cf222e',
-  'ansi-white-bright': '#8c959f',
-  'ansi-white': '#6e7781',
-  'ansi-yellow-bright': '#633c01',
-  'ansi-yellow': '#4d2d00',
-  'attention-emphasis': '#bf8700',
-  'attention-fg': '#9a6700',
-  'attention-muted': 'rgba(212,167,44,0.4)',
-  'attention-subtle': '#fff8c5',
-  'avatar-bg': '#ffffff',
-  'avatar-border': 'rgba(27,31,36,0.15)',
-  'avatar-child-shadow': '-2px -2px 0 rgba(255,255,255,0.8)',
-  'avatar-stack-fade-more': '#d0d7de',
-  'avatar-stack-fade': '#afb8c1',
-  'border-default': '#d0d7de',
-  'border-muted': 'hsla(210,18%,87%,1)',
-  'border-subtle': 'rgba(27,31,36,0.15)',
-  'btn-active-bg': 'hsla(220,14%,93%,1)',
-  'btn-active-border': 'rgba(27,31,36,0.15)',
-  'btn-bg': '#f6f8fa',
-  'btn-border': 'rgba(27,31,36,0.15)',
-  'btn-counter-bg': 'rgba(27,31,36,0.08)',
-  'btn-danger-counter-bg': 'rgba(207,34,46,0.1)',
-  'btn-danger-disabled-bg': '#f6f8fa',
-  'btn-danger-disabled-counter-bg': 'rgba(207,34,46,0.05)',
-  'btn-danger-disabled-text': 'rgba(207,34,46,0.5)',
-  'btn-danger-focus-border': 'rgba(27,31,36,0.15)',
-  'btn-danger-focus-shadow': '0 0 0 3px rgba(164,14,38,0.4)',
-  'btn-danger-hover-bg': '#a40e26',
-  'btn-danger-hover-border': 'rgba(27,31,36,0.15)',
-  'btn-danger-hover-counter-bg': 'rgba(255,255,255,0.2)',
-  'btn-danger-hover-icon': '#ffffff',
-  'btn-danger-hover-inset-shadow': 'inset 0 1px 0 rgba(255,255,255,0.03)',
-  'btn-danger-hover-shadow': '0 1px 0 rgba(27,31,36,0.1)',
-  'btn-danger-hover-text': '#ffffff',
-  'btn-danger-icon': '#cf222e',
-  'btn-danger-selected-bg': 'hsla(356,72%,44%,1)',
-  'btn-danger-selected-border': 'rgba(27,31,36,0.15)',
-  'btn-danger-selected-shadow': 'inset 0 1px 0 rgba(76,0,20,0.2)',
-  'btn-danger-selected-text': '#ffffff',
-  'btn-danger-text': '#cf222e',
-  'btn-focus-bg': '#f6f8fa',
-  'btn-focus-border': 'rgba(27,31,36,0.15)',
-  'btn-focus-shadow': '0 0 0 3px rgba(9,105,218,0.3)',
-  'btn-hover-bg': '#f3f4f6',
-  'btn-hover-border': 'rgba(27,31,36,0.15)',
-  'btn-inset-shadow': 'inset 0 1px 0 rgba(255,255,255,0.25)',
-  'btn-outline-counter-bg': 'rgba(9,105,218,0.1)',
-  'btn-outline-disabled-bg': '#f6f8fa',
-  'btn-outline-disabled-counter-bg': 'rgba(9,105,218,0.05)',
-  'btn-outline-disabled-text': 'rgba(9,105,218,0.5)',
-  'btn-outline-focus-border': 'rgba(27,31,36,0.15)',
-  'btn-outline-focus-shadow': '0 0 0 3px rgba(5,80,174,0.4)',
-  'btn-outline-hover-bg': '#0969da',
-  'btn-outline-hover-border': 'rgba(27,31,36,0.15)',
-  'btn-outline-hover-counter-bg': 'rgba(255,255,255,0.2)',
-  'btn-outline-hover-inset-shadow': 'inset 0 1px 0 rgba(255,255,255,0.03)',
-  'btn-outline-hover-shadow': '0 1px 0 rgba(27,31,36,0.1)',
-  'btn-outline-hover-text': '#ffffff',
-  'btn-outline-selected-bg': 'hsla(212,92%,42%,1)',
-  'btn-outline-selected-border': 'rgba(27,31,36,0.15)',
-  'btn-outline-selected-shadow': 'inset 0 1px 0 rgba(0,33,85,0.2)',
-  'btn-outline-selected-text': '#ffffff',
-  'btn-outline-text': '#0969da',
-  'btn-primary-bg': '#2da44e',
-  'btn-primary-border': 'rgba(27,31,36,0.15)',
-  'btn-primary-counter-bg': 'rgba(255,255,255,0.2)',
-  'btn-primary-disabled-bg': '#94d3a2',
-  'btn-primary-disabled-border': 'rgba(27,31,36,0.15)',
-  'btn-primary-disabled-text': 'rgba(255,255,255,0.8)',
-  'btn-primary-focus-bg': '#2da44e',
-  'btn-primary-focus-border': 'rgba(27,31,36,0.15)',
-  'btn-primary-focus-shadow': '0 0 0 3px rgba(45,164,78,0.4)',
-  'btn-primary-hover-bg': '#2c974b',
-  'btn-primary-hover-border': 'rgba(27,31,36,0.15)',
-  'btn-primary-icon': 'rgba(255,255,255,0.8)',
-  'btn-primary-inset-shadow': 'inset 0 1px 0 rgba(255,255,255,0.03)',
-  'btn-primary-selected-bg': 'hsla(137,55%,36%,1)',
-  'btn-primary-selected-shadow': 'inset 0 1px 0 rgba(0,45,17,0.2)',
-  'btn-primary-shadow': '0 1px 0 rgba(27,31,36,0.1)',
-  'btn-primary-text': '#ffffff',
-  'btn-selected-bg': 'hsla(220,14%,94%,1)',
-  'btn-shadow-active': 'inset 0 0.15em 0.3em rgba(27,31,36,0.15)',
-  'btn-shadow-input-focus': '0 0 0 0.2em rgba(9,105,218,0.3)',
-  'btn-shadow': '0 1px 0 rgba(27,31,36,0.04)',
-  'btn-text': '#24292f',
-  'canvas-default-transparent': 'rgba(255,255,255,0)',
-  'canvas-default': '#ffffff',
-  'canvas-inset': '#f6f8fa',
-  'canvas-overlay': '#ffffff',
-  'canvas-subtle': '#f6f8fa',
-  'checks-ansi-black-bright': '#32383f',
-  'checks-ansi-black': '#24292f',
-  'checks-ansi-blue-bright': '#80ccff',
-  'checks-ansi-blue': '#54aeff',
-  'checks-ansi-cyan-bright': '#b3f0ff',
-  'checks-ansi-cyan': '#76e3ea',
-  'checks-ansi-gray': '#8c959f',
-  'checks-ansi-green-bright': '#6fdd8b',
-  'checks-ansi-green': '#4ac26b',
-  'checks-ansi-magenta-bright': '#d8b9ff',
-  'checks-ansi-magenta': '#c297ff',
-  'checks-ansi-red-bright': '#ffaba8',
-  'checks-ansi-red': '#ff8182',
-  'checks-ansi-white-bright': '#d0d7de',
-  'checks-ansi-white': '#d0d7de',
-  'checks-ansi-yellow-bright': '#eac54f',
-  'checks-ansi-yellow': '#d4a72c',
-  'checks-bg': '#24292f',
-  'checks-btn-hover-bg': 'rgba(255,255,255,0.125)',
-  'checks-btn-hover-icon': '#f6f8fa',
-  'checks-btn-icon': '#afb8c1',
-  'checks-container-border-width': '0px',
-  'checks-donut-error': '#fa4549',
-  'checks-donut-neutral': '#afb8c1',
-  'checks-donut-pending': '#bf8700',
-  'checks-donut-success': '#2da44e',
-  'checks-dropdown-bg': '#32383f',
-  'checks-dropdown-border': '#424a53',
-  'checks-dropdown-btn-hover-bg': '#32383f',
-  'checks-dropdown-btn-hover-text': '#f6f8fa',
-  'checks-dropdown-hover-bg': '#424a53',
-  'checks-dropdown-hover-text': '#f6f8fa',
-  'checks-dropdown-shadow': 'rgba(27,31,36,0.3)',
-  'checks-dropdown-text': '#afb8c1',
-  'checks-gate-bg': 'rgba(125,78,0,0.15)',
-  'checks-gate-text': '#d0d7de',
-  'checks-gate-waiting-text': '#afb8c1',
-  'checks-header-border': '#32383f',
-  'checks-header-icon': '#8c959f',
-  'checks-header-label-open-text': '#f6f8fa',
-  'checks-header-label-text': '#d0d7de',
-  'checks-input-bg': '#32383f',
-  'checks-input-focus-text': '#8c959f',
-  'checks-input-placeholder-text': '#8c959f',
-  'checks-input-shadow': 'none',
-  'checks-input-text': '#eaeef2',
-  'checks-line-dt-fm-bg': '#9a6700',
-  'checks-line-dt-fm-text': '#24292f',
-  'checks-line-hover-bg': '#32383f',
-  'checks-line-num-text': 'rgba(140,149,159,0.75)',
-  'checks-line-selected-bg': 'rgba(33,139,255,0.15)',
-  'checks-line-selected-num-text': '#54aeff',
-  'checks-line-text': '#d0d7de',
-  'checks-line-timestamp-text': '#8c959f',
-  'checks-logline-command-text': '#54aeff',
-  'checks-logline-debug-text': '#c297ff',
-  'checks-logline-error-bg': 'rgba(164,14,38,0.15)',
-  'checks-logline-error-num-text': '#ff8182',
-  'checks-logline-error-text': '#d0d7de',
-  'checks-logline-num-text': 'rgba(140,149,159,0.75)',
-  'checks-logline-section-text': '#4ac26b',
-  'checks-logline-text': '#8c959f',
-  'checks-logline-warning-bg': 'rgba(125,78,0,0.15)',
-  'checks-logline-warning-num-text': '#d4a72c',
-  'checks-logline-warning-text': '#d0d7de',
-  'checks-run-border-width': '0px',
-  'checks-scrollbar-thumb-bg': '#57606a',
-  'checks-step-error-text': '#ff8182',
-  'checks-step-header-open-bg': '#32383f',
-  'checks-step-warning-text': '#d4a72c',
-  'checks-text-link': '#54aeff',
-  'checks-text-primary': '#f6f8fa',
-  'checks-text-secondary': '#8c959f',
-  'codemirror-activeline-bg': 'rgba(234,238,242,0.5)',
-  'codemirror-bg': '#ffffff',
-  'codemirror-cursor': '#24292f',
-  'codemirror-guttermarker-subtle-text': '#6e7781',
-  'codemirror-guttermarker-text': '#ffffff',
-  'codemirror-gutters-bg': '#ffffff',
-  'codemirror-linenumber-text': '#57606a',
-  'codemirror-lines-bg': '#ffffff',
-  'codemirror-matchingbracket-text': '#24292f',
-  'codemirror-selection-bg': 'rgba(84,174,255,0.4)',
-  'codemirror-syntax-comment': '#24292f',
-  'codemirror-syntax-constant': '#0550ae',
-  'codemirror-syntax-entity': '#8250df',
-  'codemirror-syntax-keyword': '#cf222e',
-  'codemirror-syntax-storage': '#cf222e',
-  'codemirror-syntax-string': '#0a3069',
-  'codemirror-syntax-support': '#0550ae',
-  'codemirror-syntax-variable': '#953800',
-  'codemirror-text': '#24292f',
-  'counter-border': 'rgba(0,0,0,0)',
-  'danger-emphasis': '#cf222e',
-  'danger-fg': '#cf222e',
-  'danger-muted': 'rgba(255,129,130,0.4)',
-  'danger-subtle': '#FFEBE9',
-  'diff-blob-addition-fg': '#24292f',
-  'diff-blob-addition-line-bg': '#E6FFEC',
-  'diff-blob-addition-num-bg': '#CCFFD8',
-  'diff-blob-addition-num-text': '#24292f',
-  'diff-blob-addition-word-bg': '#ABF2BC',
-  'diff-blob-deletion-fg': '#24292f',
-  'diff-blob-deletion-line-bg': '#FFEBE9',
-  'diff-blob-deletion-num-bg': '#FFD7D5',
-  'diff-blob-deletion-num-text': '#24292f',
-  'diff-blob-deletion-word-bg': 'rgba(255,129,130,0.4)',
-  'diff-blob-expander-icon': '#57606a',
-  'diff-blob-hunk-num-bg': 'rgba(84,174,255,0.4)',
-  'diff-blob-selected-line-highlight-mix-blend-mode': 'multiply',
-  'diffstat-addition-bg': '#2da44e',
-  'diffstat-addition-border': 'rgba(27,31,36,0.15)',
-  'diffstat-deletion-border': 'rgba(27,31,36,0.15)',
-  'done-emphasis': '#8250df',
-  'done-fg': '#8250df',
-  'done-muted': 'rgba(194,151,255,0.4)',
-  'done-subtle': '#fbefff',
-  'fg-default': '#24292f',
-  'fg-muted': '#57606a',
-  'fg-on-emphasis': '#ffffff',
-  'fg-subtle': '#6e7781',
-  'header-bg': '#24292f',
-  'header-divider': '#57606a',
-  'header-logo': '#ffffff',
-  'header-search-bg': '#24292f',
-  'header-search-border': '#57606a',
-  'header-text': 'rgba(255,255,255,0.7)',
-  'input-disabled-bg': 'rgba(175,184,193,0.2)',
-  'marketing-icon-primary': '#218bff',
-  'marketing-icon-secondary': '#54aeff',
-  'menu-bg-active': 'rgba(0,0,0,0)',
-  'mktg-btn-bg': '#1b1f23',
-  'mktg-btn-shadow-focus': 'rgb(0 0 0 / 15%) 0 0 0 4px',
-  'mktg-btn-shadow-hover-muted': 'rgb(0 0 0 / 70%) 0 0 0 2px inset',
-  'mktg-btn-shadow-hover':
-    '0 3px 2px rgba(0, 0, 0, 0.07), 0 7px 5px rgba(0, 0, 0, 0.04), 0 12px 10px rgba(0, 0, 0, 0.03), 0 22px 18px rgba(0, 0, 0, 0.03), 0 42px 33px rgba(0, 0, 0, 0.02), 0 100px 80px rgba(0, 0, 0, 0.02)',
-  'mktg-btn-shadow-outline': 'rgb(0 0 0 / 15%) 0 0 0 1px inset',
-  'neutral-emphasis-plus': '#24292f',
-  'neutral-emphasis': '#6e7781',
-  'neutral-muted': 'rgba(175,184,193,0.2)',
-  'neutral-subtle': 'rgba(234,238,242,0.5)',
-  'overlay-shadow': '0 1px 3px rgba(27,31,36,0.12), 0 8px 24px rgba(66,74,83,0.12)',
-  'page-header-bg': '#f6f8fa',
-  'prettylights-syntax-brackethighlighter-angle': '#57606a',
-  'prettylights-syntax-brackethighlighter-unmatched': '#82071e',
-  'prettylights-syntax-carriage-return-bg': '#cf222e',
-  'prettylights-syntax-carriage-return-text': '#f6f8fa',
-  'prettylights-syntax-comment': '#6e7781',
-  'prettylights-syntax-constant-other-reference-link': '#0a3069',
-  'prettylights-syntax-constant': '#0550ae',
-  'prettylights-syntax-entity-tag': '#116329',
-  'prettylights-syntax-entity': '#8250df',
-  'prettylights-syntax-invalid-illegal-bg': '#82071e',
-  'prettylights-syntax-invalid-illegal-text': '#f6f8fa',
-  'prettylights-syntax-keyword': '#cf222e',
-  'prettylights-syntax-markup-bold': '#24292f',
-  'prettylights-syntax-markup-changed-bg': '#ffd8b5',
-  'prettylights-syntax-markup-changed-text': '#953800',
-  'prettylights-syntax-markup-deleted-bg': '#FFEBE9',
-  'prettylights-syntax-markup-deleted-text': '#82071e',
-  'prettylights-syntax-markup-heading': '#0550ae',
-  'prettylights-syntax-markup-ignored-bg': '#0550ae',
-  'prettylights-syntax-markup-ignored-text': '#eaeef2',
-  'prettylights-syntax-markup-inserted-bg': '#dafbe1',
-  'prettylights-syntax-markup-inserted-text': '#116329',
-  'prettylights-syntax-markup-italic': '#24292f',
-  'prettylights-syntax-markup-list': '#3b2300',
-  'prettylights-syntax-meta-diff-range': '#8250df',
-  'prettylights-syntax-storage-modifier-import': '#24292f',
-  'prettylights-syntax-string-regexp': '#116329',
-  'prettylights-syntax-string': '#0a3069',
-  'prettylights-syntax-sublimelinter-gutter-mark': '#8c959f',
-  'prettylights-syntax-variable': '#953800',
-  'primer-border-active': '#FD8C73',
-  'primer-border-contrast': 'rgba(27,31,36,0.1)',
-  'primer-canvas-backdrop': 'rgba(27,31,36,0.5)',
-  'primer-canvas-sticky': 'rgba(255,255,255,0.95)',
-  'primer-fg-disabled': '#8c959f',
-  'primer-shadow-focus': '0 0 0 3px rgba(9,105,218,0.3)',
-  'primer-shadow-highlight': 'inset 0 1px 0 rgba(255,255,255,0.25)',
-  'primer-shadow-inset': 'inset 0 1px 0 rgba(208,215,222,0.2)',
-  'project-gradient-in': '#ffffff',
-  'project-gradient-out': 'rgba(255,255,255,0)',
-  'project-header-bg': '#24292f',
-  'project-sidebar-bg': '#ffffff',
-  'scale-black': '#1b1f24',
-  'scale-blue-0': '#ddf4ff',
-  'scale-blue-1': '#b6e3ff',
-  'scale-blue-2': '#80ccff',
-  'scale-blue-3': '#54aeff',
-  'scale-blue-4': '#218bff',
-  'scale-blue-5': '#0969da',
-  'scale-blue-6': '#0550ae',
-  'scale-blue-7': '#033d8b',
-  'scale-blue-8': '#0a3069',
-  'scale-blue-9': '#002155',
-  'scale-coral-0': '#FFF0EB',
-  'scale-coral-1': '#FFD6CC',
-  'scale-coral-2': '#FFB4A1',
-  'scale-coral-3': '#FD8C73',
-  'scale-coral-4': '#EC6547',
-  'scale-coral-5': '#C4432B',
-  'scale-coral-6': '#9E2F1C',
-  'scale-coral-7': '#801F0F',
-  'scale-coral-8': '#691105',
-  'scale-coral-9': '#510901',
-  'scale-gray-0': '#f6f8fa',
-  'scale-gray-1': '#eaeef2',
-  'scale-gray-2': '#d0d7de',
-  'scale-gray-3': '#afb8c1',
-  'scale-gray-4': '#8c959f',
-  'scale-gray-5': '#6e7781',
-  'scale-gray-6': '#57606a',
-  'scale-gray-7': '#424a53',
-  'scale-gray-8': '#32383f',
-  'scale-gray-9': '#24292f',
-  'scale-green-0': '#dafbe1',
-  'scale-green-1': '#aceebb',
-  'scale-green-2': '#6fdd8b',
-  'scale-green-3': '#4ac26b',
-  'scale-green-4': '#2da44e',
-  'scale-green-5': '#1a7f37',
-  'scale-green-6': '#116329',
-  'scale-green-7': '#044f1e',
-  'scale-green-8': '#003d16',
-  'scale-green-9': '#002d11',
-  'scale-orange-0': '#fff1e5',
-  'scale-orange-1': '#ffd8b5',
-  'scale-orange-2': '#ffb77c',
-  'scale-orange-3': '#fb8f44',
-  'scale-orange-4': '#e16f24',
-  'scale-orange-5': '#bc4c00',
-  'scale-orange-6': '#953800',
-  'scale-orange-7': '#762c00',
-  'scale-orange-8': '#5c2200',
-  'scale-orange-9': '#471700',
-  'scale-pink-0': '#ffeff7',
-  'scale-pink-1': '#ffd3eb',
-  'scale-pink-2': '#ffadda',
-  'scale-pink-3': '#ff80c8',
-  'scale-pink-4': '#e85aad',
-  'scale-pink-5': '#bf3989',
-  'scale-pink-6': '#99286e',
-  'scale-pink-7': '#772057',
-  'scale-pink-8': '#611347',
-  'scale-pink-9': '#4d0336',
-  'scale-purple-0': '#fbefff',
-  'scale-purple-1': '#ecd8ff',
-  'scale-purple-2': '#d8b9ff',
-  'scale-purple-3': '#c297ff',
-  'scale-purple-4': '#a475f9',
-  'scale-purple-5': '#8250df',
-  'scale-purple-6': '#6639ba',
-  'scale-purple-7': '#512a97',
-  'scale-purple-8': '#3e1f79',
-  'scale-purple-9': '#2e1461',
-  'scale-red-0': '#FFEBE9',
-  'scale-red-1': '#ffcecb',
-  'scale-red-2': '#ffaba8',
-  'scale-red-3': '#ff8182',
-  'scale-red-4': '#fa4549',
-  'scale-red-5': '#cf222e',
-  'scale-red-6': '#a40e26',
-  'scale-red-7': '#82071e',
-  'scale-red-8': '#660018',
-  'scale-red-9': '#4c0014',
-  'scale-white': '#ffffff',
-  'scale-yellow-0': '#fff8c5',
-  'scale-yellow-1': '#fae17d',
-  'scale-yellow-2': '#eac54f',
-  'scale-yellow-3': '#d4a72c',
-  'scale-yellow-4': '#bf8700',
-  'scale-yellow-5': '#9a6700',
-  'scale-yellow-6': '#7d4e00',
-  'scale-yellow-7': '#633c01',
-  'scale-yellow-8': '#4d2d00',
-  'scale-yellow-9': '#3b2300',
-  'search-keyword-hl': '#fff8c5',
-  'select-menu-backdrop-border': 'rgba(0,0,0,0)',
-  'select-menu-tap-focus-bg': '#b6e3ff',
-  'select-menu-tap-highlight': 'rgba(175,184,193,0.5)',
-  'severe-emphasis': '#bc4c00',
-  'severe-fg': '#bc4c00',
-  'severe-muted': 'rgba(251,143,68,0.4)',
-  'severe-subtle': '#fff1e5',
-  'shadow-extra-large': '0 12px 28px rgba(140,149,159,0.3)',
-  'shadow-large': '0 8px 24px rgba(140,149,159,0.2)',
-  'shadow-medium': '0 3px 6px rgba(140,149,159,0.15)',
-  'shadow-small': '0 1px 0 rgba(27,31,36,0.04)',
-  'sidenav-selected-bg': '#ffffff',
-  'sponsors-emphasis': '#bf3989',
-  'sponsors-fg': '#bf3989',
-  'sponsors-muted': 'rgba(255,128,200,0.4)',
-  'sponsors-subtle': '#ffeff7',
-  'success-emphasis': '#2da44e',
-  'success-fg': '#1a7f37',
-  'success-muted': 'rgba(74,194,107,0.4)',
-  'success-subtle': '#dafbe1',
-  'timeline-badge-bg': '#eaeef2',
-  'topic-tag-border': 'rgba(0,0,0,0)',
-  'underlinenav-border-hover': 'rgba(175,184,193,0.2)',
-  'underlinenav-icon': '#6e7781',
-);
diff --git a/src/styles/themes/lightColorblind.scss b/src/styles/themes/lightColorblind.scss
deleted file mode 100644
index f23ee01..0000000
--- a/src/styles/themes/lightColorblind.scss
+++ /dev/null
@@ -1,418 +0,0 @@
-$variables: (
-  'accent-emphasis': '#0969da',
-  'accent-fg': '#0969da',
-  'accent-muted': 'rgba(84,174,255,0.4)',
-  'accent-subtle': '#ddf4ff',
-  'action-list-item-danger-active-bg': '#fefe48',
-  'action-list-item-danger-hover-bg': 'rgba(254,254,72,0.64)',
-  'action-list-item-danger-hover-text': '#ac5e00',
-  'action-list-item-default-active-bg': 'rgba(208,215,222,0.48)',
-  'action-list-item-default-hover-bg': 'rgba(208,215,222,0.32)',
-  'action-list-item-default-selected-bg': 'rgba(208,215,222,0.24)',
-  'action-list-item-inline-divider': 'rgba(208,215,222,0.48)',
-  'ansi-black-bright': '#57606a',
-  'ansi-black': '#24292f',
-  'ansi-blue-bright': '#218bff',
-  'ansi-blue': '#0969da',
-  'ansi-cyan-bright': '#3192aa',
-  'ansi-cyan': '#1b7c83',
-  'ansi-gray': '#6e7781',
-  'ansi-green-bright': '#0566d5',
-  'ansi-green': '#054da9',
-  'ansi-magenta-bright': '#a475f9',
-  'ansi-magenta': '#8250df',
-  'ansi-red-bright': '#8b4600',
-  'ansi-red': '#ac5e00',
-  'ansi-white-bright': '#8c959f',
-  'ansi-white': '#6e7781',
-  'ansi-yellow-bright': '#633c01',
-  'ansi-yellow': '#4d2d00',
-  'attention-emphasis': '#bf8700',
-  'attention-fg': '#9a6700',
-  'attention-muted': 'rgba(212,167,44,0.4)',
-  'attention-subtle': '#fff8c5',
-  'avatar-bg': '#ffffff',
-  'avatar-border': 'rgba(27,31,36,0.15)',
-  'avatar-child-shadow': '-2px -2px 0 rgba(255,255,255,0.8)',
-  'avatar-stack-fade-more': '#d0d7de',
-  'avatar-stack-fade': '#afb8c1',
-  'border-default': '#d0d7de',
-  'border-muted': 'hsla(210,18%,87%,1)',
-  'border-subtle': 'rgba(27,31,36,0.15)',
-  'btn-active-bg': 'hsla(220,14%,93%,1)',
-  'btn-active-border': 'rgba(27,31,36,0.15)',
-  'btn-bg': '#f6f8fa',
-  'btn-border': 'rgba(27,31,36,0.15)',
-  'btn-counter-bg': 'rgba(27,31,36,0.08)',
-  'btn-danger-counter-bg': 'rgba(172,94,0,0.1)',
-  'btn-danger-disabled-bg': '#f6f8fa',
-  'btn-danger-disabled-counter-bg': 'rgba(172,94,0,0.05)',
-  'btn-danger-disabled-text': 'rgba(172,94,0,0.5)',
-  'btn-danger-focus-border': 'rgba(27,31,36,0.15)',
-  'btn-danger-focus-shadow': '0 0 0 3px rgba(139,70,0,0.4)',
-  'btn-danger-hover-bg': '#8b4600',
-  'btn-danger-hover-border': 'rgba(27,31,36,0.15)',
-  'btn-danger-hover-counter-bg': 'rgba(255,255,255,0.2)',
-  'btn-danger-hover-icon': '#ffffff',
-  'btn-danger-hover-inset-shadow': 'inset 0 1px 0 rgba(255,255,255,0.03)',
-  'btn-danger-hover-shadow': '0 1px 0 rgba(27,31,36,0.1)',
-  'btn-danger-hover-text': '#ffffff',
-  'btn-danger-icon': '#ac5e00',
-  'btn-danger-selected-bg': 'hsla(33,100%,31%,1)',
-  'btn-danger-selected-border': 'rgba(27,31,36,0.15)',
-  'btn-danger-selected-shadow': 'inset 0 1px 0 rgba(47,41,0,0.2)',
-  'btn-danger-selected-text': '#ffffff',
-  'btn-danger-text': '#ac5e00',
-  'btn-focus-bg': '#f6f8fa',
-  'btn-focus-border': 'rgba(27,31,36,0.15)',
-  'btn-focus-shadow': '0 0 0 3px rgba(9,105,218,0.3)',
-  'btn-hover-bg': '#f3f4f6',
-  'btn-hover-border': 'rgba(27,31,36,0.15)',
-  'btn-inset-shadow': 'inset 0 1px 0 rgba(255,255,255,0.25)',
-  'btn-outline-counter-bg': 'rgba(9,105,218,0.1)',
-  'btn-outline-disabled-bg': '#f6f8fa',
-  'btn-outline-disabled-counter-bg': 'rgba(9,105,218,0.05)',
-  'btn-outline-disabled-text': 'rgba(9,105,218,0.5)',
-  'btn-outline-focus-border': 'rgba(27,31,36,0.15)',
-  'btn-outline-focus-shadow': '0 0 0 3px rgba(5,80,174,0.4)',
-  'btn-outline-hover-bg': '#0969da',
-  'btn-outline-hover-border': 'rgba(27,31,36,0.15)',
-  'btn-outline-hover-counter-bg': 'rgba(255,255,255,0.2)',
-  'btn-outline-hover-inset-shadow': 'inset 0 1px 0 rgba(255,255,255,0.03)',
-  'btn-outline-hover-shadow': '0 1px 0 rgba(27,31,36,0.1)',
-  'btn-outline-hover-text': '#ffffff',
-  'btn-outline-selected-bg': 'hsla(212,92%,42%,1)',
-  'btn-outline-selected-border': 'rgba(27,31,36,0.15)',
-  'btn-outline-selected-shadow': 'inset 0 1px 0 rgba(0,33,85,0.2)',
-  'btn-outline-selected-text': '#ffffff',
-  'btn-outline-text': '#0969da',
-  'btn-primary-bg': '#0088ff',
-  'btn-primary-border': 'rgba(27,31,36,0.15)',
-  'btn-primary-counter-bg': 'rgba(255,255,255,0.2)',
-  'btn-primary-disabled-bg': '#65ccff',
-  'btn-primary-disabled-border': 'rgba(27,31,36,0.15)',
-  'btn-primary-disabled-text': 'rgba(255,255,255,0.8)',
-  'btn-primary-focus-bg': '#0088ff',
-  'btn-primary-focus-border': 'rgba(27,31,36,0.15)',
-  'btn-primary-focus-shadow': '0 0 0 3px rgba(0,136,255,0.4)',
-  'btn-primary-hover-bg': '#0566d5',
-  'btn-primary-hover-border': 'rgba(27,31,36,0.15)',
-  'btn-primary-icon': 'rgba(255,255,255,0.8)',
-  'btn-primary-inset-shadow': 'inset 0 1px 0 rgba(255,255,255,0.03)',
-  'btn-primary-selected-bg': 'hsla(212,95%,41%,1)',
-  'btn-primary-selected-shadow': 'inset 0 1px 0 rgba(0,31,80,0.2)',
-  'btn-primary-shadow': '0 1px 0 rgba(27,31,36,0.1)',
-  'btn-primary-text': '#ffffff',
-  'btn-selected-bg': 'hsla(220,14%,94%,1)',
-  'btn-shadow-active': 'inset 0 0.15em 0.3em rgba(27,31,36,0.15)',
-  'btn-shadow-input-focus': '0 0 0 0.2em rgba(9,105,218,0.3)',
-  'btn-shadow': '0 1px 0 rgba(27,31,36,0.04)',
-  'btn-text': '#24292f',
-  'canvas-default-transparent': 'rgba(255,255,255,0)',
-  'canvas-default': '#ffffff',
-  'canvas-inset': '#f6f8fa',
-  'canvas-overlay': '#ffffff',
-  'canvas-subtle': '#f6f8fa',
-  'checks-ansi-black-bright': '#32383f',
-  'checks-ansi-black': '#24292f',
-  'checks-ansi-blue-bright': '#80ccff',
-  'checks-ansi-blue': '#54aeff',
-  'checks-ansi-cyan-bright': '#b3f0ff',
-  'checks-ansi-cyan': '#76e3ea',
-  'checks-ansi-gray': '#8c959f',
-  'checks-ansi-green-bright': '#65ccff',
-  'checks-ansi-green': '#35adff',
-  'checks-ansi-magenta-bright': '#d8b9ff',
-  'checks-ansi-magenta': '#c297ff',
-  'checks-ansi-red-bright': '#f8c200',
-  'checks-ansi-red': '#e7a100',
-  'checks-ansi-white-bright': '#d0d7de',
-  'checks-ansi-white': '#d0d7de',
-  'checks-ansi-yellow-bright': '#eac54f',
-  'checks-ansi-yellow': '#d4a72c',
-  'checks-bg': '#24292f',
-  'checks-btn-hover-bg': 'rgba(255,255,255,0.125)',
-  'checks-btn-hover-icon': '#f6f8fa',
-  'checks-btn-icon': '#afb8c1',
-  'checks-container-border-width': '0px',
-  'checks-donut-error': '#d08002',
-  'checks-donut-neutral': '#afb8c1',
-  'checks-donut-pending': '#bf8700',
-  'checks-donut-success': '#0088ff',
-  'checks-dropdown-bg': '#32383f',
-  'checks-dropdown-border': '#424a53',
-  'checks-dropdown-btn-hover-bg': '#32383f',
-  'checks-dropdown-btn-hover-text': '#f6f8fa',
-  'checks-dropdown-hover-bg': '#424a53',
-  'checks-dropdown-hover-text': '#f6f8fa',
-  'checks-dropdown-shadow': 'rgba(27,31,36,0.3)',
-  'checks-dropdown-text': '#afb8c1',
-  'checks-gate-bg': 'rgba(125,78,0,0.15)',
-  'checks-gate-text': '#d0d7de',
-  'checks-gate-waiting-text': '#afb8c1',
-  'checks-header-border': '#32383f',
-  'checks-header-icon': '#8c959f',
-  'checks-header-label-open-text': '#f6f8fa',
-  'checks-header-label-text': '#d0d7de',
-  'checks-input-bg': '#32383f',
-  'checks-input-focus-text': '#8c959f',
-  'checks-input-placeholder-text': '#8c959f',
-  'checks-input-shadow': 'none',
-  'checks-input-text': '#eaeef2',
-  'checks-line-dt-fm-bg': '#9a6700',
-  'checks-line-dt-fm-text': '#24292f',
-  'checks-line-hover-bg': '#32383f',
-  'checks-line-num-text': 'rgba(140,149,159,0.75)',
-  'checks-line-selected-bg': 'rgba(33,139,255,0.15)',
-  'checks-line-selected-num-text': '#54aeff',
-  'checks-line-text': '#d0d7de',
-  'checks-line-timestamp-text': '#8c959f',
-  'checks-logline-command-text': '#54aeff',
-  'checks-logline-debug-text': '#c297ff',
-  'checks-logline-error-bg': 'rgba(139,70,0,0.15)',
-  'checks-logline-error-num-text': '#e7a100',
-  'checks-logline-error-text': '#d0d7de',
-  'checks-logline-num-text': 'rgba(140,149,159,0.75)',
-  'checks-logline-section-text': '#35adff',
-  'checks-logline-text': '#8c959f',
-  'checks-logline-warning-bg': 'rgba(125,78,0,0.15)',
-  'checks-logline-warning-num-text': '#d4a72c',
-  'checks-logline-warning-text': '#d0d7de',
-  'checks-run-border-width': '0px',
-  'checks-scrollbar-thumb-bg': '#57606a',
-  'checks-step-error-text': '#e7a100',
-  'checks-step-header-open-bg': '#32383f',
-  'checks-step-warning-text': '#d4a72c',
-  'checks-text-link': '#54aeff',
-  'checks-text-primary': '#f6f8fa',
-  'checks-text-secondary': '#8c959f',
-  'codemirror-activeline-bg': 'rgba(234,238,242,0.5)',
-  'codemirror-bg': '#ffffff',
-  'codemirror-cursor': '#24292f',
-  'codemirror-guttermarker-subtle-text': '#6e7781',
-  'codemirror-guttermarker-text': '#ffffff',
-  'codemirror-gutters-bg': '#ffffff',
-  'codemirror-linenumber-text': '#57606a',
-  'codemirror-lines-bg': '#ffffff',
-  'codemirror-matchingbracket-text': '#24292f',
-  'codemirror-selection-bg': 'rgba(84,174,255,0.4)',
-  'codemirror-syntax-comment': '#24292f',
-  'codemirror-syntax-constant': '#0550ae',
-  'codemirror-syntax-entity': '#8250df',
-  'codemirror-syntax-keyword': '#ac5e00',
-  'codemirror-syntax-storage': '#ac5e00',
-  'codemirror-syntax-string': '#0a3069',
-  'codemirror-syntax-support': '#0550ae',
-  'codemirror-syntax-variable': '#953800',
-  'codemirror-text': '#24292f',
-  'counter-border': 'rgba(0,0,0,0)',
-  'danger-emphasis': '#ac5e00',
-  'danger-fg': '#ac5e00',
-  'danger-muted': 'rgba(231,161,0,0.4)',
-  'danger-subtle': '#fefe48',
-  'diff-blob-addition-fg': '#24292f',
-  'diff-blob-addition-line-bg': 'rgba(192,246,255,0.5)',
-  'diff-blob-addition-num-bg': 'rgba(53,173,255,0.4)',
-  'diff-blob-addition-num-text': '#24292f',
-  'diff-blob-addition-word-bg': 'rgba(53,173,255,0.4)',
-  'diff-blob-deletion-fg': '#24292f',
-  'diff-blob-deletion-line-bg': 'rgba(254,254,72,0.5)',
-  'diff-blob-deletion-num-bg': 'rgba(231,161,0,0.4)',
-  'diff-blob-deletion-num-text': '#24292f',
-  'diff-blob-deletion-word-bg': 'rgba(248,194,0,0.5)',
-  'diff-blob-expander-icon': '#57606a',
-  'diff-blob-hunk-num-bg': 'rgba(84,174,255,0.4)',
-  'diff-blob-selected-line-highlight-mix-blend-mode': 'multiply',
-  'diffstat-addition-bg': '#0088ff',
-  'diffstat-addition-border': 'rgba(27,31,36,0.15)',
-  'diffstat-deletion-border': 'rgba(27,31,36,0.15)',
-  'done-emphasis': '#8250df',
-  'done-fg': '#8250df',
-  'done-muted': 'rgba(194,151,255,0.4)',
-  'done-subtle': '#fbefff',
-  'fg-default': '#24292f',
-  'fg-muted': '#57606a',
-  'fg-on-emphasis': '#ffffff',
-  'fg-subtle': '#6e7781',
-  'header-bg': '#24292f',
-  'header-divider': '#57606a',
-  'header-logo': '#ffffff',
-  'header-search-bg': '#24292f',
-  'header-search-border': '#57606a',
-  'header-text': 'rgba(255,255,255,0.7)',
-  'input-disabled-bg': 'rgba(175,184,193,0.2)',
-  'marketing-icon-primary': '#218bff',
-  'marketing-icon-secondary': '#54aeff',
-  'menu-bg-active': 'rgba(0,0,0,0)',
-  'mktg-btn-bg': '#1b1f23',
-  'mktg-btn-shadow-focus': 'rgb(0 0 0 / 15%) 0 0 0 4px',
-  'mktg-btn-shadow-hover-muted': 'rgb(0 0 0 / 70%) 0 0 0 2px inset',
-  'mktg-btn-shadow-hover':
-    '0 3px 2px rgba(0, 0, 0, 0.07), 0 7px 5px rgba(0, 0, 0, 0.04), 0 12px 10px rgba(0, 0, 0, 0.03), 0 22px 18px rgba(0, 0, 0, 0.03), 0 42px 33px rgba(0, 0, 0, 0.02), 0 100px 80px rgba(0, 0, 0, 0.02)',
-  'mktg-btn-shadow-outline': 'rgb(0 0 0 / 15%) 0 0 0 1px inset',
-  'neutral-emphasis-plus': '#24292f',
-  'neutral-emphasis': '#6e7781',
-  'neutral-muted': 'rgba(175,184,193,0.2)',
-  'neutral-subtle': 'rgba(234,238,242,0.5)',
-  'overlay-shadow': '0 1px 3px rgba(27,31,36,0.12), 0 8px 24px rgba(66,74,83,0.12)',
-  'page-header-bg': '#f6f8fa',
-  'prettylights-syntax-brackethighlighter-angle': '#57606a',
-  'prettylights-syntax-brackethighlighter-unmatched': '#6c3900',
-  'prettylights-syntax-carriage-return-bg': '#ac5e00',
-  'prettylights-syntax-carriage-return-text': '#f6f8fa',
-  'prettylights-syntax-comment': '#6e7781',
-  'prettylights-syntax-constant-other-reference-link': '#0a3069',
-  'prettylights-syntax-constant': '#0550ae',
-  'prettylights-syntax-entity-tag': '#054da9',
-  'prettylights-syntax-entity': '#8250df',
-  'prettylights-syntax-invalid-illegal-bg': '#6c3900',
-  'prettylights-syntax-invalid-illegal-text': '#f6f8fa',
-  'prettylights-syntax-keyword': '#ac5e00',
-  'prettylights-syntax-markup-bold': '#24292f',
-  'prettylights-syntax-markup-changed-bg': '#ffd8b5',
-  'prettylights-syntax-markup-changed-text': '#953800',
-  'prettylights-syntax-markup-deleted-bg': '#fefe48',
-  'prettylights-syntax-markup-deleted-text': '#6c3900',
-  'prettylights-syntax-markup-heading': '#0550ae',
-  'prettylights-syntax-markup-ignored-bg': '#0550ae',
-  'prettylights-syntax-markup-ignored-text': '#eaeef2',
-  'prettylights-syntax-markup-inserted-bg': '#c0f6ff',
-  'prettylights-syntax-markup-inserted-text': '#054da9',
-  'prettylights-syntax-markup-italic': '#24292f',
-  'prettylights-syntax-markup-list': '#3b2300',
-  'prettylights-syntax-meta-diff-range': '#8250df',
-  'prettylights-syntax-storage-modifier-import': '#24292f',
-  'prettylights-syntax-string-regexp': '#054da9',
-  'prettylights-syntax-string': '#0a3069',
-  'prettylights-syntax-sublimelinter-gutter-mark': '#8c959f',
-  'prettylights-syntax-variable': '#953800',
-  'primer-border-active': '#FD8C73',
-  'primer-border-contrast': 'rgba(27,31,36,0.1)',
-  'primer-canvas-backdrop': 'rgba(27,31,36,0.5)',
-  'primer-canvas-sticky': 'rgba(255,255,255,0.95)',
-  'primer-fg-disabled': '#8c959f',
-  'primer-shadow-focus': '0 0 0 3px rgba(9,105,218,0.3)',
-  'primer-shadow-highlight': 'inset 0 1px 0 rgba(255,255,255,0.25)',
-  'primer-shadow-inset': 'inset 0 1px 0 rgba(208,215,222,0.2)',
-  'project-gradient-in': '#ffffff',
-  'project-gradient-out': 'rgba(255,255,255,0)',
-  'project-header-bg': '#24292f',
-  'project-sidebar-bg': '#ffffff',
-  'scale-black': '#1b1f24',
-  'scale-blue-0': '#ddf4ff',
-  'scale-blue-1': '#b6e3ff',
-  'scale-blue-2': '#80ccff',
-  'scale-blue-3': '#54aeff',
-  'scale-blue-4': '#218bff',
-  'scale-blue-5': '#0969da',
-  'scale-blue-6': '#0550ae',
-  'scale-blue-7': '#033d8b',
-  'scale-blue-8': '#0a3069',
-  'scale-blue-9': '#002155',
-  'scale-coral-0': '#FFF0EB',
-  'scale-coral-1': '#FFD6CC',
-  'scale-coral-2': '#FFB4A1',
-  'scale-coral-3': '#FD8C73',
-  'scale-coral-4': '#EC6547',
-  'scale-coral-5': '#C4432B',
-  'scale-coral-6': '#9E2F1C',
-  'scale-coral-7': '#801F0F',
-  'scale-coral-8': '#691105',
-  'scale-coral-9': '#510901',
-  'scale-gray-0': '#f6f8fa',
-  'scale-gray-1': '#eaeef2',
-  'scale-gray-2': '#d0d7de',
-  'scale-gray-3': '#afb8c1',
-  'scale-gray-4': '#8c959f',
-  'scale-gray-5': '#6e7781',
-  'scale-gray-6': '#57606a',
-  'scale-gray-7': '#424a53',
-  'scale-gray-8': '#32383f',
-  'scale-gray-9': '#24292f',
-  'scale-green-0': '#c0f6ff',
-  'scale-green-1': '#96e5ff',
-  'scale-green-2': '#65ccff',
-  'scale-green-3': '#35adff',
-  'scale-green-4': '#0088ff',
-  'scale-green-5': '#0566d5',
-  'scale-green-6': '#054da9',
-  'scale-green-7': '#033a86',
-  'scale-green-8': '#002d68',
-  'scale-green-9': '#001f50',
-  'scale-orange-0': '#fff1e5',
-  'scale-orange-1': '#ffd8b5',
-  'scale-orange-2': '#ffb77c',
-  'scale-orange-3': '#fb8f44',
-  'scale-orange-4': '#e16f24',
-  'scale-orange-5': '#bc4c00',
-  'scale-orange-6': '#953800',
-  'scale-orange-7': '#762c00',
-  'scale-orange-8': '#5c2200',
-  'scale-orange-9': '#471700',
-  'scale-pink-0': '#ffeff7',
-  'scale-pink-1': '#ffd3eb',
-  'scale-pink-2': '#ffadda',
-  'scale-pink-3': '#ff80c8',
-  'scale-pink-4': '#e85aad',
-  'scale-pink-5': '#bf3989',
-  'scale-pink-6': '#99286e',
-  'scale-pink-7': '#772057',
-  'scale-pink-8': '#611347',
-  'scale-pink-9': '#4d0336',
-  'scale-purple-0': '#fbefff',
-  'scale-purple-1': '#ecd8ff',
-  'scale-purple-2': '#d8b9ff',
-  'scale-purple-3': '#c297ff',
-  'scale-purple-4': '#a475f9',
-  'scale-purple-5': '#8250df',
-  'scale-purple-6': '#6639ba',
-  'scale-purple-7': '#512a97',
-  'scale-purple-8': '#3e1f79',
-  'scale-purple-9': '#2e1461',
-  'scale-red-0': '#fefe48',
-  'scale-red-1': '#fee325',
-  'scale-red-2': '#f8c200',
-  'scale-red-3': '#e7a100',
-  'scale-red-4': '#d08002',
-  'scale-red-5': '#ac5e00',
-  'scale-red-6': '#8b4600',
-  'scale-red-7': '#6c3900',
-  'scale-red-8': '#4c3100',
-  'scale-red-9': '#2f2900',
-  'scale-white': '#ffffff',
-  'scale-yellow-0': '#fff8c5',
-  'scale-yellow-1': '#fae17d',
-  'scale-yellow-2': '#eac54f',
-  'scale-yellow-3': '#d4a72c',
-  'scale-yellow-4': '#bf8700',
-  'scale-yellow-5': '#9a6700',
-  'scale-yellow-6': '#7d4e00',
-  'scale-yellow-7': '#633c01',
-  'scale-yellow-8': '#4d2d00',
-  'scale-yellow-9': '#3b2300',
-  'search-keyword-hl': '#fff8c5',
-  'select-menu-backdrop-border': 'rgba(0,0,0,0)',
-  'select-menu-tap-focus-bg': '#b6e3ff',
-  'select-menu-tap-highlight': 'rgba(175,184,193,0.5)',
-  'severe-emphasis': '#bc4c00',
-  'severe-fg': '#bc4c00',
-  'severe-muted': 'rgba(251,143,68,0.4)',
-  'severe-subtle': '#fff1e5',
-  'shadow-extra-large': '0 12px 28px rgba(140,149,159,0.3)',
-  'shadow-large': '0 8px 24px rgba(140,149,159,0.2)',
-  'shadow-medium': '0 3px 6px rgba(140,149,159,0.15)',
-  'shadow-small': '0 1px 0 rgba(27,31,36,0.04)',
-  'sidenav-selected-bg': '#ffffff',
-  'sponsors-emphasis': '#bf3989',
-  'sponsors-fg': '#bf3989',
-  'sponsors-muted': 'rgba(255,128,200,0.4)',
-  'sponsors-subtle': '#ffeff7',
-  'success-emphasis': '#0088ff',
-  'success-fg': '#0566d5',
-  'success-muted': 'rgba(53,173,255,0.4)',
-  'success-subtle': '#c0f6ff',
-  'timeline-badge-bg': '#eaeef2',
-  'topic-tag-border': 'rgba(0,0,0,0)',
-  'underlinenav-border-hover': 'rgba(175,184,193,0.2)',
-  'underlinenav-icon': '#6e7781',
-);
diff --git a/src/styles/themes/lightHighContrast.scss b/src/styles/themes/lightHighContrast.scss
deleted file mode 100644
index 8b1c9d5..0000000
--- a/src/styles/themes/lightHighContrast.scss
+++ /dev/null
@@ -1,418 +0,0 @@
-$variables: (
-  'accent-emphasis': '#0349b4',
-  'accent-fg': '#0349b4',
-  'accent-muted': '#368cf9',
-  'accent-subtle': '#dff7ff',
-  'action-list-item-danger-active-bg': '#fff0ee',
-  'action-list-item-danger-hover-bg': 'rgba(255,240,238,0.64)',
-  'action-list-item-danger-hover-text': '#a0111f',
-  'action-list-item-default-active-bg': 'rgba(206,213,220,0.48)',
-  'action-list-item-default-hover-bg': 'rgba(206,213,220,0.32)',
-  'action-list-item-default-selected-bg': 'rgba(206,213,220,0.24)',
-  'action-list-item-inline-divider': 'rgba(32,37,44,0.48)',
-  'ansi-black-bright': '#4B535D',
-  'ansi-black': '#0E1116',
-  'ansi-blue-bright': '#1168e3',
-  'ansi-blue': '#0349b4',
-  'ansi-cyan-bright': '#3192aa',
-  'ansi-cyan': '#1b7c83',
-  'ansi-gray': '#66707B',
-  'ansi-green-bright': '#055d20',
-  'ansi-green': '#024c1a',
-  'ansi-magenta-bright': '#844ae7',
-  'ansi-magenta': '#622cbc',
-  'ansi-red-bright': '#86061d',
-  'ansi-red': '#a0111f',
-  'ansi-white-bright': '#88929D',
-  'ansi-white': '#66707B',
-  'ansi-yellow-bright': '#4e2c00',
-  'ansi-yellow': '#3f2200',
-  'attention-emphasis': '#744500',
-  'attention-fg': '#744500',
-  'attention-muted': '#b58407',
-  'attention-subtle': '#fcf7be',
-  'avatar-bg': '#ffffff',
-  'avatar-border': 'rgba(1,4,9,0.8)',
-  'avatar-child-shadow': '-2px -2px 0 rgba(255,255,255,0.8)',
-  'avatar-stack-fade-more': '#CED5DC',
-  'avatar-stack-fade': '#ACB6C0',
-  'border-default': '#20252C',
-  'border-muted': '#88929D',
-  'border-subtle': 'rgba(1,4,9,0.8)',
-  'btn-active-bg': '#ACB6C0',
-  'btn-active-border': 'rgba(1,4,9,0.8)',
-  'btn-bg': '#E7ECF0',
-  'btn-border': 'rgba(1,4,9,0.8)',
-  'btn-counter-bg': 'rgba(1,4,9,0.08)',
-  'btn-danger-counter-bg': 'rgba(160,17,31,0.1)',
-  'btn-danger-disabled-bg': '#E7ECF0',
-  'btn-danger-disabled-counter-bg': 'rgba(160,17,31,0.05)',
-  'btn-danger-disabled-text': 'rgba(160,17,31,0.5)',
-  'btn-danger-focus-border': '#6e011a',
-  'btn-danger-focus-shadow': '0 0 0 3px rgba(134,6,29,0.4)',
-  'btn-danger-hover-bg': '#a0111f',
-  'btn-danger-hover-border': '#6e011a',
-  'btn-danger-hover-counter-bg': 'rgba(255,255,255,0.2)',
-  'btn-danger-hover-icon': '#ffffff',
-  'btn-danger-hover-inset-shadow': 'inset 0 1px 0 rgba(255,255,255,0.03)',
-  'btn-danger-hover-shadow': '0 1px 0 rgba(1,4,9,0.1)',
-  'btn-danger-hover-text': '#ffffff',
-  'btn-danger-icon': '#86061d',
-  'btn-danger-selected-bg': '#6e011a',
-  'btn-danger-selected-border': '#6e011a',
-  'btn-danger-selected-shadow': 'inset 0 1px 0 rgba(67,0,17,0.2)',
-  'btn-danger-selected-text': '#ffffff',
-  'btn-danger-text': '#86061d',
-  'btn-focus-bg': '#CED5DC',
-  'btn-focus-border': 'rgba(1,4,9,0.8)',
-  'btn-focus-shadow': '0 0 0 3px rgba(3,73,180,0.3)',
-  'btn-hover-bg': '#CED5DC',
-  'btn-hover-border': 'rgba(1,4,9,0.8)',
-  'btn-inset-shadow': 'inset 0 1px 0 rgba(255,255,255,0.25)',
-  'btn-outline-counter-bg': 'rgba(3,73,180,0.1)',
-  'btn-outline-disabled-bg': '#E7ECF0',
-  'btn-outline-disabled-counter-bg': 'rgba(3,73,180,0.05)',
-  'btn-outline-disabled-text': 'rgba(3,73,180,0.5)',
-  'btn-outline-focus-border': '#022f7a',
-  'btn-outline-focus-shadow': '0 0 0 3px rgba(2,59,149,0.4)',
-  'btn-outline-hover-bg': '#0349b4',
-  'btn-outline-hover-border': '#022f7a',
-  'btn-outline-hover-counter-bg': 'rgba(255,255,255,0.2)',
-  'btn-outline-hover-inset-shadow': 'inset 0 1px 0 rgba(255,255,255,0.03)',
-  'btn-outline-hover-shadow': '0 1px 0 rgba(1,4,9,0.1)',
-  'btn-outline-hover-text': '#ffffff',
-  'btn-outline-selected-bg': '#022f7a',
-  'btn-outline-selected-border': '#022f7a',
-  'btn-outline-selected-shadow': 'inset 0 1px 0 rgba(2,26,74,0.2)',
-  'btn-outline-selected-text': '#ffffff',
-  'btn-outline-text': '#023b95',
-  'btn-primary-bg': '#055d20',
-  'btn-primary-border': '#013d14',
-  'btn-primary-counter-bg': 'rgba(255,255,255,0.2)',
-  'btn-primary-disabled-bg': '#94d3a2',
-  'btn-primary-disabled-border': 'rgba(1,4,9,0.8)',
-  'btn-primary-disabled-text': 'rgba(255,255,255,0.8)',
-  'btn-primary-focus-bg': '#013d14',
-  'btn-primary-focus-border': '#013d14',
-  'btn-primary-focus-shadow': '0 0 0 3px rgba(1,61,20,0.4)',
-  'btn-primary-hover-bg': '#024c1a',
-  'btn-primary-hover-border': '#013d14',
-  'btn-primary-icon': 'rgba(255,255,255,0.8)',
-  'btn-primary-inset-shadow': 'inset 0 1px 0 rgba(255,255,255,0.03)',
-  'btn-primary-selected-bg': 'hsla(139,95%,13%,1)',
-  'btn-primary-selected-shadow': 'inset 0 1px 0 rgba(0,35,11,0.2)',
-  'btn-primary-shadow': '0 1px 0 rgba(1,4,9,0.1)',
-  'btn-primary-text': '#ffffff',
-  'btn-selected-bg': '#ACB6C0',
-  'btn-shadow-active': 'inset 0 0.15em 0.3em rgba(1,4,9,0.15)',
-  'btn-shadow-input-focus': '0 0 0 0.2em rgba(3,73,180,0.3)',
-  'btn-shadow': '0 1px 0 rgba(1,4,9,0.04)',
-  'btn-text': '#0E1116',
-  'canvas-default-transparent': 'rgba(255,255,255,0)',
-  'canvas-default': '#ffffff',
-  'canvas-inset': '#ffffff',
-  'canvas-overlay': '#ffffff',
-  'canvas-subtle': '#E7ECF0',
-  'checks-ansi-black-bright': '#20252C',
-  'checks-ansi-black': '#0E1116',
-  'checks-ansi-blue-bright': '#67b3fd',
-  'checks-ansi-blue': '#368cf9',
-  'checks-ansi-cyan-bright': '#b3f0ff',
-  'checks-ansi-cyan': '#76e3ea',
-  'checks-ansi-gray': '#88929D',
-  'checks-ansi-green-bright': '#43c663',
-  'checks-ansi-green': '#26a148',
-  'checks-ansi-magenta-bright': '#c49bff',
-  'checks-ansi-magenta': '#a371f7',
-  'checks-ansi-red-bright': '#ff8e8a',
-  'checks-ansi-red': '#ee5a5d',
-  'checks-ansi-white-bright': '#CED5DC',
-  'checks-ansi-white': '#CED5DC',
-  'checks-ansi-yellow-bright': '#d5a824',
-  'checks-ansi-yellow': '#b58407',
-  'checks-bg': '#0E1116',
-  'checks-btn-hover-bg': 'rgba(255,255,255,0.125)',
-  'checks-btn-hover-icon': '#FFFFFF',
-  'checks-btn-icon': '#ACB6C0',
-  'checks-container-border-width': '0px',
-  'checks-donut-error': '#d5232c',
-  'checks-donut-neutral': '#ACB6C0',
-  'checks-donut-pending': '#956400',
-  'checks-donut-success': '#117f32',
-  'checks-dropdown-bg': '#20252C',
-  'checks-dropdown-border': '#343B43',
-  'checks-dropdown-btn-hover-bg': '#20252C',
-  'checks-dropdown-btn-hover-text': '#FFFFFF',
-  'checks-dropdown-hover-bg': '#343B43',
-  'checks-dropdown-hover-text': '#FFFFFF',
-  'checks-dropdown-shadow': 'rgba(1,4,9,0.3)',
-  'checks-dropdown-text': '#ACB6C0',
-  'checks-gate-bg': 'rgba(96,55,0,0.15)',
-  'checks-gate-text': '#CED5DC',
-  'checks-gate-waiting-text': '#ACB6C0',
-  'checks-header-border': '#20252C',
-  'checks-header-icon': '#88929D',
-  'checks-header-label-open-text': '#FFFFFF',
-  'checks-header-label-text': '#CED5DC',
-  'checks-input-bg': '#20252C',
-  'checks-input-focus-text': '#88929D',
-  'checks-input-placeholder-text': '#88929D',
-  'checks-input-shadow': 'none',
-  'checks-input-text': '#E7ECF0',
-  'checks-line-dt-fm-bg': '#744500',
-  'checks-line-dt-fm-text': '#0E1116',
-  'checks-line-hover-bg': '#20252C',
-  'checks-line-num-text': 'rgba(136,146,157,0.75)',
-  'checks-line-selected-bg': 'rgba(17,104,227,0.15)',
-  'checks-line-selected-num-text': '#368cf9',
-  'checks-line-text': '#CED5DC',
-  'checks-line-timestamp-text': '#88929D',
-  'checks-logline-command-text': '#368cf9',
-  'checks-logline-debug-text': '#a371f7',
-  'checks-logline-error-bg': 'rgba(134,6,29,0.15)',
-  'checks-logline-error-num-text': '#ee5a5d',
-  'checks-logline-error-text': '#CED5DC',
-  'checks-logline-num-text': 'rgba(136,146,157,0.75)',
-  'checks-logline-section-text': '#26a148',
-  'checks-logline-text': '#88929D',
-  'checks-logline-warning-bg': 'rgba(96,55,0,0.15)',
-  'checks-logline-warning-num-text': '#b58407',
-  'checks-logline-warning-text': '#CED5DC',
-  'checks-run-border-width': '0px',
-  'checks-scrollbar-thumb-bg': '#4B535D',
-  'checks-step-error-text': '#ee5a5d',
-  'checks-step-header-open-bg': '#20252C',
-  'checks-step-warning-text': '#b58407',
-  'checks-text-link': '#368cf9',
-  'checks-text-primary': '#FFFFFF',
-  'checks-text-secondary': '#88929D',
-  'codemirror-activeline-bg': '#E7ECF0',
-  'codemirror-bg': '#ffffff',
-  'codemirror-cursor': '#0E1116',
-  'codemirror-guttermarker-subtle-text': '#66707B',
-  'codemirror-guttermarker-text': '#ffffff',
-  'codemirror-gutters-bg': '#ffffff',
-  'codemirror-linenumber-text': '#0E1116',
-  'codemirror-lines-bg': '#ffffff',
-  'codemirror-matchingbracket-text': '#0E1116',
-  'codemirror-selection-bg': '#368cf9',
-  'codemirror-syntax-comment': '#0E1116',
-  'codemirror-syntax-constant': '#023b95',
-  'codemirror-syntax-entity': '#622cbc',
-  'codemirror-syntax-keyword': '#a0111f',
-  'codemirror-syntax-storage': '#a0111f',
-  'codemirror-syntax-string': '#032563',
-  'codemirror-syntax-support': '#023b95',
-  'codemirror-syntax-variable': '#702c00',
-  'codemirror-text': '#0E1116',
-  'counter-border': '#20252C',
-  'danger-emphasis': '#a0111f',
-  'danger-fg': '#a0111f',
-  'danger-muted': '#ee5a5d',
-  'danger-subtle': '#fff0ee',
-  'diff-blob-addition-fg': '#ffffff',
-  'diff-blob-addition-line-bg': '#E6FFEC',
-  'diff-blob-addition-num-bg': '#CCFFD8',
-  'diff-blob-addition-num-text': '#0E1116',
-  'diff-blob-addition-word-bg': '#055d20',
-  'diff-blob-deletion-fg': '#ffffff',
-  'diff-blob-deletion-line-bg': '#fff0ee',
-  'diff-blob-deletion-num-bg': '#FFD7D5',
-  'diff-blob-deletion-num-text': '#0E1116',
-  'diff-blob-deletion-word-bg': '#a0111f',
-  'diff-blob-expander-icon': '#0E1116',
-  'diff-blob-hunk-num-bg': '#9cd7ff',
-  'diff-blob-selected-line-highlight-mix-blend-mode': 'multiply',
-  'diffstat-addition-bg': '#117f32',
-  'diffstat-addition-border': 'rgba(1,4,9,0.8)',
-  'diffstat-deletion-border': 'rgba(1,4,9,0.8)',
-  'done-emphasis': '#622cbc',
-  'done-fg': '#622cbc',
-  'done-muted': '#a371f7',
-  'done-subtle': '#faf0fe',
-  'fg-default': '#0E1116',
-  'fg-muted': '#0E1116',
-  'fg-on-emphasis': '#ffffff',
-  'fg-subtle': '#66707B',
-  'header-bg': '#0E1116',
-  'header-divider': '#ACB6C0',
-  'header-logo': '#ffffff',
-  'header-search-bg': '#0E1116',
-  'header-search-border': '#4B535D',
-  'header-text': 'rgba(255,255,255,0.7)',
-  'input-disabled-bg': 'rgba(172,182,192,0.2)',
-  'marketing-icon-primary': '#1168e3',
-  'marketing-icon-secondary': '#368cf9',
-  'menu-bg-active': 'rgba(0,0,0,0)',
-  'mktg-btn-bg': '#1b1f23',
-  'mktg-btn-shadow-focus': 'rgb(0 0 0 / 15%) 0 0 0 4px',
-  'mktg-btn-shadow-hover-muted': 'rgb(0 0 0 / 70%) 0 0 0 2px inset',
-  'mktg-btn-shadow-hover':
-    '0 3px 2px rgba(0, 0, 0, 0.07), 0 7px 5px rgba(0, 0, 0, 0.04), 0 12px 10px rgba(0, 0, 0, 0.03), 0 22px 18px rgba(0, 0, 0, 0.03), 0 42px 33px rgba(0, 0, 0, 0.02), 0 100px 80px rgba(0, 0, 0, 0.02)',
-  'mktg-btn-shadow-outline': 'rgb(0 0 0 / 15%) 0 0 0 1px inset',
-  'neutral-emphasis-plus': '#0E1116',
-  'neutral-emphasis': '#66707B',
-  'neutral-muted': 'rgba(172,182,192,0.2)',
-  'neutral-subtle': '#E7ECF0',
-  'overlay-shadow': '0 1px 3px rgba(1,4,9,0.12), 0 8px 24px rgba(52,59,67,0.12)',
-  'page-header-bg': '#ffffff',
-  'prettylights-syntax-brackethighlighter-angle': '#4B535D',
-  'prettylights-syntax-brackethighlighter-unmatched': '#6e011a',
-  'prettylights-syntax-carriage-return-bg': '#a0111f',
-  'prettylights-syntax-carriage-return-text': '#FFFFFF',
-  'prettylights-syntax-comment': '#66707B',
-  'prettylights-syntax-constant-other-reference-link': '#032563',
-  'prettylights-syntax-constant': '#023b95',
-  'prettylights-syntax-entity-tag': '#024c1a',
-  'prettylights-syntax-entity': '#622cbc',
-  'prettylights-syntax-invalid-illegal-bg': '#6e011a',
-  'prettylights-syntax-invalid-illegal-text': '#FFFFFF',
-  'prettylights-syntax-keyword': '#a0111f',
-  'prettylights-syntax-markup-bold': '#0E1116',
-  'prettylights-syntax-markup-changed-bg': '#ffc67b',
-  'prettylights-syntax-markup-changed-text': '#702c00',
-  'prettylights-syntax-markup-deleted-bg': '#fff0ee',
-  'prettylights-syntax-markup-deleted-text': '#6e011a',
-  'prettylights-syntax-markup-heading': '#023b95',
-  'prettylights-syntax-markup-ignored-bg': '#023b95',
-  'prettylights-syntax-markup-ignored-text': '#E7ECF0',
-  'prettylights-syntax-markup-inserted-bg': '#d2fedb',
-  'prettylights-syntax-markup-inserted-text': '#024c1a',
-  'prettylights-syntax-markup-italic': '#0E1116',
-  'prettylights-syntax-markup-list': '#2e1800',
-  'prettylights-syntax-meta-diff-range': '#622cbc',
-  'prettylights-syntax-storage-modifier-import': '#0E1116',
-  'prettylights-syntax-string-regexp': '#024c1a',
-  'prettylights-syntax-string': '#032563',
-  'prettylights-syntax-sublimelinter-gutter-mark': '#88929D',
-  'prettylights-syntax-variable': '#702c00',
-  'primer-border-active': '#ef5b48',
-  'primer-border-contrast': 'rgba(1,4,9,0.1)',
-  'primer-canvas-backdrop': 'rgba(1,4,9,0.5)',
-  'primer-canvas-sticky': 'rgba(255,255,255,0.95)',
-  'primer-fg-disabled': '#88929D',
-  'primer-shadow-focus': '0 0 0 3px rgba(3,73,180,0.3)',
-  'primer-shadow-highlight': 'inset 0 1px 0 rgba(255,255,255,0.25)',
-  'primer-shadow-inset': 'inset 0 1px 0 rgba(206,213,220,0.2)',
-  'project-gradient-in': '#ffffff',
-  'project-gradient-out': 'rgba(255,255,255,0)',
-  'project-header-bg': '#0E1116',
-  'project-sidebar-bg': '#ffffff',
-  'scale-black': '#010409',
-  'scale-blue-0': '#dff7ff',
-  'scale-blue-1': '#9cd7ff',
-  'scale-blue-2': '#67b3fd',
-  'scale-blue-3': '#368cf9',
-  'scale-blue-4': '#1168e3',
-  'scale-blue-5': '#0349b4',
-  'scale-blue-6': '#023b95',
-  'scale-blue-7': '#022f7a',
-  'scale-blue-8': '#032563',
-  'scale-blue-9': '#021a4a',
-  'scale-coral-0': '#fff0ed',
-  'scale-coral-1': '#ffc2b6',
-  'scale-coral-2': '#ff8f7e',
-  'scale-coral-3': '#ef5b48',
-  'scale-coral-4': '#cd3425',
-  'scale-coral-5': '#9f1710',
-  'scale-coral-6': '#870706',
-  'scale-coral-7': '#6f0107',
-  'scale-coral-8': '#5b0002',
-  'scale-coral-9': '#430200',
-  'scale-gray-0': '#FFFFFF',
-  'scale-gray-1': '#E7ECF0',
-  'scale-gray-2': '#CED5DC',
-  'scale-gray-3': '#ACB6C0',
-  'scale-gray-4': '#88929D',
-  'scale-gray-5': '#66707B',
-  'scale-gray-6': '#4B535D',
-  'scale-gray-7': '#343B43',
-  'scale-gray-8': '#20252C',
-  'scale-gray-9': '#0E1116',
-  'scale-green-0': '#d2fedb',
-  'scale-green-1': '#82e596',
-  'scale-green-2': '#43c663',
-  'scale-green-3': '#26a148',
-  'scale-green-4': '#117f32',
-  'scale-green-5': '#055d20',
-  'scale-green-6': '#024c1a',
-  'scale-green-7': '#013d14',
-  'scale-green-8': '#003110',
-  'scale-green-9': '#00230b',
-  'scale-orange-0': '#fff2d5',
-  'scale-orange-1': '#ffc67b',
-  'scale-orange-2': '#f99636',
-  'scale-orange-3': '#dc6d1a',
-  'scale-orange-4': '#b45105',
-  'scale-orange-5': '#873800',
-  'scale-orange-6': '#702c00',
-  'scale-orange-7': '#5b2300',
-  'scale-orange-8': '#491b00',
-  'scale-orange-9': '#361200',
-  'scale-pink-0': '#feeff7',
-  'scale-pink-1': '#ffbde0',
-  'scale-pink-2': '#fc87ca',
-  'scale-pink-3': '#ed4baf',
-  'scale-pink-4': '#c9248e',
-  'scale-pink-5': '#971368',
-  'scale-pink-6': '#7d0c57',
-  'scale-pink-7': '#660847',
-  'scale-pink-8': '#53043a',
-  'scale-pink-9': '#3e022b',
-  'scale-purple-0': '#faf0fe',
-  'scale-purple-1': '#e0c5ff',
-  'scale-purple-2': '#c49bff',
-  'scale-purple-3': '#a371f7',
-  'scale-purple-4': '#844ae7',
-  'scale-purple-5': '#622cbc',
-  'scale-purple-6': '#512598',
-  'scale-purple-7': '#411d7b',
-  'scale-purple-8': '#341763',
-  'scale-purple-9': '#260f49',
-  'scale-red-0': '#fff0ee',
-  'scale-red-1': '#ffc1bc',
-  'scale-red-2': '#ff8e8a',
-  'scale-red-3': '#ee5a5d',
-  'scale-red-4': '#d5232c',
-  'scale-red-5': '#a0111f',
-  'scale-red-6': '#86061d',
-  'scale-red-7': '#6e011a',
-  'scale-red-8': '#5a0016',
-  'scale-red-9': '#430011',
-  'scale-white': '#ffffff',
-  'scale-yellow-0': '#fcf7be',
-  'scale-yellow-1': '#f0ce53',
-  'scale-yellow-2': '#d5a824',
-  'scale-yellow-3': '#b58407',
-  'scale-yellow-4': '#956400',
-  'scale-yellow-5': '#744500',
-  'scale-yellow-6': '#603700',
-  'scale-yellow-7': '#4e2c00',
-  'scale-yellow-8': '#3f2200',
-  'scale-yellow-9': '#2e1800',
-  'search-keyword-hl': '#fcf7be',
-  'select-menu-backdrop-border': 'rgba(0,0,0,0)',
-  'select-menu-tap-focus-bg': '#9cd7ff',
-  'select-menu-tap-highlight': 'rgba(172,182,192,0.5)',
-  'severe-emphasis': '#873800',
-  'severe-fg': '#873800',
-  'severe-muted': '#dc6d1a',
-  'severe-subtle': '#fff2d5',
-  'shadow-extra-large': '0 12px 28px rgba(136,146,157,0.3)',
-  'shadow-large': '0 8px 24px rgba(136,146,157,0.2)',
-  'shadow-medium': '0 3px 6px rgba(136,146,157,0.15)',
-  'shadow-small': '0 1px 0 rgba(1,4,9,0.04)',
-  'sidenav-selected-bg': '#ffffff',
-  'sponsors-emphasis': '#971368',
-  'sponsors-fg': '#971368',
-  'sponsors-muted': '#ed4baf',
-  'sponsors-subtle': '#feeff7',
-  'success-emphasis': '#055d20',
-  'success-fg': '#055d20',
-  'success-muted': '#26a148',
-  'success-subtle': '#d2fedb',
-  'timeline-badge-bg': '#E7ECF0',
-  'topic-tag-border': '#0349b4',
-  'underlinenav-border-hover': 'rgba(172,182,192,0.2)',
-  'underlinenav-icon': '#66707B',
-);
diff --git a/src/styles/themes/lightTritanopia.scss b/src/styles/themes/lightTritanopia.scss
deleted file mode 100644
index 1f08098..0000000
--- a/src/styles/themes/lightTritanopia.scss
+++ /dev/null
@@ -1,436 +0,0 @@
-$variables: (
-  'accent-emphasis': '#0969da',
-  'accent-fg': '#0969da',
-  'accent-muted': 'rgba(84,174,255,0.4)',
-  'accent-subtle': '#ddf4ff',
-  'action-list-item-danger-active-bg': '#FFEBE9',
-  'action-list-item-danger-hover-bg': 'rgba(255,235,233,0.64)',
-  'action-list-item-danger-hover-text': '#cf222e',
-  'action-list-item-default-active-bg': 'rgba(208,215,222,0.48)',
-  'action-list-item-default-active-border': 'rgba(0,0,0,0)',
-  'action-list-item-default-hover-bg': 'rgba(208,215,222,0.32)',
-  'action-list-item-default-hover-border': 'rgba(0,0,0,0)',
-  'action-list-item-default-selected-bg': 'rgba(208,215,222,0.24)',
-  'action-list-item-inline-divider': 'rgba(208,215,222,0.48)',
-  'ansi-black-bright': '#57606a',
-  'ansi-black': '#24292f',
-  'ansi-blue-bright': '#218bff',
-  'ansi-blue': '#0969da',
-  'ansi-cyan-bright': '#3192aa',
-  'ansi-cyan': '#1b7c83',
-  'ansi-gray': '#6e7781',
-  'ansi-green-bright': '#0969da',
-  'ansi-green': '#0550ae',
-  'ansi-magenta-bright': '#a475f9',
-  'ansi-magenta': '#8250df',
-  'ansi-red-bright': '#a40e26',
-  'ansi-red': '#cf222e',
-  'ansi-white-bright': '#8c959f',
-  'ansi-white': '#6e7781',
-  'ansi-yellow-bright': '#633c01',
-  'ansi-yellow': '#4d2d00',
-  'attention-emphasis': '#bf8700',
-  'attention-fg': '#9a6700',
-  'attention-muted': 'rgba(212,167,44,0.4)',
-  'attention-subtle': '#fff8c5',
-  'avatar-bg': '#ffffff',
-  'avatar-border': 'rgba(27,31,36,0.15)',
-  'avatar-child-shadow': '-2px -2px 0 rgba(255,255,255,0.8)',
-  'avatar-stack-fade-more': '#d0d7de',
-  'avatar-stack-fade': '#afb8c1',
-  'border-default': '#d0d7de',
-  'border-muted': 'hsla(210,18%,87%,1)',
-  'border-subtle': 'rgba(27,31,36,0.15)',
-  'btn-active-bg': 'hsla(220,14%,93%,1)',
-  'btn-active-border': 'rgba(27,31,36,0.15)',
-  'btn-bg': '#f6f8fa',
-  'btn-border': 'rgba(27,31,36,0.15)',
-  'btn-counter-bg': 'rgba(27,31,36,0.08)',
-  'btn-danger-counter-bg': 'rgba(207,34,46,0.1)',
-  'btn-danger-disabled-bg': '#f6f8fa',
-  'btn-danger-disabled-counter-bg': 'rgba(207,34,46,0.05)',
-  'btn-danger-disabled-text': 'rgba(207,34,46,0.5)',
-  'btn-danger-focus-border': 'rgba(27,31,36,0.15)',
-  'btn-danger-focus-shadow': '0 0 0 3px rgba(164,14,38,0.4)',
-  'btn-danger-hover-bg': '#a40e26',
-  'btn-danger-hover-border': 'rgba(27,31,36,0.15)',
-  'btn-danger-hover-counter-bg': 'rgba(255,255,255,0.2)',
-  'btn-danger-hover-icon': '#ffffff',
-  'btn-danger-hover-inset-shadow': 'inset 0 1px 0 rgba(255,255,255,0.03)',
-  'btn-danger-hover-shadow': '0 1px 0 rgba(27,31,36,0.1)',
-  'btn-danger-hover-text': '#ffffff',
-  'btn-danger-icon': '#cf222e',
-  'btn-danger-selected-bg': 'hsla(356,72%,44%,1)',
-  'btn-danger-selected-border': 'rgba(27,31,36,0.15)',
-  'btn-danger-selected-shadow': 'inset 0 1px 0 rgba(76,0,20,0.2)',
-  'btn-danger-selected-text': '#ffffff',
-  'btn-danger-text': '#cf222e',
-  'btn-focus-bg': '#f6f8fa',
-  'btn-focus-border': 'rgba(27,31,36,0.15)',
-  'btn-focus-shadow': '0 0 0 3px rgba(9,105,218,0.3)',
-  'btn-hover-bg': '#f3f4f6',
-  'btn-hover-border': 'rgba(27,31,36,0.15)',
-  'btn-inset-shadow': 'inset 0 1px 0 rgba(255,255,255,0.25)',
-  'btn-outline-counter-bg': 'rgba(9,105,218,0.1)',
-  'btn-outline-disabled-bg': '#f6f8fa',
-  'btn-outline-disabled-counter-bg': 'rgba(9,105,218,0.05)',
-  'btn-outline-disabled-text': 'rgba(9,105,218,0.5)',
-  'btn-outline-focus-border': 'rgba(27,31,36,0.15)',
-  'btn-outline-focus-shadow': '0 0 0 3px rgba(5,80,174,0.4)',
-  'btn-outline-hover-bg': '#0969da',
-  'btn-outline-hover-border': 'rgba(27,31,36,0.15)',
-  'btn-outline-hover-counter-bg': 'rgba(255,255,255,0.2)',
-  'btn-outline-hover-inset-shadow': 'inset 0 1px 0 rgba(255,255,255,0.03)',
-  'btn-outline-hover-shadow': '0 1px 0 rgba(27,31,36,0.1)',
-  'btn-outline-hover-text': '#ffffff',
-  'btn-outline-selected-bg': 'hsla(212,92%,42%,1)',
-  'btn-outline-selected-border': 'rgba(27,31,36,0.15)',
-  'btn-outline-selected-shadow': 'inset 0 1px 0 rgba(0,33,85,0.2)',
-  'btn-outline-selected-text': '#ffffff',
-  'btn-outline-text': '#0969da',
-  'btn-primary-bg': '#218bff',
-  'btn-primary-border': 'rgba(27,31,36,0.15)',
-  'btn-primary-counter-bg': 'rgba(255,255,255,0.2)',
-  'btn-primary-disabled-bg': '#80ccff',
-  'btn-primary-disabled-border': 'rgba(27,31,36,0.15)',
-  'btn-primary-disabled-text': 'rgba(255,255,255,0.8)',
-  'btn-primary-focus-bg': '#218bff',
-  'btn-primary-focus-border': 'rgba(27,31,36,0.15)',
-  'btn-primary-focus-shadow': '0 0 0 3px rgba(33,139,255,0.4)',
-  'btn-primary-hover-bg': '#0969da',
-  'btn-primary-hover-border': 'rgba(27,31,36,0.15)',
-  'btn-primary-icon': 'rgba(255,255,255,0.8)',
-  'btn-primary-inset-shadow': 'inset 0 1px 0 rgba(255,255,255,0.03)',
-  'btn-primary-selected-bg': 'hsla(212,92%,43%,1)',
-  'btn-primary-selected-shadow': 'inset 0 1px 0 rgba(0,33,85,0.2)',
-  'btn-primary-shadow': '0 1px 0 rgba(27,31,36,0.1)',
-  'btn-primary-text': '#ffffff',
-  'btn-selected-bg': 'hsla(220,14%,94%,1)',
-  'btn-shadow-active': 'inset 0 0.15em 0.3em rgba(27,31,36,0.15)',
-  'btn-shadow-input-focus': '0 0 0 0.2em rgba(9,105,218,0.3)',
-  'btn-shadow': '0 1px 0 rgba(27,31,36,0.04)',
-  'btn-text': '#24292f',
-  'canvas-default-transparent': 'rgba(255,255,255,0)',
-  'canvas-default': '#ffffff',
-  'canvas-inset': '#f6f8fa',
-  'canvas-overlay': '#ffffff',
-  'canvas-subtle': '#f6f8fa',
-  'checks-ansi-black-bright': '#32383f',
-  'checks-ansi-black': '#24292f',
-  'checks-ansi-blue-bright': '#80ccff',
-  'checks-ansi-blue': '#54aeff',
-  'checks-ansi-cyan-bright': '#b3f0ff',
-  'checks-ansi-cyan': '#76e3ea',
-  'checks-ansi-gray': '#8c959f',
-  'checks-ansi-green-bright': '#80ccff',
-  'checks-ansi-green': '#54aeff',
-  'checks-ansi-magenta-bright': '#d8b9ff',
-  'checks-ansi-magenta': '#c297ff',
-  'checks-ansi-red-bright': '#ffaba8',
-  'checks-ansi-red': '#ff8182',
-  'checks-ansi-white-bright': '#d0d7de',
-  'checks-ansi-white': '#d0d7de',
-  'checks-ansi-yellow-bright': '#eac54f',
-  'checks-ansi-yellow': '#d4a72c',
-  'checks-bg': '#24292f',
-  'checks-btn-hover-bg': 'rgba(255,255,255,0.125)',
-  'checks-btn-hover-icon': '#f6f8fa',
-  'checks-btn-icon': '#afb8c1',
-  'checks-container-border-width': '0px',
-  'checks-donut-error': '#fa4549',
-  'checks-donut-neutral': '#afb8c1',
-  'checks-donut-pending': '#bf8700',
-  'checks-donut-success': '#218bff',
-  'checks-dropdown-bg': '#32383f',
-  'checks-dropdown-border': '#424a53',
-  'checks-dropdown-btn-hover-bg': '#32383f',
-  'checks-dropdown-btn-hover-text': '#f6f8fa',
-  'checks-dropdown-hover-bg': '#424a53',
-  'checks-dropdown-hover-text': '#f6f8fa',
-  'checks-dropdown-shadow': 'rgba(27,31,36,0.3)',
-  'checks-dropdown-text': '#afb8c1',
-  'checks-gate-bg': 'rgba(125,78,0,0.15)',
-  'checks-gate-text': '#d0d7de',
-  'checks-gate-waiting-text': '#d4a72c',
-  'checks-header-border': '#32383f',
-  'checks-header-icon': '#8c959f',
-  'checks-header-label-open-text': '#f6f8fa',
-  'checks-header-label-text': '#d0d7de',
-  'checks-input-bg': '#32383f',
-  'checks-input-focus-text': '#8c959f',
-  'checks-input-placeholder-text': '#8c959f',
-  'checks-input-shadow': 'none',
-  'checks-input-text': '#eaeef2',
-  'checks-line-dt-fm-bg': '#9a6700',
-  'checks-line-dt-fm-text': '#24292f',
-  'checks-line-hover-bg': '#32383f',
-  'checks-line-num-text': 'rgba(140,149,159,0.75)',
-  'checks-line-selected-bg': 'rgba(33,139,255,0.15)',
-  'checks-line-selected-num-text': '#54aeff',
-  'checks-line-text': '#d0d7de',
-  'checks-line-timestamp-text': '#8c959f',
-  'checks-logline-command-text': '#54aeff',
-  'checks-logline-debug-text': '#c297ff',
-  'checks-logline-error-bg': 'rgba(164,14,38,0.15)',
-  'checks-logline-error-num-text': '#ff8182',
-  'checks-logline-error-text': '#d0d7de',
-  'checks-logline-num-text': 'rgba(140,149,159,0.75)',
-  'checks-logline-section-text': '#54aeff',
-  'checks-logline-text': '#8c959f',
-  'checks-logline-warning-bg': 'rgba(125,78,0,0.15)',
-  'checks-logline-warning-num-text': '#d4a72c',
-  'checks-logline-warning-text': '#d0d7de',
-  'checks-run-border-width': '0px',
-  'checks-scrollbar-thumb-bg': '#57606a',
-  'checks-step-error-text': '#ff8182',
-  'checks-step-header-open-bg': '#32383f',
-  'checks-step-warning-text': '#d4a72c',
-  'checks-text-link': '#54aeff',
-  'checks-text-primary': '#f6f8fa',
-  'checks-text-secondary': '#8c959f',
-  'closed-emphasis': '#6e7781',
-  'closed-fg': '#6e7781',
-  'closed-muted': 'rgba(175,184,193,0.4)',
-  'closed-subtle': '#f6f8fa',
-  'codemirror-activeline-bg': 'rgba(234,238,242,0.5)',
-  'codemirror-bg': '#ffffff',
-  'codemirror-cursor': '#24292f',
-  'codemirror-guttermarker-subtle-text': '#6e7781',
-  'codemirror-guttermarker-text': '#ffffff',
-  'codemirror-gutters-bg': '#ffffff',
-  'codemirror-linenumber-text': '#57606a',
-  'codemirror-lines-bg': '#ffffff',
-  'codemirror-matchingbracket-text': '#24292f',
-  'codemirror-selection-bg': 'rgba(84,174,255,0.4)',
-  'codemirror-syntax-comment': '#24292f',
-  'codemirror-syntax-constant': '#0550ae',
-  'codemirror-syntax-entity': '#8250df',
-  'codemirror-syntax-keyword': '#cf222e',
-  'codemirror-syntax-storage': '#cf222e',
-  'codemirror-syntax-string': '#0a3069',
-  'codemirror-syntax-support': '#0550ae',
-  'codemirror-syntax-variable': '#a40e26',
-  'codemirror-text': '#24292f',
-  'counter-border': 'rgba(0,0,0,0)',
-  'danger-emphasis': '#cf222e',
-  'danger-fg': '#cf222e',
-  'danger-muted': 'rgba(255,129,130,0.4)',
-  'danger-subtle': '#FFEBE9',
-  'diff-blob-addition-fg': '#24292f',
-  'diff-blob-addition-line-bg': 'rgba(221,244,255,0.5)',
-  'diff-blob-addition-num-bg': 'rgba(84,174,255,0.4)',
-  'diff-blob-addition-num-text': '#24292f',
-  'diff-blob-addition-word-bg': 'rgba(84,174,255,0.4)',
-  'diff-blob-deletion-fg': '#24292f',
-  'diff-blob-deletion-line-bg': 'rgba(255,235,233,0.5)',
-  'diff-blob-deletion-num-bg': 'rgba(255,129,130,0.4)',
-  'diff-blob-deletion-num-text': '#24292f',
-  'diff-blob-deletion-word-bg': 'rgba(255,171,168,0.5)',
-  'diff-blob-expander-icon': '#57606a',
-  'diff-blob-hunk-num-bg': 'rgba(84,174,255,0.4)',
-  'diff-blob-selected-line-highlight-mix-blend-mode': 'multiply',
-  'diffstat-addition-bg': '#218bff',
-  'diffstat-addition-border': 'rgba(27,31,36,0.15)',
-  'diffstat-deletion-border': 'rgba(27,31,36,0.15)',
-  'done-emphasis': '#8250df',
-  'done-fg': '#8250df',
-  'done-muted': 'rgba(194,151,255,0.4)',
-  'done-subtle': '#fbefff',
-  'fg-default': '#24292f',
-  'fg-muted': '#57606a',
-  'fg-on-emphasis': '#ffffff',
-  'fg-subtle': '#6e7781',
-  'header-bg': '#24292f',
-  'header-divider': '#57606a',
-  'header-logo': '#ffffff',
-  'header-search-bg': '#24292f',
-  'header-search-border': '#57606a',
-  'header-text': 'rgba(255,255,255,0.7)',
-  'input-disabled-bg': 'rgba(175,184,193,0.2)',
-  'marketing-icon-primary': '#218bff',
-  'marketing-icon-secondary': '#54aeff',
-  'menu-bg-active': 'rgba(0,0,0,0)',
-  'mktg-btn-bg': '#1b1f23',
-  'mktg-btn-shadow-focus': 'rgb(0 0 0 / 15%) 0 0 0 4px',
-  'mktg-btn-shadow-hover-muted': 'rgb(0 0 0 / 70%) 0 0 0 2px inset',
-  'mktg-btn-shadow-hover':
-    '0 3px 2px rgba(0, 0, 0, 0.07), 0 7px 5px rgba(0, 0, 0, 0.04), 0 12px 10px rgba(0, 0, 0, 0.03), 0 22px 18px rgba(0, 0, 0, 0.03), 0 42px 33px rgba(0, 0, 0, 0.02), 0 100px 80px rgba(0, 0, 0, 0.02)',
-  'mktg-btn-shadow-outline': 'rgb(0 0 0 / 15%) 0 0 0 1px inset',
-  'neutral-emphasis-plus': '#24292f',
-  'neutral-emphasis': '#6e7781',
-  'neutral-muted': 'rgba(175,184,193,0.2)',
-  'neutral-subtle': 'rgba(234,238,242,0.5)',
-  'open-emphasis': '#fa4549',
-  'open-fg': '#cf222e',
-  'open-muted': 'rgba(255,129,130,0.4)',
-  'open-subtle': '#FFEBE9',
-  'overlay-shadow': '0 1px 3px rgba(27,31,36,0.12), 0 8px 24px rgba(66,74,83,0.12)',
-  'page-header-bg': '#f6f8fa',
-  'prettylights-syntax-brackethighlighter-angle': '#57606a',
-  'prettylights-syntax-brackethighlighter-unmatched': '#82071e',
-  'prettylights-syntax-carriage-return-bg': '#cf222e',
-  'prettylights-syntax-carriage-return-text': '#f6f8fa',
-  'prettylights-syntax-comment': '#6e7781',
-  'prettylights-syntax-constant-other-reference-link': '#0a3069',
-  'prettylights-syntax-constant': '#0550ae',
-  'prettylights-syntax-entity-tag': '#0550ae',
-  'prettylights-syntax-entity': '#8250df',
-  'prettylights-syntax-invalid-illegal-bg': '#82071e',
-  'prettylights-syntax-invalid-illegal-text': '#f6f8fa',
-  'prettylights-syntax-keyword': '#cf222e',
-  'prettylights-syntax-markup-bold': '#24292f',
-  'prettylights-syntax-markup-changed-bg': '#ffcecb',
-  'prettylights-syntax-markup-changed-text': '#a40e26',
-  'prettylights-syntax-markup-deleted-bg': '#FFEBE9',
-  'prettylights-syntax-markup-deleted-text': '#82071e',
-  'prettylights-syntax-markup-heading': '#0550ae',
-  'prettylights-syntax-markup-ignored-bg': '#0550ae',
-  'prettylights-syntax-markup-ignored-text': '#eaeef2',
-  'prettylights-syntax-markup-inserted-bg': '#ddf4ff',
-  'prettylights-syntax-markup-inserted-text': '#0550ae',
-  'prettylights-syntax-markup-italic': '#24292f',
-  'prettylights-syntax-markup-list': '#3b2300',
-  'prettylights-syntax-meta-diff-range': '#8250df',
-  'prettylights-syntax-storage-modifier-import': '#24292f',
-  'prettylights-syntax-string-regexp': '#0550ae',
-  'prettylights-syntax-string': '#0a3069',
-  'prettylights-syntax-sublimelinter-gutter-mark': '#8c959f',
-  'prettylights-syntax-variable': '#a40e26',
-  'primer-border-active': '#FD8C73',
-  'primer-border-contrast': 'rgba(27,31,36,0.1)',
-  'primer-canvas-backdrop': 'rgba(27,31,36,0.5)',
-  'primer-canvas-sticky': 'rgba(255,255,255,0.95)',
-  'primer-fg-disabled': '#8c959f',
-  'primer-shadow-focus': '0 0 0 3px rgba(9,105,218,0.3)',
-  'primer-shadow-highlight': 'inset 0 1px 0 rgba(255,255,255,0.25)',
-  'primer-shadow-inset': 'inset 0 1px 0 rgba(208,215,222,0.2)',
-  'project-gradient-in': '#ffffff',
-  'project-gradient-out': 'rgba(255,255,255,0)',
-  'project-header-bg': '#24292f',
-  'project-sidebar-bg': '#ffffff',
-  'scale-black': '#1b1f24',
-  'scale-blue-0': '#ddf4ff',
-  'scale-blue-1': '#b6e3ff',
-  'scale-blue-2': '#80ccff',
-  'scale-blue-3': '#54aeff',
-  'scale-blue-4': '#218bff',
-  'scale-blue-5': '#0969da',
-  'scale-blue-6': '#0550ae',
-  'scale-blue-7': '#033d8b',
-  'scale-blue-8': '#0a3069',
-  'scale-blue-9': '#002155',
-  'scale-coral-0': '#FFF0EB',
-  'scale-coral-1': '#FFD6CC',
-  'scale-coral-2': '#FFB4A1',
-  'scale-coral-3': '#FD8C73',
-  'scale-coral-4': '#EC6547',
-  'scale-coral-5': '#C4432B',
-  'scale-coral-6': '#9E2F1C',
-  'scale-coral-7': '#801F0F',
-  'scale-coral-8': '#691105',
-  'scale-coral-9': '#510901',
-  'scale-gray-0': '#f6f8fa',
-  'scale-gray-1': '#eaeef2',
-  'scale-gray-2': '#d0d7de',
-  'scale-gray-3': '#afb8c1',
-  'scale-gray-4': '#8c959f',
-  'scale-gray-5': '#6e7781',
-  'scale-gray-6': '#57606a',
-  'scale-gray-7': '#424a53',
-  'scale-gray-8': '#32383f',
-  'scale-gray-9': '#24292f',
-  'scale-green-0': '#ddf4ff',
-  'scale-green-1': '#b6e3ff',
-  'scale-green-2': '#80ccff',
-  'scale-green-3': '#54aeff',
-  'scale-green-4': '#218bff',
-  'scale-green-5': '#0969da',
-  'scale-green-6': '#0550ae',
-  'scale-green-7': '#033d8b',
-  'scale-green-8': '#0a3069',
-  'scale-green-9': '#002155',
-  'scale-orange-0': '#FFEBE9',
-  'scale-orange-1': '#ffcecb',
-  'scale-orange-2': '#ffaba8',
-  'scale-orange-3': '#ff8182',
-  'scale-orange-4': '#fa4549',
-  'scale-orange-5': '#cf222e',
-  'scale-orange-6': '#a40e26',
-  'scale-orange-7': '#82071e',
-  'scale-orange-8': '#660018',
-  'scale-orange-9': '#4c0014',
-  'scale-pink-0': '#ffeff7',
-  'scale-pink-1': '#ffd3eb',
-  'scale-pink-2': '#ffadda',
-  'scale-pink-3': '#ff80c8',
-  'scale-pink-4': '#e85aad',
-  'scale-pink-5': '#bf3989',
-  'scale-pink-6': '#99286e',
-  'scale-pink-7': '#772057',
-  'scale-pink-8': '#611347',
-  'scale-pink-9': '#4d0336',
-  'scale-purple-0': '#fbefff',
-  'scale-purple-1': '#ecd8ff',
-  'scale-purple-2': '#d8b9ff',
-  'scale-purple-3': '#c297ff',
-  'scale-purple-4': '#a475f9',
-  'scale-purple-5': '#8250df',
-  'scale-purple-6': '#6639ba',
-  'scale-purple-7': '#512a97',
-  'scale-purple-8': '#3e1f79',
-  'scale-purple-9': '#2e1461',
-  'scale-red-0': '#FFEBE9',
-  'scale-red-1': '#ffcecb',
-  'scale-red-2': '#ffaba8',
-  'scale-red-3': '#ff8182',
-  'scale-red-4': '#fa4549',
-  'scale-red-5': '#cf222e',
-  'scale-red-6': '#a40e26',
-  'scale-red-7': '#82071e',
-  'scale-red-8': '#660018',
-  'scale-red-9': '#4c0014',
-  'scale-white': '#ffffff',
-  'scale-yellow-0': '#fff8c5',
-  'scale-yellow-1': '#fae17d',
-  'scale-yellow-2': '#eac54f',
-  'scale-yellow-3': '#d4a72c',
-  'scale-yellow-4': '#bf8700',
-  'scale-yellow-5': '#9a6700',
-  'scale-yellow-6': '#7d4e00',
-  'scale-yellow-7': '#633c01',
-  'scale-yellow-8': '#4d2d00',
-  'scale-yellow-9': '#3b2300',
-  'search-keyword-hl': '#fff8c5',
-  'select-menu-backdrop-border': 'rgba(0,0,0,0)',
-  'select-menu-tap-focus-bg': '#b6e3ff',
-  'select-menu-tap-highlight': 'rgba(175,184,193,0.5)',
-  'severe-emphasis': '#cf222e',
-  'severe-fg': '#cf222e',
-  'severe-muted': 'rgba(255,129,130,0.4)',
-  'severe-subtle': '#FFEBE9',
-  'shadow-extra-large': '0 12px 28px rgba(140,149,159,0.3)',
-  'shadow-large': '0 8px 24px rgba(140,149,159,0.2)',
-  'shadow-medium': '0 3px 6px rgba(140,149,159,0.15)',
-  'shadow-small': '0 1px 0 rgba(27,31,36,0.04)',
-  'sidenav-selected-bg': '#ffffff',
-  'sponsors-emphasis': '#bf3989',
-  'sponsors-fg': '#bf3989',
-  'sponsors-muted': 'rgba(255,128,200,0.4)',
-  'sponsors-subtle': '#ffeff7',
-  'success-emphasis': '#218bff',
-  'success-fg': '#0969da',
-  'success-muted': 'rgba(84,174,255,0.4)',
-  'success-subtle': '#ddf4ff',
-  'switch-knob-checked-bg': '#0969da',
-  'switch-knob-checked-disabled-bg': '#6e7781',
-  'switch-track-bg': '#eaeef2',
-  'switch-track-border': '#afb8c1',
-  'switch-track-checked-active-bg': '#80ccff',
-  'switch-track-checked-bg': '#ddf4ff',
-  'switch-track-checked-border': '#54aeff',
-  'switch-track-checked-hover-bg': '#b6e3ff',
-  'timeline-badge-bg': '#eaeef2',
-  'topic-tag-border': 'rgba(0,0,0,0)',
-  'underlinenav-border-hover': 'rgba(175,184,193,0.2)',
-  'underlinenav-icon': '#6e7781',
-);

From a5baa23c77c6384b931733fc377b612232b0b58e Mon Sep 17 00:00:00 2001
From: EnixCoda <enixcoda@gmail.com>
Date: Sun, 29 May 2022 02:00:11 +0800
Subject: [PATCH 37/93] feat: add primer base styles

---
 src/components/MetaBar.tsx |  4 +++-
 src/containers/Theme.tsx   | 15 +++++++++------
 src/styles/index.scss      | 18 +-----------------
 3 files changed, 13 insertions(+), 24 deletions(-)

diff --git a/src/components/MetaBar.tsx b/src/components/MetaBar.tsx
index 3f8449d..0500067 100644
--- a/src/components/MetaBar.tsx
+++ b/src/components/MetaBar.tsx
@@ -33,8 +33,10 @@ export function MetaBar({ metaData }: Props) {
         <BranchName
           href={branchUrl}
           as="a"
-          className={'branch-name'}
           onClick={createAnchorClickHandler(branchUrl)}
+          sx={{
+            color: 'fg.muted',
+          }}
           {...platform.delegatePJAXProps?.()}
         >
           {branchName || '...'}
diff --git a/src/containers/Theme.tsx b/src/containers/Theme.tsx
index c6fa123..3ba2551 100644
--- a/src/containers/Theme.tsx
+++ b/src/containers/Theme.tsx
@@ -1,11 +1,7 @@
-import { ThemeProvider } from '@primer/react'
+import { BaseStyles, ThemeProvider } from '@primer/react'
 import theme from '@primer/react/lib-esm/theme'
 import * as React from 'react'
 
-// <html lang="en" data-color-mode="auto" data-light-theme="light" data-dark-theme="dark" ...
-// <html lang="en" data-color-mode="light" data-light-theme="light" data-dark-theme="dark" ...
-// <html lang="en" data-color-mode="dark" data-light-theme="light" data-dark-theme="dark" ...
-
 const colorModeMap: Record<string, 'night' | 'day'> = {
   dark: 'night',
   light: 'day',
@@ -27,6 +23,9 @@ const validColorSchemes = Object.keys(theme.colorSchemes) as EnumString<
 // BUT: Do not remove the validation, there might be other themes in future
 
 const getPreferenceFromDOM = () => {
+  // <html lang="en" data-color-mode="auto" data-light-theme="light" data-dark-theme="dark" ...
+  // <html lang="en" data-color-mode="light" data-light-theme="light" data-dark-theme="dark" ...
+  // <html lang="en" data-color-mode="dark" data-light-theme="light" data-dark-theme="dark" ...
   const { colorMode, lightTheme, darkTheme } = document.documentElement.dataset
 
   return {
@@ -49,5 +48,9 @@ function useThemePreference() {
 
 export function Theme({ children }: React.PropsWithChildren<{}>) {
   const themePreference = useThemePreference()
-  return <ThemeProvider {...themePreference} {...{ children }} />
+  return (
+    <ThemeProvider {...themePreference}>
+      <BaseStyles>{children}</BaseStyles>
+    </ThemeProvider>
+  )
 }
diff --git a/src/styles/index.scss b/src/styles/index.scss
index b2c3619..5448e2f 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -369,15 +369,6 @@ $minimal-z-index: max(
   @include hide-for-print();
   @include enableThemes;
 
-  @import '~@primer/css/base/index.scss';
-  button {
-    border-radius: 6px;
-    font-weight: 600;
-  }
-  a {
-    color: var(--color-accent-fg);
-  }
-
   $resizeHandlerWidth: 1px;
   .#{$name}-side-bar-body-wrapper {
     position: fixed;
@@ -483,14 +474,6 @@ $minimal-z-index: max(
           }
         }
 
-        .branch-name {
-          margin-left: 4px;
-          padding: 4px 6px; // did not align well for some reason :/
-          color: var(--color-fg-muted);
-          background-color: var(--color-accent-subtle);
-          word-break: break-word;
-        }
-
         .close-side-bar-button-position {
           float: right;
           z-index: 1; // prevent being covered by following elements
@@ -657,6 +640,7 @@ $minimal-z-index: max(
           cursor: pointer;
           white-space: nowrap;
           transition: padding 0.3s ease; // on toggle expansion in search results
+          color: var(--color-accent-fg);
 
           border-bottom: 1px solid var(--color-border-muted);
           &.compact {

From 71151cb4e120f4b72bd47bee963fee5de6c588a3 Mon Sep 17 00:00:00 2001
From: EnixCoda <enixcoda@gmail.com>
Date: Sun, 29 May 2022 02:01:53 +0800
Subject: [PATCH 38/93] fix: override gitea style

---
 src/styles/index.scss | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/styles/index.scss b/src/styles/index.scss
index 5448e2f..cd4d3e9 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -218,6 +218,12 @@ $minimal-z-index: max(
     }
 
     padding-top: 0;
+
+    .#{$name}-side-bar {
+      h1, h2, h3, h4, h5, h6 {
+        margin: 0;
+      }
+    }
   }
 }
 

From ad02ba600e5c14126a30488ea5608189280daef5 Mon Sep 17 00:00:00 2001
From: EnixCoda <enixcoda@gmail.com>
Date: Sun, 29 May 2022 16:39:34 +0800
Subject: [PATCH 39/93] chore: enhance input field styles

---
 src/components/settings/SidebarSettings.tsx |  4 ++--
 src/styles/index.scss                       | 10 ----------
 src/utils/general.ts                        |  3 +++
 3 files changed, 5 insertions(+), 12 deletions(-)

diff --git a/src/components/settings/SidebarSettings.tsx b/src/components/settings/SidebarSettings.tsx
index 20c8335..f46422c 100644
--- a/src/components/settings/SidebarSettings.tsx
+++ b/src/components/settings/SidebarSettings.tsx
@@ -2,7 +2,7 @@ import { Button, TextInput } from '@primer/react'
 import { SimpleToggleField } from 'components/SimpleToggleField'
 import { useConfigs } from 'containers/ConfigsContext'
 import * as React from 'react'
-import { friendlyFormatShortcut } from 'utils/general'
+import { friendlyFormatShortcut, noop } from 'utils/general'
 import { useStateIO } from 'utils/hooks/useStateIO'
 import * as keyHelper from 'utils/keyHelper'
 import { Field } from './Field'
@@ -30,6 +30,7 @@ export function SidebarSettings() {
             onBlur={() => focused.onChange(false)}
             placeholder={focused.value ? 'Press key combination' : 'Click here to set'}
             value={friendlyFormatShortcut(toggleShowSideBarShortcut)}
+            onChange={noop}
             onKeyDown={React.useCallback((e: React.KeyboardEvent<HTMLInputElement>) => {
               e.preventDefault()
               e.stopPropagation()
@@ -37,7 +38,6 @@ export function SidebarSettings() {
               const shortcut = e.key === 'Backspace' ? '' : keyHelper.parseEvent(e)
               useToggleShowSideBarShortcut.onChange(shortcut)
             }, [])} // eslint-disable-line react-hooks/exhaustive-deps
-            readOnly
           />
           {configContext.value.shortcut === toggleShowSideBarShortcut ? (
             <Button
diff --git a/src/styles/index.scss b/src/styles/index.scss
index cd4d3e9..14b1f1e 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -301,14 +301,6 @@ $minimal-z-index: max(
   @include interactive-background($default, $hover, $active, $focus);
 }
 
-// Why does not TextInput get theme properly?
-@mixin input {
-  color: var(--color-fg-default);
-  background-color: var(--color-canvas-default);
-  border-color: var(--color-border-default);
-  box-shadow: var(--color-primer-shadow-inset);
-}
-
 .#{$name}-toggle-show-button-wrapper {
   @include hide-for-print();
 
@@ -941,14 +933,12 @@ $minimal-z-index: max(
         display: flex;
         .access-token-input {
           flex: 1;
-          @include input();
         }
       }
       .toggle-shortcut-input-control {
         display: flex;
         .toggle-shortcut-input {
           flex: 1;
-          @include input();
         }
       }
     }
diff --git a/src/utils/general.ts b/src/utils/general.ts
index e06852f..850244b 100644
--- a/src/utils/general.ts
+++ b/src/utils/general.ts
@@ -209,3 +209,6 @@ export function forOf<T, R>(target: T, callback: <K extends keyof T>(key: K, val
     if (r !== undefined) return r
   }
 }
+
+// eslint-disable-next-line @typescript-eslint/no-empty-function
+export function noop() {}

From 51601100fd4334a81bc4792e47949ef33fbcc952 Mon Sep 17 00:00:00 2001
From: EnixCoda <enixcoda@gmail.com>
Date: Sun, 29 May 2022 17:31:36 +0800
Subject: [PATCH 40/93] fix: make sure all gitako elements within variable
 scope

---
 src/components/SideBar.tsx |  3 ++-
 src/content.tsx            |  8 +++++---
 src/styles/index.scss      |  5 ++++-
 src/utils/DOMHelper.ts     | 20 ++++++++++++--------
 4 files changed, 23 insertions(+), 13 deletions(-)

diff --git a/src/components/SideBar.tsx b/src/components/SideBar.tsx
index 00c193c..7c5918c 100644
--- a/src/components/SideBar.tsx
+++ b/src/components/SideBar.tsx
@@ -41,7 +41,8 @@ export function SideBar() {
     if (hasMetaData) {
       DOMHelper.markGitakoReadyState(true)
       setShowSettings(false)
-      $logoContainerElement.onChange(DOMHelper.insertLogoMountPoint())
+      const mountPointElement = DOMHelper.insertLogoMountPoint()
+      if (mountPointElement) $logoContainerElement.onChange(mountPointElement)
     } else {
       DOMHelper.markGitakoReadyState(false)
     }
diff --git a/src/content.tsx b/src/content.tsx
index f4200f9..44d0ba8 100644
--- a/src/content.tsx
+++ b/src/content.tsx
@@ -2,6 +2,7 @@ import { Gitako } from 'components/Gitako'
 import { platform } from 'platforms'
 import * as React from 'react'
 import { createRoot } from 'react-dom/client'
+import { rootElementID } from 'utils/DOMHelper'
 import './content.scss'
 
 if (platform.resolvePartialMetaData()) {
@@ -14,9 +15,10 @@ if (platform.resolvePartialMetaData()) {
 
 async function init() {
   await injectStyles(browser.runtime.getURL('content.css'))
-  const SideBarElement = document.createElement('div')
-  document.body.appendChild(SideBarElement)
-  createRoot(SideBarElement).render(<Gitako />)
+  const sideBarElement = document.createElement('div')
+  sideBarElement.setAttribute('id', rootElementID)
+  document.body.appendChild(sideBarElement)
+  createRoot(sideBarElement).render(<Gitako />)
 }
 
 // injects a copy of stylesheets so that other extensions(e.g. dark reader) could read
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 14b1f1e..7d0c128 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -301,6 +301,10 @@ $minimal-z-index: max(
   @include interactive-background($default, $hover, $active, $focus);
 }
 
+##{$name}-root {
+  @include enableThemes;
+}
+
 .#{$name}-toggle-show-button-wrapper {
   @include hide-for-print();
 
@@ -365,7 +369,6 @@ $minimal-z-index: max(
 
 .#{$name}-side-bar {
   @include hide-for-print();
-  @include enableThemes;
 
   $resizeHandlerWidth: 1px;
   .#{$name}-side-bar-body-wrapper {
diff --git a/src/utils/DOMHelper.ts b/src/utils/DOMHelper.ts
index c27734c..301560a 100644
--- a/src/utils/DOMHelper.ts
+++ b/src/utils/DOMHelper.ts
@@ -2,6 +2,8 @@
  * this helper helps manipulating DOM
  */
 
+export const rootElementID = 'gitako-root'
+
 export function setGitakoBodyClass(className: string, enable: boolean) {
   const classList = document.body.classList
   if (enable) classList.add(className)
@@ -47,7 +49,8 @@ export function $<T2>(
   existCallback: undefined | null,
   otherwise: () => T2,
 ): HTMLElement | null | T2
-export function $(selector: string, existCallback?: any, otherwise?: any) { // eslint-disable-line @typescript-eslint/no-explicit-any
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function $(selector: string, existCallback?: any, otherwise?: any) {
   const element = document.querySelector(selector)
   if (element) {
     return existCallback ? existCallback(element) : element
@@ -59,13 +62,14 @@ export function $(selector: string, existCallback?: any, otherwise?: any) { // e
  * add the logo element into DOM
  */
 export function insertLogoMountPoint() {
-  const logoID = 'gitako-logo-mount-point'
-  const logoSelector = formatID(logoID)
-  return $(logoSelector, undefined, function createLogoMountPoint() {
-    const logoMountElement = document.createElement('div')
-    logoMountElement.setAttribute('id', logoID)
-    document.body.appendChild(logoMountElement)
-    return logoMountElement
+  return $(formatID(rootElementID), container => {
+    const logoID = 'gitako-logo-mount-point'
+    return $(formatID(logoID), undefined, function createLogoMountPoint() {
+      const logoMountElement = document.createElement('div')
+      logoMountElement.setAttribute('id', logoID)
+      container.appendChild(logoMountElement)
+      return logoMountElement
+    })
   })
 }
 

From a86f78554c6865edd37ed81a691ebdba08a04bd4 Mon Sep 17 00:00:00 2001
From: EnixCoda <enixcoda@gmail.com>
Date: Sun, 29 May 2022 23:27:05 +0800
Subject: [PATCH 41/93] feat: use primer select

---
 src/components/SelectInput.tsx               | 46 ++++++++++++++------
 src/components/settings/FileTreeSettings.tsx | 46 +++++++++-----------
 2 files changed, 54 insertions(+), 38 deletions(-)

diff --git a/src/components/SelectInput.tsx b/src/components/SelectInput.tsx
index ff3a130..9ba17af 100644
--- a/src/components/SelectInput.tsx
+++ b/src/components/SelectInput.tsx
@@ -1,18 +1,44 @@
+import { FormControl, Select, SelectProps } from '@primer/react'
 import * as React from 'react'
+
+export type Option<T> = {
+  key: string
+  label: string
+  value: T
+}
+
 export function SelectInput<T>({
   value,
   onChange,
+  label,
   options,
   ...selectProps
 }: Override<
-  React.DetailedHTMLProps<React.SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>,
+  SelectProps,
   IO<T> & {
+    label: string
     options: Option<T>[]
   }
 >) {
   return (
-    <div className={'select-wrapper'}>
-      <select
+    <FormControl
+      sx={{
+        ':focus-within': {
+          '> span': {
+            // original boxShadow does not look right
+            borderWidth: '2px',
+            boxShadow: 'none',
+            '> select': {
+              paddingLeft: '11px',
+              paddingRight: '11px',
+            },
+          },
+        },
+      }}
+    >
+      <FormControl.Label>{label}</FormControl.Label>
+      <Select
+        block
         onChange={e => {
           const key = e.target.value
           const option = options.find(option => option.key === key)
@@ -22,17 +48,11 @@ export function SelectInput<T>({
         {...selectProps}
       >
         {options.map(option => (
-          <option key={option.key} value={option.key}>
+          <Select.Option key={option.key} value={option.key}>
             {option.label}
-          </option>
+          </Select.Option>
         ))}
-      </select>
-      <span className={'chevron'} />
-    </div>
+      </Select>
+    </FormControl>
   )
 }
-export type Option<T> = {
-  key: string
-  label: string
-  value: T
-}
diff --git a/src/components/settings/FileTreeSettings.tsx b/src/components/settings/FileTreeSettings.tsx
index 96ab893..756571a 100644
--- a/src/components/settings/FileTreeSettings.tsx
+++ b/src/components/settings/FileTreeSettings.tsx
@@ -4,7 +4,6 @@ import { useConfigs } from 'containers/ConfigsContext'
 import * as React from 'react'
 import { Config } from 'utils/config/helper'
 import { Option, SelectInput } from '../SelectInput'
-import { Field } from './Field'
 import { SettingsSection } from './SettingsSection'
 
 const iconOptions: Option<Config['icons']>[] = [
@@ -42,30 +41,27 @@ export function FileTreeSettings() {
   const configContext = useConfigs()
   return (
     <SettingsSection title={'File Tree'}>
-      <Field id="recursive-toggle-folder" title="Toggle folders recursively while holding">
-        <SelectInput
-          id="recursive-toggle-folder"
-          options={recursiveToggleFolderOptions}
-          onChange={v => {
-            configContext.onChange({
-              recursiveToggleFolder: v,
-            })
-          }}
-          value={configContext.value.recursiveToggleFolder}
-        />
-      </Field>
-      <Field title="Icons" id="file-tree-icons">
-        <SelectInput<Config['icons']>
-          id="file-tree-icons"
-          options={iconOptions}
-          onChange={v => {
-            configContext.onChange({
-              icons: v,
-            })
-          }}
-          value={configContext.value.icons}
-        />
-      </Field>
+      <SelectInput
+        label="Toggle folders recursively while holding"
+        options={recursiveToggleFolderOptions}
+        onChange={v => {
+          configContext.onChange({
+            recursiveToggleFolder: v,
+          })
+        }}
+        value={configContext.value.recursiveToggleFolder}
+      />
+
+      <SelectInput<Config['icons']>
+        label="Icons"
+        options={iconOptions}
+        onChange={v => {
+          configContext.onChange({
+            icons: v,
+          })
+        }}
+        value={configContext.value.icons}
+      />
       <SimpleToggleField
         field={{
           key: 'compressSingletonFolder',

From f66e38291f311851caaa8613659dba1f1ce154f8 Mon Sep 17 00:00:00 2001
From: EnixCoda <enixcoda@gmail.com>
Date: Sun, 29 May 2022 23:27:13 +0800
Subject: [PATCH 42/93] feat: use primer checkbox

---
 src/components/SimpleToggleField.tsx | 92 +++++++++++++---------------
 src/utils/config/helper.ts           |  2 +
 2 files changed, 45 insertions(+), 49 deletions(-)

diff --git a/src/components/SimpleToggleField.tsx b/src/components/SimpleToggleField.tsx
index 529a584..e7e0773 100644
--- a/src/components/SimpleToggleField.tsx
+++ b/src/components/SimpleToggleField.tsx
@@ -1,14 +1,13 @@
+import { Checkbox, FormControl } from '@primer/react'
 import { useConfigs } from 'containers/ConfigsContext'
 import * as React from 'react'
-import { Config } from 'utils/config/helper'
-import { Field } from './settings/Field'
+import { Config, ConfigKeys } from 'utils/config/helper'
 
-export type SimpleField<Key extends keyof Config> = {
+export type SimpleField<Key extends ConfigKeys> = {
   key: Key
   label: string
   wikiLink?: string
   tooltip?: string
-  description?: string
   disabled?: boolean
   overwrite?: {
     value: (value: Config[Key]) => boolean
@@ -16,59 +15,54 @@ export type SimpleField<Key extends keyof Config> = {
   }
 }
 
-type Props<Key extends keyof Config> = {
+type Props<Key extends ConfigKeys> = {
   field: SimpleField<Key>
-
-  onChange?(): void
 }
 
-export function SimpleToggleField<Key extends keyof Config>({ field, onChange }: Props<Key>) {
+export function SimpleToggleField<Key extends ConfigKeys>({ field }: Props<Key>) {
   const { overwrite } = field
   const configContext = useConfigs()
   const value = configContext.value[field.key]
+
+  const checked = React.useMemo(
+    () => (overwrite ? overwrite.value(value) : Boolean(value)),
+    [overwrite, value],
+  )
+
+  const handleChange = React.useCallback(
+    (checked: boolean) => {
+      const enabled = checked
+      configContext.onChange({ [field.key]: overwrite ? overwrite.onChange(enabled) : enabled })
+    },
+    [field.key, overwrite, configContext],
+  )
+
   return (
-    <Field
-      id={field.key}
-      title={
-        <>
-          {field.label}{' '}
-          {field.wikiLink ? (
-            <a
-              href={field.wikiLink}
-              title={field.tooltip}
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              (?)
-            </a>
-          ) : field.description ? (
-            <p className={'note'} title={field.tooltip}>
-              {field.description}
-            </p>
-          ) : (
-            field.tooltip && (
-              <span className={'help'} title={field.tooltip}>
-                (?)
-              </span>
-            )
-          )}
-        </>
-      }
-      className={'field-checkbox'}
-      checkbox
-    >
-      <input
-        id={field.key}
-        name={field.key}
-        disabled={field.disabled}
-        type={'checkbox'}
-        onChange={async e => {
-          const enabled = e.currentTarget.checked
-          configContext.onChange({ [field.key]: overwrite ? overwrite.onChange(enabled) : enabled })
-          if (onChange) onChange()
+    <FormControl>
+      <Checkbox
+        sx={{
+          marginTop: '4px', // align label
         }}
-        checked={overwrite ? overwrite.value(value) : Boolean(value)}
+        value={field.key}
+        disabled={field.disabled}
+        onChange={e => handleChange(e.target.checked)}
+        checked={checked}
       />
-    </Field>
+      <FormControl.Label>
+        {field.label}
+        {(field.wikiLink || field.tooltip) && ' '}
+        {field.wikiLink ? (
+          <a href={field.wikiLink} title={field.tooltip} target="_blank" rel="noopener noreferrer">
+            (?)
+          </a>
+        ) : (
+          field.tooltip && (
+            <span className={'help'} title={field.tooltip}>
+              (?)
+            </span>
+          )
+        )}
+      </FormControl.Label>
+    </FormControl>
   )
 }
diff --git a/src/utils/config/helper.ts b/src/utils/config/helper.ts
index ac69b04..bd86a7d 100644
--- a/src/utils/config/helper.ts
+++ b/src/utils/config/helper.ts
@@ -21,6 +21,8 @@ export type Config = {
   restoreExpandedFolders: boolean
 }
 
+export type ConfigKeys = keyof Config
+
 enum configKeys {
   sideBarWidth = 'sideBarWidth',
   shortcut = 'shortcut',

From 0902841928f7bd0fbf30586f7e704e4b93b9cd81 Mon Sep 17 00:00:00 2001
From: EnixCoda <enixcoda@gmail.com>
Date: Mon, 30 May 2022 00:19:31 +0800
Subject: [PATCH 43/93] feat: use primer form

---
 src/components/settings/SidebarSettings.tsx | 120 +++++++++++---------
 src/styles/index.scss                       |   6 -
 2 files changed, 64 insertions(+), 62 deletions(-)

diff --git a/src/components/settings/SidebarSettings.tsx b/src/components/settings/SidebarSettings.tsx
index f46422c..e2139cc 100644
--- a/src/components/settings/SidebarSettings.tsx
+++ b/src/components/settings/SidebarSettings.tsx
@@ -1,79 +1,29 @@
-import { Button, TextInput } from '@primer/react'
+import { Box, Button, FormControl, TextInput } from '@primer/react'
 import { SimpleToggleField } from 'components/SimpleToggleField'
 import { useConfigs } from 'containers/ConfigsContext'
 import * as React from 'react'
 import { friendlyFormatShortcut, noop } from 'utils/general'
 import { useStateIO } from 'utils/hooks/useStateIO'
 import * as keyHelper from 'utils/keyHelper'
-import { Field } from './Field'
 import { SettingsSection } from './SettingsSection'
 
 export function SidebarSettings() {
   const configContext = useConfigs()
-  const useToggleShowSideBarShortcut = useStateIO(configContext.value.shortcut)
-  const { value: toggleShowSideBarShortcut } = useToggleShowSideBarShortcut
-  const focused = useStateIO(false)
-
-  React.useEffect(() => {
-    useToggleShowSideBarShortcut.onChange(configContext.value.shortcut)
-  }, [configContext.value.shortcut]) // eslint-disable-line react-hooks/exhaustive-deps
+  const { sidebarToggleMode } = configContext.value
 
   return (
     <SettingsSection title={'Sidebar'}>
-      <Field id="toggle-sidebar-shortcut" title="Keyboard shortcut to toggle visibility">
-        <div className={'toggle-shortcut-input-control'}>
-          <TextInput
-            id="toggle-sidebar-shortcut"
-            sx={{ marginRight: 1 }}
-            className={'toggle-shortcut-input'}
-            onFocus={() => focused.onChange(true)}
-            onBlur={() => focused.onChange(false)}
-            placeholder={focused.value ? 'Press key combination' : 'Click here to set'}
-            value={friendlyFormatShortcut(toggleShowSideBarShortcut)}
-            onChange={noop}
-            onKeyDown={React.useCallback((e: React.KeyboardEvent<HTMLInputElement>) => {
-              e.preventDefault()
-              e.stopPropagation()
-              // Clear shortcut with backspace
-              const shortcut = e.key === 'Backspace' ? '' : keyHelper.parseEvent(e)
-              useToggleShowSideBarShortcut.onChange(shortcut)
-            }, [])} // eslint-disable-line react-hooks/exhaustive-deps
-          />
-          {configContext.value.shortcut === toggleShowSideBarShortcut ? (
-            <Button
-              disabled={!configContext.value.shortcut}
-              onClick={() => {
-                configContext.onChange({ shortcut: '' })
-              }}
-            >
-              Clear
-            </Button>
-          ) : (
-            <Button
-              onClick={() => {
-                const { value: toggleShowSideBarShortcut } = useToggleShowSideBarShortcut
-                if (typeof toggleShowSideBarShortcut !== 'string') return
-                configContext.onChange({ shortcut: toggleShowSideBarShortcut })
-              }}
-            >
-              Save
-            </Button>
-          )}
-        </div>
-      </Field>
+      <ToggleSidebarShortcutSettings />
       <SimpleToggleField
         field={{
           key: 'intelligentToggle',
           label: 'Auto expand',
-          disabled: configContext.value.sidebarToggleMode === 'float',
+          disabled: sidebarToggleMode === 'float',
           tooltip: `Gitako will expand when exploring source files, pull requests, etc. And collapse otherwise.${
-            configContext.value.sidebarToggleMode === 'float'
-              ? '\nNow disabled as sidebar is in float mode.'
-              : ''
+            sidebarToggleMode === 'float' ? '\nNow disabled as sidebar is in float mode.' : ''
           }`,
           overwrite: {
-            value: enabled =>
-              configContext.value.sidebarToggleMode === 'float' ? false : enabled === null,
+            value: enabled => (sidebarToggleMode === 'float' ? false : enabled === null),
             onChange: checked => (checked ? null : true),
           },
         }}
@@ -81,3 +31,61 @@ export function SidebarSettings() {
     </SettingsSection>
   )
 }
+
+function ToggleSidebarShortcutSettings() {
+  const configContext = useConfigs()
+  const { shortcut } = configContext.value
+  const id = 'toggle-show-sidebar-shortcut'
+
+  React.useEffect(() => {
+    useToggleShowSideBarShortcut.onChange(shortcut)
+  }, [shortcut]) // eslint-disable-line react-hooks/exhaustive-deps
+
+  const useToggleShowSideBarShortcut = useStateIO(shortcut)
+  const { value: toggleShowSideBarShortcut } = useToggleShowSideBarShortcut
+  const focused = useStateIO(false)
+
+  return (
+    <FormControl>
+      <FormControl.Label htmlFor={id}>Keyboard shortcut to toggle visibility</FormControl.Label>
+      <Box display="inline-flex" width="100%">
+        <TextInput
+          id={id}
+          sx={{ marginRight: 1, flex: 1 }}
+          onFocus={() => focused.onChange(true)}
+          onBlur={() => focused.onChange(false)}
+          placeholder={focused.value ? 'Press key combination' : 'Click here to set'}
+          value={friendlyFormatShortcut(toggleShowSideBarShortcut)}
+          onChange={noop}
+          onKeyDown={React.useCallback((e: React.KeyboardEvent<HTMLInputElement>) => {
+            e.preventDefault()
+            e.stopPropagation()
+            // Clear shortcut with backspace
+            const shortcut = e.key === 'Backspace' ? '' : keyHelper.parseEvent(e)
+            useToggleShowSideBarShortcut.onChange(shortcut)
+          }, [])} // eslint-disable-line react-hooks/exhaustive-deps
+        />
+        {shortcut === toggleShowSideBarShortcut ? (
+          <Button
+            disabled={!shortcut}
+            onClick={() => {
+              configContext.onChange({ shortcut: '' })
+            }}
+          >
+            Clear
+          </Button>
+        ) : (
+          <Button
+            onClick={() => {
+              const { value: toggleShowSideBarShortcut } = useToggleShowSideBarShortcut
+              if (typeof toggleShowSideBarShortcut !== 'string') return
+              configContext.onChange({ shortcut: toggleShowSideBarShortcut })
+            }}
+          >
+            Save
+          </Button>
+        )}
+      </Box>
+    </FormControl>
+  )
+}
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 7d0c128..0145491 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -938,12 +938,6 @@ $minimal-z-index: max(
           flex: 1;
         }
       }
-      .toggle-shortcut-input-control {
-        display: flex;
-        .toggle-shortcut-input {
-          flex: 1;
-        }
-      }
     }
 
     .gitako-footer {

From 05642122464c2dc023961b16995d08697e747c69 Mon Sep 17 00:00:00 2001
From: EnixCoda <enixcoda@gmail.com>
Date: Mon, 30 May 2022 00:32:58 +0800
Subject: [PATCH 44/93] chore: deprecate Field

---
 src/components/settings/Field.tsx | 33 ----------------
 src/styles/index.scss             | 66 -------------------------------
 2 files changed, 99 deletions(-)
 delete mode 100644 src/components/settings/Field.tsx

diff --git a/src/components/settings/Field.tsx b/src/components/settings/Field.tsx
deleted file mode 100644
index 87031fe..0000000
--- a/src/components/settings/Field.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import * as React from 'react'
-import { cx } from 'utils/cx'
-
-type Props = {
-  id?: string
-  className?: string
-  checkbox?: boolean
-  title: React.ReactNode
-}
-
-export function Field({
-  className,
-  title,
-  id,
-  checkbox,
-  children,
-}: React.PropsWithChildren<Props>) {
-  return (
-    <div className={cx('field', className)}>
-      {checkbox ? (
-        <>
-          {children}
-          <label htmlFor={id}>{title}</label>
-        </>
-      ) : (
-        <>
-          <label htmlFor={id}>{title}</label>
-          <div>{children}</div>
-        </>
-      )}
-    </div>
-  )
-}
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 0145491..44bf472 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -856,72 +856,6 @@ $minimal-z-index: max(
           &:not(:last-of-type) {
             margin-bottom: 30px;
           }
-
-          .field {
-            margin-bottom: 8px;
-
-            .help {
-              cursor: help;
-            }
-
-            label {
-              display: inline-block;
-              margin-bottom: 0px;
-              font-weight: 600;
-            }
-            input {
-              &:disabled {
-                cursor: not-allowed;
-              }
-            }
-            .select-wrapper {
-              position: relative;
-
-              select {
-                width: 100%;
-                -webkit-appearance: none;
-                -moz-appearance: none;
-                appearance: none;
-                // make it look like text inputs
-                height: 36px;
-                padding: 0 6px;
-                border-radius: 6px;
-                border: 1px solid var(--color-border-default);
-                background: var(--color-canvas-default);
-                color: var(--color-fg-default);
-                box-shadow: var(--color-primer-shadow-inset);
-              }
-
-              .chevron {
-                position: absolute;
-                right: 6px;
-                top: 8px;
-                width: 16px;
-                height: 20px;
-
-                &::before {
-                  width: 16px;
-                  height: 20px;
-                  background-color: var(--color-fg-subtle);
-                  @include pseudo-primer-icon('chevron-down-16');
-                }
-              }
-            }
-            &.field-checkbox {
-              padding-left: 20px;
-              vertical-align: middle;
-              label {
-                margin-bottom: 0;
-              }
-
-              input[type='checkbox'],
-              input[type='radio'] {
-                float: left;
-                margin: 5px 0 0 -20px;
-                vertical-align: middle;
-              }
-            }
-          }
         }
       }
       .link-button {

From ff1bdd6f0f315b1bd1182142694f86b0705da985 Mon Sep 17 00:00:00 2001
From: EnixCoda <enixcoda@gmail.com>
Date: Mon, 30 May 2022 00:51:36 +0800
Subject: [PATCH 45/93] refactor: clean config context read

---
 src/components/SideBar.tsx                    | 10 ++++----
 .../settings/AccessTokenSettings.tsx          | 23 ++++++++++---------
 src/components/settings/FileTreeSettings.tsx  |  5 ++--
 src/components/settings/SidebarSettings.tsx   |  3 +--
 .../hooks/useToggleSideBarWithKeyboard.ts     | 19 ++++++---------
 5 files changed, 28 insertions(+), 32 deletions(-)

diff --git a/src/components/SideBar.tsx b/src/components/SideBar.tsx
index 7c5918c..2c4d101 100644
--- a/src/components/SideBar.tsx
+++ b/src/components/SideBar.tsx
@@ -28,8 +28,8 @@ export function SideBar() {
   const state = useLoadedContext(SideBarStateContext).value
   const configContext = useConfigs()
 
-  const accessToken = configContext.value.accessToken || ''
-  const [baseSize] = React.useState(() => configContext.value.sideBarWidth)
+  const { sideBarWidth } = configContext.value
+  const [baseSize] = React.useState(() => sideBarWidth)
 
   const [showSettings, setShowSettings] = React.useState(false)
   const toggleShowSettings = React.useCallback(() => setShowSettings(show => !show), [])
@@ -52,8 +52,7 @@ export function SideBar() {
     if (detectBrowser() === 'Safari') DOMHelper.markGitakoSafariFlag()
   }, [])
 
-  const sidebarToggleMode = configContext.value.sidebarToggleMode
-  const intelligentToggle = configContext.value.intelligentToggle
+  const { sidebarToggleMode, intelligentToggle } = configContext.value
   const $shouldShow = useStateIO(() =>
     intelligentToggle === null
       ? sidebarToggleMode === 'persistent'
@@ -99,7 +98,7 @@ export function SideBar() {
   const toggleShowSideBar = React.useCallback(() => {
     if (!error) $shouldShow.onChange(show => !show)
   }, [error]) // eslint-disable-line react-hooks/exhaustive-deps
-  useToggleSideBarWithKeyboard(state, configContext, toggleShowSideBar)
+  useToggleSideBarWithKeyboard(state, toggleShowSideBar)
 
   const updateSideBarVisibility = React.useCallback(() => {
     if (intelligentToggle === null && sidebarToggleMode === 'persistent') {
@@ -114,6 +113,7 @@ export function SideBar() {
   usePJAX()
 
   // Hide sidebar when error due to auth but token is set  #128
+  const { accessToken } = configContext.value
   const hideSidebarOnInvalidToken: boolean =
     intelligentToggle === null && Boolean(state === 'error-due-to-auth' && accessToken)
   React.useEffect(() => {
diff --git a/src/components/settings/AccessTokenSettings.tsx b/src/components/settings/AccessTokenSettings.tsx
index b53414a..896157c 100644
--- a/src/components/settings/AccessTokenSettings.tsx
+++ b/src/components/settings/AccessTokenSettings.tsx
@@ -12,8 +12,9 @@ const ACCESS_TOKEN_REGEXP = /^([0-9a-fA-F]+|gh[pousr]_[A-Za-z0-9_]+)$/
 
 export function AccessTokenSettings() {
   const configContext = useConfigs()
-  const hasAccessToken = Boolean(configContext.value.accessToken)
-  const [accessToken, setAccessToken] = React.useState('')
+  const { accessToken } = configContext.value
+  const hasAccessToken = Boolean(accessToken)
+  const [accessTokenInputValue, setAccessTokenInputValue] = React.useState('')
   const useAccessTokenHint = useStateIO<React.ReactNode>('')
   const focusInput = useStateIO(false)
 
@@ -21,12 +22,12 @@ export function AccessTokenSettings() {
 
   React.useEffect(() => {
     // clear input when access token updates
-    setAccessToken('')
-  }, [configContext.value.accessToken])
+    setAccessTokenInputValue('')
+  }, [accessToken])
 
   const onInputAccessToken = React.useCallback(
     ({ currentTarget: { value } }: React.FormEvent<HTMLInputElement>) => {
-      setAccessToken(value)
+      setAccessTokenInputValue(value)
       useAccessTokenHint.onChange(
         ACCESS_TOKEN_REGEXP.test(value) ? '' : 'Gitako does not recognize the token.',
       )
@@ -45,13 +46,13 @@ export function AccessTokenSettings() {
         </span>
       ),
     ) => {
-      if (accessToken) {
-        configContext.onChange({ accessToken })
-        setAccessToken('')
+      if (accessTokenInputValue) {
+        configContext.onChange({ accessToken: accessTokenInputValue })
+        setAccessTokenInputValue('')
         useAccessTokenHint.onChange(hint)
       }
     },
-    [accessToken], // eslint-disable-line react-hooks/exhaustive-deps
+    [accessTokenInputValue], // eslint-disable-line react-hooks/exhaustive-deps
   )
 
   const onPressAccessToken = React.useCallback(
@@ -109,14 +110,14 @@ export function AccessTokenSettings() {
             <TextInput
               sx={{ marginRight: 1 }}
               className={'access-token-input'}
-              value={accessToken}
+              value={accessTokenInputValue}
               placeholder="Or input here manually"
               onFocus={() => focusInput.onChange(true)}
               onBlur={() => focusInput.onChange(false)}
               onChange={onInputAccessToken}
               onKeyPress={onPressAccessToken}
             />
-            <Button onClick={() => saveToken()} disabled={!accessToken}>
+            <Button onClick={() => saveToken()} disabled={!accessTokenInputValue}>
               Save
             </Button>
           </div>
diff --git a/src/components/settings/FileTreeSettings.tsx b/src/components/settings/FileTreeSettings.tsx
index 756571a..dae170a 100644
--- a/src/components/settings/FileTreeSettings.tsx
+++ b/src/components/settings/FileTreeSettings.tsx
@@ -39,6 +39,7 @@ const recursiveToggleFolderOptions: Option<Config['recursiveToggleFolder']>[] =
 
 export function FileTreeSettings() {
   const configContext = useConfigs()
+  const { recursiveToggleFolder, icons } = configContext.value
   return (
     <SettingsSection title={'File Tree'}>
       <SelectInput
@@ -49,7 +50,7 @@ export function FileTreeSettings() {
             recursiveToggleFolder: v,
           })
         }}
-        value={configContext.value.recursiveToggleFolder}
+        value={recursiveToggleFolder}
       />
 
       <SelectInput<Config['icons']>
@@ -60,7 +61,7 @@ export function FileTreeSettings() {
             icons: v,
           })
         }}
-        value={configContext.value.icons}
+        value={icons}
       />
       <SimpleToggleField
         field={{
diff --git a/src/components/settings/SidebarSettings.tsx b/src/components/settings/SidebarSettings.tsx
index e2139cc..952eabc 100644
--- a/src/components/settings/SidebarSettings.tsx
+++ b/src/components/settings/SidebarSettings.tsx
@@ -8,8 +8,7 @@ import * as keyHelper from 'utils/keyHelper'
 import { SettingsSection } from './SettingsSection'
 
 export function SidebarSettings() {
-  const configContext = useConfigs()
-  const { sidebarToggleMode } = configContext.value
+  const { sidebarToggleMode } = useConfigs().value
 
   return (
     <SettingsSection title={'Sidebar'}>
diff --git a/src/utils/hooks/useToggleSideBarWithKeyboard.ts b/src/utils/hooks/useToggleSideBarWithKeyboard.ts
index 19d0a93..ec09ea0 100644
--- a/src/utils/hooks/useToggleSideBarWithKeyboard.ts
+++ b/src/utils/hooks/useToggleSideBarWithKeyboard.ts
@@ -1,27 +1,22 @@
-import { ConfigsContextShape } from 'containers/ConfigsContext'
+import { useConfigs } from 'containers/ConfigsContext'
 import * as React from 'react'
 import * as keyHelper from 'utils/keyHelper'
 import { SideBarState } from '../../containers/SideBarState'
 
-export function useToggleSideBarWithKeyboard(
-  state: SideBarState,
-  configContext: ConfigsContextShape,
-  toggleShowSideBar: () => void,
-) {
-  const isDisabled = state === 'disabled'
+export function useToggleSideBarWithKeyboard(state: SideBarState, toggleShowSideBar: () => void) {
+  const { shortcut } = useConfigs().value
+  const isDisabled = state === 'disabled' || !shortcut
   React.useEffect(
     function attachKeyDown() {
-      if (isDisabled || !configContext.value.shortcut) return
+      if (isDisabled) return
 
       function onKeyDown(e: KeyboardEvent) {
         const keys = keyHelper.parseEvent(e)
-        if (keys === configContext.value.shortcut) {
-          toggleShowSideBar()
-        }
+        if (keys === shortcut) toggleShowSideBar()
       }
       window.addEventListener('keydown', onKeyDown)
       return () => window.removeEventListener('keydown', onKeyDown)
     },
-    [toggleShowSideBar, isDisabled, configContext.value.shortcut],
+    [toggleShowSideBar, isDisabled, shortcut],
   )
 }

From 43aaa3874c34041be3da2327d5e81c064d7ce533 Mon Sep 17 00:00:00 2001
From: EnixCoda <enixcoda@gmail.com>
Date: Wed, 1 Jun 2022 01:18:44 +0800
Subject: [PATCH 46/93] feat: simple config fields

---
 src/components/Inputs/Checkbox.tsx            | 19 ++++++
 src/components/{ => Inputs}/SelectInput.tsx   | 13 ++--
 src/components/SimpleToggleField.tsx          | 68 -------------------
 src/components/settings/FileTreeSettings.tsx  | 43 +++++-------
 src/components/settings/SettingsBar.tsx       |  7 +-
 src/components/settings/SidebarSettings.tsx   |  4 +-
 .../settings/SimpleConfigField/Checkbox.tsx   | 20 ++++++
 .../settings/SimpleConfigField/FieldLabel.tsx | 27 ++++++++
 .../SimpleConfigField/SelectInput.tsx         | 27 ++++++++
 .../settings/SimpleConfigField/index.tsx      | 37 ++++++++++
 10 files changed, 159 insertions(+), 106 deletions(-)
 create mode 100644 src/components/Inputs/Checkbox.tsx
 rename src/components/{ => Inputs}/SelectInput.tsx (89%)
 delete mode 100644 src/components/SimpleToggleField.tsx
 create mode 100644 src/components/settings/SimpleConfigField/Checkbox.tsx
 create mode 100644 src/components/settings/SimpleConfigField/FieldLabel.tsx
 create mode 100644 src/components/settings/SimpleConfigField/SelectInput.tsx
 create mode 100644 src/components/settings/SimpleConfigField/index.tsx

diff --git a/src/components/Inputs/Checkbox.tsx b/src/components/Inputs/Checkbox.tsx
new file mode 100644
index 0000000..ab336bf
--- /dev/null
+++ b/src/components/Inputs/Checkbox.tsx
@@ -0,0 +1,19 @@
+import { Checkbox as PrimerCheckbox, CheckboxProps, FormControl } from '@primer/react';
+import * as React from 'react';
+
+export function Checkbox({
+  label, value, onChange, checked = value, ...rest
+}: Override<CheckboxProps, { label: React.ReactNode; } & IO<boolean>>) {
+  return (
+    <FormControl>
+      <PrimerCheckbox
+        sx={{
+          marginTop: '4px', // align label
+        }}
+        checked={checked}
+        onChange={e => onChange(e.target.checked)}
+        {...rest} />
+      <FormControl.Label>{label}</FormControl.Label>
+    </FormControl>
+  );
+}
diff --git a/src/components/SelectInput.tsx b/src/components/Inputs/SelectInput.tsx
similarity index 89%
rename from src/components/SelectInput.tsx
rename to src/components/Inputs/SelectInput.tsx
index 9ba17af..1e6051a 100644
--- a/src/components/SelectInput.tsx
+++ b/src/components/Inputs/SelectInput.tsx
@@ -7,19 +7,18 @@ export type Option<T> = {
   value: T
 }
 
+export type SelectInputProps<T> = Override<SelectProps, IO<T> & {
+  label: React.ReactNode
+  options: Option<T>[]
+}>
+
 export function SelectInput<T>({
   value,
   onChange,
   label,
   options,
   ...selectProps
-}: Override<
-  SelectProps,
-  IO<T> & {
-    label: string
-    options: Option<T>[]
-  }
->) {
+}: SelectInputProps<T>) {
   return (
     <FormControl
       sx={{
diff --git a/src/components/SimpleToggleField.tsx b/src/components/SimpleToggleField.tsx
deleted file mode 100644
index e7e0773..0000000
--- a/src/components/SimpleToggleField.tsx
+++ /dev/null
@@ -1,68 +0,0 @@
-import { Checkbox, FormControl } from '@primer/react'
-import { useConfigs } from 'containers/ConfigsContext'
-import * as React from 'react'
-import { Config, ConfigKeys } from 'utils/config/helper'
-
-export type SimpleField<Key extends ConfigKeys> = {
-  key: Key
-  label: string
-  wikiLink?: string
-  tooltip?: string
-  disabled?: boolean
-  overwrite?: {
-    value: (value: Config[Key]) => boolean
-    onChange: (checked: boolean) => Config[Key]
-  }
-}
-
-type Props<Key extends ConfigKeys> = {
-  field: SimpleField<Key>
-}
-
-export function SimpleToggleField<Key extends ConfigKeys>({ field }: Props<Key>) {
-  const { overwrite } = field
-  const configContext = useConfigs()
-  const value = configContext.value[field.key]
-
-  const checked = React.useMemo(
-    () => (overwrite ? overwrite.value(value) : Boolean(value)),
-    [overwrite, value],
-  )
-
-  const handleChange = React.useCallback(
-    (checked: boolean) => {
-      const enabled = checked
-      configContext.onChange({ [field.key]: overwrite ? overwrite.onChange(enabled) : enabled })
-    },
-    [field.key, overwrite, configContext],
-  )
-
-  return (
-    <FormControl>
-      <Checkbox
-        sx={{
-          marginTop: '4px', // align label
-        }}
-        value={field.key}
-        disabled={field.disabled}
-        onChange={e => handleChange(e.target.checked)}
-        checked={checked}
-      />
-      <FormControl.Label>
-        {field.label}
-        {(field.wikiLink || field.tooltip) && ' '}
-        {field.wikiLink ? (
-          <a href={field.wikiLink} title={field.tooltip} target="_blank" rel="noopener noreferrer">
-            (?)
-          </a>
-        ) : (
-          field.tooltip && (
-            <span className={'help'} title={field.tooltip}>
-              (?)
-            </span>
-          )
-        )}
-      </FormControl.Label>
-    </FormControl>
-  )
-}
diff --git a/src/components/settings/FileTreeSettings.tsx b/src/components/settings/FileTreeSettings.tsx
index dae170a..24da05d 100644
--- a/src/components/settings/FileTreeSettings.tsx
+++ b/src/components/settings/FileTreeSettings.tsx
@@ -1,10 +1,10 @@
 import { wikiLinks } from 'components/settings/SettingsBar'
-import { SimpleToggleField } from 'components/SimpleToggleField'
-import { useConfigs } from 'containers/ConfigsContext'
+import { SimpleConfigFieldCheckbox } from 'components/settings/SimpleConfigField/Checkbox'
 import * as React from 'react'
 import { Config } from 'utils/config/helper'
-import { Option, SelectInput } from '../SelectInput'
+import { Option } from '../Inputs/SelectInput'
 import { SettingsSection } from './SettingsSection'
+import { SimpleConfigFieldSelect } from './SimpleConfigField/SelectInput'
 
 const iconOptions: Option<Config['icons']>[] = [
   {
@@ -38,32 +38,23 @@ const recursiveToggleFolderOptions: Option<Config['recursiveToggleFolder']>[] =
 ]
 
 export function FileTreeSettings() {
-  const configContext = useConfigs()
-  const { recursiveToggleFolder, icons } = configContext.value
   return (
     <SettingsSection title={'File Tree'}>
-      <SelectInput
-        label="Toggle folders recursively while holding"
+      <SimpleConfigFieldSelect
+        field={{
+          key: 'recursiveToggleFolder',
+          label: 'Toggle folders recursively while holding',
+        }}
         options={recursiveToggleFolderOptions}
-        onChange={v => {
-          configContext.onChange({
-            recursiveToggleFolder: v,
-          })
-        }}
-        value={recursiveToggleFolder}
       />
-
-      <SelectInput<Config['icons']>
-        label="Icons"
+      <SimpleConfigFieldSelect
+        field={{
+          key: 'icons',
+          label: 'Icons',
+        }}
         options={iconOptions}
-        onChange={v => {
-          configContext.onChange({
-            icons: v,
-          })
-        }}
-        value={icons}
       />
-      <SimpleToggleField
+      <SimpleConfigFieldCheckbox
         field={{
           key: 'compressSingletonFolder',
           label: 'Compress singleton folder',
@@ -71,21 +62,21 @@ export function FileTreeSettings() {
           tooltip: 'Merge folders and their only child folder to make UI more compact.',
         }}
       />
-      <SimpleToggleField
+      <SimpleConfigFieldCheckbox
         field={{
           key: 'restoreExpandedFolders',
           label: 'Restore expanded folders',
           tooltip: 'Folders will be expanded again when clear search input',
         }}
       />
-      <SimpleToggleField
+      <SimpleConfigFieldCheckbox
         field={{
           key: 'commentToggle',
           label: 'Show PR file comments',
           tooltip: 'Show number of comments next to file names in Pull Requests.',
         }}
       />
-      <SimpleToggleField
+      <SimpleConfigFieldCheckbox
         field={{
           key: 'compactFileTree',
           label: 'Compact file tree layout',
diff --git a/src/components/settings/SettingsBar.tsx b/src/components/settings/SettingsBar.tsx
index 669993e..a5bff14 100644
--- a/src/components/settings/SettingsBar.tsx
+++ b/src/components/settings/SettingsBar.tsx
@@ -3,11 +3,12 @@ import { platform } from 'platforms'
 import { GitHub } from 'platforms/GitHub'
 import * as React from 'react'
 import { useStateIO } from 'utils/hooks/useStateIO'
-import { SimpleField, SimpleToggleField } from '../SimpleToggleField'
 import { AccessTokenSettings } from './AccessTokenSettings'
 import { FileTreeSettings } from './FileTreeSettings'
 import { SettingsSection } from './SettingsSection'
 import { SidebarSettings } from './SidebarSettings'
+import { SimpleConfigField } from './SimpleConfigField'
+import { SimpleConfigFieldCheckbox } from './SimpleConfigField/Checkbox'
 
 const WIKI_HOME_LINK = 'https://github.com/EnixCoda/Gitako/wiki'
 export const wikiLinks = {
@@ -19,7 +20,7 @@ export const wikiLinks = {
   createAccessToken: `${WIKI_HOME_LINK}/Access-token-for-Gitako`,
 }
 
-const moreFields: SimpleField<'copyFileButton' | 'copySnippetButton' | 'codeFolding'>[] =
+const moreFields: SimpleConfigField<'copyFileButton' | 'copySnippetButton' | 'codeFolding'>[] =
   platform === GitHub
     ? [
         {
@@ -64,7 +65,7 @@ export function SettingsBarContent({ toggleShow }: { toggleShow: () => void }) {
           <SettingsSection title={'More'}>
             {moreFields.map(field => (
               <React.Fragment key={field.key}>
-                <SimpleToggleField field={field} />
+                <SimpleConfigFieldCheckbox field={field} />
               </React.Fragment>
             ))}
 
diff --git a/src/components/settings/SidebarSettings.tsx b/src/components/settings/SidebarSettings.tsx
index 952eabc..588b08a 100644
--- a/src/components/settings/SidebarSettings.tsx
+++ b/src/components/settings/SidebarSettings.tsx
@@ -1,5 +1,5 @@
 import { Box, Button, FormControl, TextInput } from '@primer/react'
-import { SimpleToggleField } from 'components/SimpleToggleField'
+import { SimpleConfigFieldCheckbox } from 'components/settings/SimpleConfigField/Checkbox'
 import { useConfigs } from 'containers/ConfigsContext'
 import * as React from 'react'
 import { friendlyFormatShortcut, noop } from 'utils/general'
@@ -13,7 +13,7 @@ export function SidebarSettings() {
   return (
     <SettingsSection title={'Sidebar'}>
       <ToggleSidebarShortcutSettings />
-      <SimpleToggleField
+      <SimpleConfigFieldCheckbox
         field={{
           key: 'intelligentToggle',
           label: 'Auto expand',
diff --git a/src/components/settings/SimpleConfigField/Checkbox.tsx b/src/components/settings/SimpleConfigField/Checkbox.tsx
new file mode 100644
index 0000000..dc5cfb2
--- /dev/null
+++ b/src/components/settings/SimpleConfigField/Checkbox.tsx
@@ -0,0 +1,20 @@
+import * as React from 'react'
+import { ConfigKeys } from 'utils/config/helper'
+import { SimpleConfigFieldProps, useSimpleConfigFieldIO } from '.'
+import { Checkbox } from '../../Inputs/Checkbox'
+import { FieldLabel } from './FieldLabel'
+
+export function SimpleConfigFieldCheckbox<Key extends ConfigKeys>({
+  field,
+}: SimpleConfigFieldProps<Key>) {
+  const { value, onChange } = useSimpleConfigFieldIO(field) as IO<boolean>
+
+  return (
+    <Checkbox
+      label={<FieldLabel {...field} />}
+      disabled={field.disabled}
+      value={value}
+      onChange={onChange}
+    />
+  )
+}
diff --git a/src/components/settings/SimpleConfigField/FieldLabel.tsx b/src/components/settings/SimpleConfigField/FieldLabel.tsx
new file mode 100644
index 0000000..a1bf242
--- /dev/null
+++ b/src/components/settings/SimpleConfigField/FieldLabel.tsx
@@ -0,0 +1,27 @@
+import * as React from 'react'
+import { ConfigKeys } from 'utils/config/helper'
+import { SimpleConfigField } from '.'
+
+export function FieldLabel<Key extends ConfigKeys>({
+  label,
+  wikiLink,
+  tooltip,
+}: SimpleConfigField<Key>) {
+  return (
+    <>
+      {label}
+      {(wikiLink || tooltip) && ' '}
+      {wikiLink ? (
+        <a href={wikiLink} title={tooltip} target="_blank" rel="noopener noreferrer">
+          (?)
+        </a>
+      ) : (
+        tooltip && (
+          <span className={'help'} title={tooltip}>
+            (?)
+          </span>
+        )
+      )}
+    </>
+  )
+}
diff --git a/src/components/settings/SimpleConfigField/SelectInput.tsx b/src/components/settings/SimpleConfigField/SelectInput.tsx
new file mode 100644
index 0000000..5e185f0
--- /dev/null
+++ b/src/components/settings/SimpleConfigField/SelectInput.tsx
@@ -0,0 +1,27 @@
+import { SelectInput, SelectInputProps } from 'components/Inputs/SelectInput'
+import * as React from 'react'
+import { Config, ConfigKeys } from 'utils/config/helper'
+import {
+  SimpleConfigFieldProps,
+  useSimpleConfigFieldIO
+} from '.'
+import { FieldLabel } from './FieldLabel'
+
+export function SimpleConfigFieldSelect<Key extends ConfigKeys>({
+  field,
+  options,
+}: SimpleConfigFieldProps<Key> & {
+  options: SelectInputProps<Config[Key]>['options']
+}) {
+  const { value, onChange } = useSimpleConfigFieldIO(field)
+
+  return (
+    <SelectInput
+      label={<FieldLabel {...field} />}
+      disabled={field.disabled}
+      value={value}
+      onChange={onChange}
+      options={options}
+    />
+  )
+}
diff --git a/src/components/settings/SimpleConfigField/index.tsx b/src/components/settings/SimpleConfigField/index.tsx
new file mode 100644
index 0000000..bf607b8
--- /dev/null
+++ b/src/components/settings/SimpleConfigField/index.tsx
@@ -0,0 +1,37 @@
+import { useConfigs } from 'containers/ConfigsContext'
+import React from 'react'
+import { Config, ConfigKeys } from 'utils/config/helper'
+
+export type SimpleConfigField<Key extends ConfigKeys> = {
+  label: string
+  wikiLink?: string
+  tooltip?: string
+  key: Key
+  disabled?: boolean
+  overwrite?: {
+    value: (value: Config[Key]) => Config[Key]
+    onChange: (newValue: Config[Key]) => Config[Key]
+  }
+}
+
+export type SimpleConfigFieldProps<Key extends ConfigKeys> = {
+  field: SimpleConfigField<Key>
+}
+
+export function useSimpleConfigFieldIO<Key extends ConfigKeys>(
+  field: SimpleConfigField<Key>,
+): IO<Config[Key]> {
+  const { overwrite } = field
+  const configContext = useConfigs()
+  const value = configContext.value[field.key]
+
+  return {
+    value: React.useMemo(() => (overwrite ? overwrite.value(value) : value), [overwrite, value]),
+    onChange: React.useCallback(
+      (newValue: Config[Key]) => {
+        configContext.onChange({ [field.key]: overwrite ? overwrite.onChange(newValue) : newValue })
+      },
+      [field.key, overwrite, configContext],
+    ),
+  }
+}

From a54c2ee18a7c7d2ca8602cbd08d2c24ee82cca6c Mon Sep 17 00:00:00 2001
From: EnixCoda <enixcoda@gmail.com>
Date: Fri, 3 Jun 2022 13:04:54 +0800
Subject: [PATCH 47/93] build: resolve latest @primer/primitive

---
 package.json | 3 ++-
 yarn.lock    | 7 +------
 2 files changed, 3 insertions(+), 7 deletions(-)

diff --git a/package.json b/package.json
index 51a9d0b..7d1d9b5 100644
--- a/package.json
+++ b/package.json
@@ -118,6 +118,7 @@
   },
   "resolutions": {
     "@types/react": "^18.0.9",
-    "@types/react-dom": "^18.0.3"
+    "@types/react-dom": "^18.0.3",
+    "@primer/primitives": "^7.8.3"
   }
 }
diff --git a/yarn.lock b/yarn.lock
index a908e96..60c9e49 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1992,12 +1992,7 @@
   resolved "https://registry.yarnpkg.com/@primer/octicons-react/-/octicons-react-17.1.0.tgz#a152212e0080b1fda07ceeb3da3f10b467e032ab"
   integrity sha512-LSVCGCdvWvWiU+Yu2iqT2TVLX2EOpLPlU+PY0hoztQ7LFfB9Un5qJi8yooaZ2n6kzetG5FsZLSjwLz3RcMjkjA==
 
-"@primer/primitives@7.6.0":
-  version "7.6.0"
-  resolved "https://registry.yarnpkg.com/@primer/primitives/-/primitives-7.6.0.tgz#942efe38b6e09bf6d0351c045436e628e32c3ddb"
-  integrity sha512-cu28QLjectVf2rT4P7m6zS9v4g4yHtErRuPfsgEWEJhbXVIII6vDBm6elJzYixGpTNxpVtSUNezxUXv16l1ejQ==
-
-"@primer/primitives@^7.8.3":
+"@primer/primitives@7.6.0", "@primer/primitives@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@primer/primitives/-/primitives-7.8.3.tgz#de7e03492cf977e99f2417490d76421db9715e9f"
   integrity sha512-04ZwfJhpZ0QFwDrJfCuLX6iOh0BflWDTvuoRA80lQH9xk0RtIg16INbruwwtnbSgnKKXXRSykRRJ5BbxnqufRA==

From 6c671da52022c8fa4cb496b8b62cd8c54715890c Mon Sep 17 00:00:00 2001
From: EnixCoda <enixcoda@gmail.com>
Date: Mon, 6 Jun 2022 20:51:54 +0800
Subject: [PATCH 48/93] test: add unit test

---
 jest.config.js |  2 +-
 package.json   |  2 ++
 yarn.lock      | 84 ++++++++++++++++++++++++++++++++++++++++----------
 3 files changed, 70 insertions(+), 18 deletions(-)

diff --git a/jest.config.js b/jest.config.js
index fbb7f15..23ca7d6 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -133,7 +133,7 @@ module.exports = {
   // snapshotSerializers: [],
 
   // The test environment that will be used for testing
-  // testEnvironment: 'node',
+  testEnvironment: 'jsdom',
 
   // Options that will be passed to the testEnvironment
   // testEnvironmentOptions: {},
diff --git a/package.json b/package.json
index 7d1d9b5..a1d0f29 100644
--- a/package.json
+++ b/package.json
@@ -54,6 +54,7 @@
     "@babel/preset-react": "^7.16.7",
     "@babel/preset-typescript": "^7.16.7",
     "@sentry/cli": "^1.64.2",
+    "@testing-library/react": "^13.3.0",
     "@types/firefox-webext-browser": "^70.0.1",
     "@types/jest": "^26.0.23",
     "@types/node": "^11.10.4",
@@ -110,6 +111,7 @@
       "plugin:react-hooks/recommended"
     ],
     "ignorePatterns": [
+      "*jest*",
       "scripts"
     ],
     "rules": {
diff --git a/yarn.lock b/yarn.lock
index 60c9e49..0d1cfa0 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -41,6 +41,13 @@
   dependencies:
     "@babel/highlight" "^7.10.3"
 
+"@babel/code-frame@^7.10.4", "@babel/code-frame@^7.16.7", "@babel/code-frame@^7.8.3":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.16.7.tgz#44416b6bd7624b998f5b1af5d470856c40138789"
+  integrity sha512-iAXqUn8IIeBTNd72xsFlgaXHkMBMt6y4HJp1tIaK465CWLT/fG1aqB7ykr95gHHmlBdGbFeWWfyB4NJJ0nmeIg==
+  dependencies:
+    "@babel/highlight" "^7.16.7"
+
 "@babel/code-frame@^7.12.13", "@babel/code-frame@^7.14.5":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.14.5.tgz#23b08d740e83f49c5e59945fbf1b43e80bbf4edb"
@@ -48,13 +55,6 @@
   dependencies:
     "@babel/highlight" "^7.14.5"
 
-"@babel/code-frame@^7.16.7", "@babel/code-frame@^7.8.3":
-  version "7.16.7"
-  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.16.7.tgz#44416b6bd7624b998f5b1af5d470856c40138789"
-  integrity sha512-iAXqUn8IIeBTNd72xsFlgaXHkMBMt6y4HJp1tIaK465CWLT/fG1aqB7ykr95gHHmlBdGbFeWWfyB4NJJ0nmeIg==
-  dependencies:
-    "@babel/highlight" "^7.16.7"
-
 "@babel/compat-data@^7.13.11", "@babel/compat-data@^7.16.8", "@babel/compat-data@^7.17.0", "@babel/compat-data@^7.17.7":
   version "7.17.7"
   resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.17.7.tgz#078d8b833fbbcc95286613be8c716cef2b519fa2"
@@ -1402,6 +1402,13 @@
   dependencies:
     regenerator-runtime "^0.13.2"
 
+"@babel/runtime@^7.12.5":
+  version "7.18.3"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.18.3.tgz#c7b654b57f6f63cf7f8b418ac9ca04408c4579f4"
+  integrity sha512-38Y8f7YUhce/K7RMwTp7m0uCumpv9hZkitCbBClqQIow1qSbCvGkcegKOXpEWCQLfWmevgRiWokZ1GkpfhbZug==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
 "@babel/runtime@^7.6.2":
   version "7.17.9"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.17.9.tgz#d19fbf802d01a8cb6cf053a64e472d42c434ba72"
@@ -2251,11 +2258,39 @@
   dependencies:
     defer-to-connect "^1.0.1"
 
+"@testing-library/dom@^8.5.0":
+  version "8.13.0"
+  resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-8.13.0.tgz#bc00bdd64c7d8b40841e27a70211399ad3af46f5"
+  integrity sha512-9VHgfIatKNXQNaZTtLnalIy0jNZzY35a4S3oi08YAt9Hv1VsfZ/DfA45lM8D/UhtHBGJ4/lGwp0PZkVndRkoOQ==
+  dependencies:
+    "@babel/code-frame" "^7.10.4"
+    "@babel/runtime" "^7.12.5"
+    "@types/aria-query" "^4.2.0"
+    aria-query "^5.0.0"
+    chalk "^4.1.0"
+    dom-accessibility-api "^0.5.9"
+    lz-string "^1.4.4"
+    pretty-format "^27.0.2"
+
+"@testing-library/react@^13.3.0":
+  version "13.3.0"
+  resolved "https://registry.yarnpkg.com/@testing-library/react/-/react-13.3.0.tgz#bf298bfbc5589326bbcc8052b211f3bb097a97c5"
+  integrity sha512-DB79aA426+deFgGSjnf5grczDPiL4taK3hFaa+M5q7q20Kcve9eQottOG5kZ74KEr55v0tU2CQormSSDK87zYQ==
+  dependencies:
+    "@babel/runtime" "^7.12.5"
+    "@testing-library/dom" "^8.5.0"
+    "@types/react-dom" "^18.0.0"
+
 "@tootallnate/once@1":
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/@tootallnate/once/-/once-1.1.2.tgz#ccb91445360179a04e7fe6aff78c00ffc1eeaf82"
   integrity sha512-RbzJvlNzmRq5c3O09UipeuXno4tA1FE6ikOjxZK0tuxVv3412l64l5t1W5pj4+rJq9vpkm/kwiR07aZXnsKPxw==
 
+"@types/aria-query@^4.2.0":
+  version "4.2.2"
+  resolved "https://registry.yarnpkg.com/@types/aria-query/-/aria-query-4.2.2.tgz#ed4e0ad92306a704f9fb132a0cfcf77486dbe2bc"
+  integrity sha512-HnYpAE1Y6kRyKM/XkEuiRQhTHvkzMBurTHnpFLYLBGPIylZNPs9jJcuOOYWxPLJCSEtmZT0Y8rHDokKN7rRTig==
+
 "@types/babel__core@^7.0.0", "@types/babel__core@^7.1.14":
   version "7.1.14"
   resolved "https://registry.yarnpkg.com/@types/babel__core/-/babel__core-7.1.14.tgz#faaeefc4185ec71c389f4501ee5ec84b170cc402"
@@ -2448,7 +2483,7 @@
   dependencies:
     "@types/node" "*"
 
-"@types/react-dom@^18.0.3":
+"@types/react-dom@^18.0.0", "@types/react-dom@^18.0.3":
   version "18.0.3"
   resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.0.3.tgz#a022ea08c75a476fe5e96b675c3e673363853831"
   integrity sha512-1RRW9kst+67gveJRYPxGmVy8eVJ05O43hg77G2j5m76/RFJtMbcfAs2viQ2UNsvvDg8F7OfQZx8qQcl6ymygaQ==
@@ -3090,6 +3125,11 @@ argparse@^2.0.1:
   resolved "https://registry.yarnpkg.com/argparse/-/argparse-2.0.1.tgz#246f50f3ca78a3240f6c997e8a9bd1eac49e4b38"
   integrity sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==
 
+aria-query@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-5.0.0.tgz#210c21aaf469613ee8c9a62c7f86525e058db52c"
+  integrity sha512-V+SM7AbUwJ+EBnB8+DXs0hPZHO0W6pqBcc0dW90OwtVG02PswOu/teuARoLQjdDOH+t9pJgGnW5/Qmouf3gPJg==
+
 arr-diff@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/arr-diff/-/arr-diff-4.0.0.tgz#d6461074febfec71e7e15235761a329a5dc7c520"
@@ -4818,6 +4858,11 @@ doctrine@^3.0.0:
   dependencies:
     esutils "^2.0.2"
 
+dom-accessibility-api@^0.5.9:
+  version "0.5.14"
+  resolved "https://registry.yarnpkg.com/dom-accessibility-api/-/dom-accessibility-api-0.5.14.tgz#56082f71b1dc7aac69d83c4285eef39c15d93f56"
+  integrity sha512-NMt+m9zFMPZe0JcY9gN224Qvk6qLIdqex29clBvc/y75ZBX9YA9wNK3frsYvu2DI1xcCIwxwnX+TlsJ2DSOADg==
+
 dom-serializer@^1.0.1, dom-serializer@^1.3.2:
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-1.3.2.tgz#6206437d32ceefaec7161803230c7a20bc1b4d91"
@@ -8214,6 +8259,11 @@ lru-cache@^6.0.0:
   dependencies:
     yallist "^4.0.0"
 
+lz-string@^1.4.4:
+  version "1.4.4"
+  resolved "https://registry.yarnpkg.com/lz-string/-/lz-string-1.4.4.tgz#c0d8eaf36059f705796e1e344811cf4c498d3a26"
+  integrity sha512-0ckx7ZHRPqb0oUm8zNr+90mtf9DQB60H1wMCjBtfi62Kl3a7JbHob6gA2bC+xRvZoOL+1hzUK8jeuEIQE8svEQ==
+
 make-dir@^2.0.0, make-dir@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-2.1.0.tgz#5f0310e18b8be898cc07009295a30ae41e91e6f5"
@@ -9464,6 +9514,15 @@ pretty-format@^26.0.0, pretty-format@^26.6.2:
     ansi-styles "^4.0.0"
     react-is "^17.0.1"
 
+pretty-format@^27.0.2, pretty-format@^27.5.1:
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-27.5.1.tgz#2181879fdea51a7a5851fb39d920faa63f01d88e"
+  integrity sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==
+  dependencies:
+    ansi-regex "^5.0.1"
+    ansi-styles "^5.0.0"
+    react-is "^17.0.1"
+
 pretty-format@^27.0.6:
   version "27.0.6"
   resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-27.0.6.tgz#ab770c47b2c6f893a21aefc57b75da63ef49a11f"
@@ -9474,15 +9533,6 @@ pretty-format@^27.0.6:
     ansi-styles "^5.0.0"
     react-is "^17.0.1"
 
-pretty-format@^27.5.1:
-  version "27.5.1"
-  resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-27.5.1.tgz#2181879fdea51a7a5851fb39d920faa63f01d88e"
-  integrity sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==
-  dependencies:
-    ansi-regex "^5.0.1"
-    ansi-styles "^5.0.0"
-    react-is "^17.0.1"
-
 process-nextick-args@~2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-2.0.1.tgz#7820d9b16120cc55ca9ae7792680ae7dba6d7fe2"

From dcaa58a31ba64c3277aa76d72c367754aa64d2ce Mon Sep 17 00:00:00 2001
From: EnixCoda <enixcoda@gmail.com>
Date: Fri, 3 Jun 2022 14:29:06 +0800
Subject: [PATCH 49/93] fix: correct type of $

---
 src/platforms/GitHub/DOMHelper.ts | 6 +++---
 src/utils/DOMHelper.ts            | 6 +++---
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/platforms/GitHub/DOMHelper.ts b/src/platforms/GitHub/DOMHelper.ts
index dc42fce..adb2a81 100644
--- a/src/platforms/GitHub/DOMHelper.ts
+++ b/src/platforms/GitHub/DOMHelper.ts
@@ -7,8 +7,8 @@ import { CopyFileButton, copyFileButtonClassName } from './CopyFileButton'
 
 export function resolveMeta(): Partial<MetaData> {
   const metaData = {
-    userName: $('[itemprop="author"] > a[rel="author"]', e => e.textContent?.trim()),
-    repoName: $('[itemprop="name"] > a[href]', e => e.textContent?.trim()),
+    userName: $('[itemprop="author"] > a[rel="author"]', e => e.textContent?.trim()) || undefined,
+    repoName: $('[itemprop="name"] > a[href]', e => e.textContent?.trim()) || undefined,
     branchName: getCurrentBranch(true),
   }
   if (!metaData.userName || !metaData.repoName) {
@@ -65,7 +65,7 @@ export function getCurrentBranch(passive = false) {
 
   const findFileButtonSelector =
     '#js-repo-pjax-container .repository-content .file-navigation a[data-hotkey="t"]'
-  const urlFromFindFileButton: string | undefined = $(
+  const urlFromFindFileButton = $(
     findFileButtonSelector,
     element => (element as HTMLAnchorElement).href,
   )
diff --git a/src/utils/DOMHelper.ts b/src/utils/DOMHelper.ts
index 301560a..be14b24 100644
--- a/src/utils/DOMHelper.ts
+++ b/src/utils/DOMHelper.ts
@@ -38,17 +38,17 @@ export function setBodyIndent(shouldShowGitako: boolean) {
 }
 
 export function $(selector: string): HTMLElement | null
-export function $<T1>(selector: string, existCallback: (element: HTMLElement) => T1): T1
+export function $<T1>(selector: string, existCallback: (element: HTMLElement) => T1): T1 | null
 export function $<T1, T2>(
   selector: string,
   existCallback: (element: HTMLElement) => T1,
   otherwise: () => T2,
-): T1 | T2
+): T1 | T2 | null
 export function $<T2>(
   selector: string,
   existCallback: undefined | null,
   otherwise: () => T2,
-): HTMLElement | null | T2
+): HTMLElement | T2 | null
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export function $(selector: string, existCallback?: any, otherwise?: any) {
   const element = document.querySelector(selector)

From 318f4b6c698a649739ba8d494d6745230970fdc7 Mon Sep 17 00:00:00 2001
From: EnixCoda <enixcoda@gmail.com>
Date: Fri, 3 Jun 2022 14:44:20 +0800
Subject: [PATCH 50/93] feat: enable fast get pull request files in large ones

---
 src/platforms/GitHub/API.ts                   |  2 +-
 src/platforms/GitHub/DOMHelper.ts             | 18 ++++++-
 .../GitHub/getPullRequestTreeData.ts          | 49 ++++++++++++-------
 src/utils/DOMHelper.ts                        |  4 ++
 4 files changed, 53 insertions(+), 20 deletions(-)

diff --git a/src/platforms/GitHub/API.ts b/src/platforms/GitHub/API.ts
index 29f97cf..e9df774 100644
--- a/src/platforms/GitHub/API.ts
+++ b/src/platforms/GitHub/API.ts
@@ -96,7 +96,7 @@ export async function getTreeData(
   return await request(url, { accessToken })
 }
 
-export async function getPullData(
+export async function getPullRequest(
   userName: string,
   repoName: string,
   pullId: string,
diff --git a/src/platforms/GitHub/DOMHelper.ts b/src/platforms/GitHub/DOMHelper.ts
index adb2a81..9cf94a3 100644
--- a/src/platforms/GitHub/DOMHelper.ts
+++ b/src/platforms/GitHub/DOMHelper.ts
@@ -1,7 +1,7 @@
 import { raiseError } from 'analytics'
 import { Clippy, ClippyClassName } from 'components/Clippy'
 import * as React from 'react'
-import { $, formatClass } from 'utils/DOMHelper'
+import { $, formatClass, parseIntFromElement } from 'utils/DOMHelper'
 import { renderReact, run } from 'utils/general'
 import { CopyFileButton, copyFileButtonClassName } from './CopyFileButton'
 
@@ -32,7 +32,7 @@ export function isInCodePage() {
 }
 
 export function isInPullFilesPage() {
-  return $('#files_tab_counter')
+  return $('.tabnav-tab.selected #files_tab_counter')
 }
 
 export function getIssueTitle() {
@@ -277,3 +277,17 @@ export function isNativePRFileTreeShown() {
 export function selectEnterpriseStatHeader() {
   return $('.stats-ui-enabled .server-stats')
 }
+
+export function getPullRequestFilesCount() {
+  return $('#files_tab_counter', parseIntFromElement)
+}
+
+export function getPRDiffTotalStat() {
+  const [added, removed] = [$('#diffstat .color-fg-success'), $('#diffstat .color-fg-danger')].map(
+    e => (e ? parseIntFromElement(e) : null),
+  )
+  return {
+    added,
+    removed,
+  }
+}
diff --git a/src/platforms/GitHub/getPullRequestTreeData.ts b/src/platforms/GitHub/getPullRequestTreeData.ts
index 5c3fe47..de71c98 100644
--- a/src/platforms/GitHub/getPullRequestTreeData.ts
+++ b/src/platforms/GitHub/getPullRequestTreeData.ts
@@ -1,24 +1,42 @@
 import { formatHash } from 'utils/general'
 import * as API from './API'
-import { isInPullFilesPage } from './DOMHelper'
+import { getPRDiffTotalStat, getPullRequestFilesCount, isInPullFilesPage } from './DOMHelper'
 import { processTree } from './index'
 import { getCommentsMap } from './utils'
 
+function checkShouldSafeGet() {
+  const FAST_GET_DIFF_THRESHOLD = 10000
+  const FAST_GET_FILES_THRESHOLD = 200
+  const { added, removed } = getPRDiffTotalStat()
+  const filesCount = getPullRequestFilesCount()
+  return (
+    added === null ||
+    removed === null ||
+    filesCount === null ||
+    (added + removed < FAST_GET_DIFF_THRESHOLD && filesCount < FAST_GET_FILES_THRESHOLD)
+  )
+}
+
 export async function getPullRequestTreeData(
   metaData: Pick<MetaData, 'userName' | 'repoName' | 'branchName'>,
   pullId: string,
   accessToken?: string,
-  useSafeRequest = true,
+  shouldSafeGet = checkShouldSafeGet(),
 ) {
   const { userName, repoName } = metaData
   const [treeData, commentData] = await Promise.all([
-    useSafeRequest
+    shouldSafeGet
       ? safeGetPullRequestTreeData(metaData, pullId, accessToken)
       : fastGetPullRequestTreeData(metaData, pullId, accessToken),
     API.getPullComments(userName, repoName, pullId, accessToken),
   ])
 
-  const docs = await API.getPullPageDocuments(userName, repoName, pullId, isInPullFilesPage() ? document : undefined)
+  const docs = await API.getPullPageDocuments(
+    userName,
+    repoName,
+    pullId,
+    isInPullFilesPage() ? document : undefined,
+  )
   // query all elements at once to make getFileElementHash run faster
   const elementsHavePath = docs.map(doc => doc.querySelectorAll(`[data-path]`))
   const getFileElementHash = (path: string) => {
@@ -87,20 +105,17 @@ async function fastGetPullRequestTreeData(
   pullId: string,
   accessToken?: string,
 ) {
-  const [pullData, treeData] = await Promise.all([
-    API.getPullData(userName, repoName, pullId, accessToken),
-    API.getPullTreeData(
-      userName,
-      repoName,
-      pullId,
-      1,
-      GITHUB_API_RESPONSE_MAX_SIZE_PER_PAGE,
-      accessToken,
-    ),
-  ])
+  const treeData = await API.getPullTreeData(
+    userName,
+    repoName,
+    pullId,
+    1,
+    GITHUB_API_RESPONSE_MAX_SIZE_PER_PAGE,
+    accessToken,
+  )
 
-  const count = pullData.changed_files
-  if (treeData.length < count) {
+  const count = getPullRequestFilesCount()
+  if (count !== null && treeData.length < count) {
     let page = 1
     const restPages = []
     while (page * GITHUB_API_RESPONSE_MAX_SIZE_PER_PAGE < count) {
diff --git a/src/utils/DOMHelper.ts b/src/utils/DOMHelper.ts
index be14b24..cd8383e 100644
--- a/src/utils/DOMHelper.ts
+++ b/src/utils/DOMHelper.ts
@@ -154,3 +154,7 @@ export function formatID(id: string) {
 export function formatClass(className: string) {
   return `.${className}`
 }
+
+export function parseIntFromElement(e: HTMLElement): number {
+  return parseInt((e.innerText || '').replace(/[^0-9]/g, ''))
+}

From 8dbc723b5313b6a4cab5034ff896f20408a91187 Mon Sep 17 00:00:00 2001
From: EnixCoda <enixcoda@gmail.com>
Date: Fri, 3 Jun 2022 15:02:02 +0800
Subject: [PATCH 51/93] chore: optimize settings layout

---
 src/components/Inputs/SelectInput.tsx       |  1 +
 src/components/settings/SettingsBar.tsx     | 37 +++++++++++----------
 src/components/settings/SettingsSection.tsx |  5 +--
 src/styles/index.scss                       |  5 ---
 4 files changed, 24 insertions(+), 24 deletions(-)

diff --git a/src/components/Inputs/SelectInput.tsx b/src/components/Inputs/SelectInput.tsx
index 1e6051a..b2aee5f 100644
--- a/src/components/Inputs/SelectInput.tsx
+++ b/src/components/Inputs/SelectInput.tsx
@@ -33,6 +33,7 @@ export function SelectInput<T>({
             },
           },
         },
+        mb: 1
       }}
     >
       <FormControl.Label>{label}</FormControl.Label>
diff --git a/src/components/settings/SettingsBar.tsx b/src/components/settings/SettingsBar.tsx
index a5bff14..6ebe7c8 100644
--- a/src/components/settings/SettingsBar.tsx
+++ b/src/components/settings/SettingsBar.tsx
@@ -1,3 +1,4 @@
+import { Box } from '@primer/react'
 import { Icon } from 'components/Icon'
 import { platform } from 'platforms'
 import { GitHub } from 'platforms/GitHub'
@@ -56,7 +57,7 @@ export function SettingsBarContent({ toggleShow }: { toggleShow: () => void }) {
           <Icon type={'chevron-down'} className={'hide-settings-icon'} />
         </button>
       </div>
-      <div className={'gitako-settings-bar-content'}>
+      <Box display="grid" gridGap={4} className={'gitako-settings-bar-content'}>
         <div className={'shadow-shelter'} />
         <AccessTokenSettings />
         <SidebarSettings />
@@ -73,23 +74,25 @@ export function SettingsBarContent({ toggleShow }: { toggleShow: () => void }) {
           </SettingsSection>
         )}
         <SettingsSection title={'Talk to the author'}>
-          <a
-            href="https://github.com/EnixCoda/Gitako/issues"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Report bug
-          </a>
-          {' / '}
-          <a
-            href="https://github.com/EnixCoda/Gitako/discussions"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Discuss feature
-          </a>
+          <div>
+            <a
+              href="https://github.com/EnixCoda/Gitako/issues"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              Report bug
+            </a>
+            {' / '}
+            <a
+              href="https://github.com/EnixCoda/Gitako/discussions"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              Discuss feature
+            </a>
+          </div>
         </SettingsSection>
-      </div>
+      </Box>
     </div>
   )
 }
diff --git a/src/components/settings/SettingsSection.tsx b/src/components/settings/SettingsSection.tsx
index 209bd16..caf5a29 100644
--- a/src/components/settings/SettingsSection.tsx
+++ b/src/components/settings/SettingsSection.tsx
@@ -1,3 +1,4 @@
+import { Box } from '@primer/react'
 import * as React from 'react'
 type Props = {
   title?: React.ReactNode
@@ -5,9 +6,9 @@ type Props = {
 
 export function SettingsSection({ title, children }: React.PropsWithChildren<Props>) {
   return (
-    <div className={'settings-section'}>
+    <Box display="grid" gridGap={'2px'} className={'settings-section'}>
       {title && <h3>{title}</h3>}
       {children}
-    </div>
+    </Box>
   )
 }
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 44bf472..c811421 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -852,11 +852,6 @@ $minimal-z-index: max(
           background: var(--color-bg-subtle);
           z-index: 2;
         }
-        .settings-section {
-          &:not(:last-of-type) {
-            margin-bottom: 30px;
-          }
-        }
       }
       .link-button {
         cursor: pointer;

From 1d733fb1cf585f8624632472f890eb4c0d9e6cf9 Mon Sep 17 00:00:00 2001
From: EnixCoda <enixcoda@gmail.com>
Date: Fri, 3 Jun 2022 15:04:11 +0800
Subject: [PATCH 52/93] feat: enable auto expand if native PR file tree is
 collapsed

---
 src/platforms/GitHub/DOMHelper.ts | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/platforms/GitHub/DOMHelper.ts b/src/platforms/GitHub/DOMHelper.ts
index 9cf94a3..714cf65 100644
--- a/src/platforms/GitHub/DOMHelper.ts
+++ b/src/platforms/GitHub/DOMHelper.ts
@@ -271,7 +271,11 @@ export function getPath() {
 }
 
 export function isNativePRFileTreeShown() {
-  return $('file-tree[data-target="diff-layout.fileTree"]')
+  return $('file-tree[data-target="diff-layout.fileTree"]', ele => {
+    // It would be set `display: hidden;` when collapsed
+    const { width, height } = ele.getBoundingClientRect()
+    return width * height > 0
+  })
 }
 
 export function selectEnterpriseStatHeader() {

From 38e5ee718c50b28b2c42d1d5a8120c0109aa9111 Mon Sep 17 00:00:00 2001
From: EnixCoda <enixcoda@gmail.com>
Date: Fri, 3 Jun 2022 19:46:04 +0800
Subject: [PATCH 53/93] chore: rename useVisibleNodesGenerator

---
 ...useSetupTree.tsx => useVisibleNodesGenerator.tsx} | 12 ++++++++----
 src/components/FileExplorer/index.tsx                |  2 +-
 2 files changed, 9 insertions(+), 5 deletions(-)
 rename src/components/FileExplorer/hooks/{useSetupTree.tsx => useVisibleNodesGenerator.tsx} (85%)

diff --git a/src/components/FileExplorer/hooks/useSetupTree.tsx b/src/components/FileExplorer/hooks/useVisibleNodesGenerator.tsx
similarity index 85%
rename from src/components/FileExplorer/hooks/useSetupTree.tsx
rename to src/components/FileExplorer/hooks/useVisibleNodesGenerator.tsx
index 2d41fac..9ddf107 100644
--- a/src/components/FileExplorer/hooks/useSetupTree.tsx
+++ b/src/components/FileExplorer/hooks/useVisibleNodesGenerator.tsx
@@ -14,7 +14,6 @@ export function useVisibleNodesGenerator(metaData: MetaData) {
 
   const catchNetworkErrors = useCatchNetworkError()
   const config = useConfigs().value
-  const accessToken = config.accessToken
   const setStateContext = useLoadedContext(SideBarStateContext).onChange
 
   // Only run when metadata or accessToken changes
@@ -34,7 +33,7 @@ export function useVisibleNodesGenerator(metaData: MetaData) {
             },
             '/',
             true,
-            accessToken,
+            config.accessToken,
           )
           if (shouldAbort()) return
 
@@ -46,7 +45,12 @@ export function useVisibleNodesGenerator(metaData: MetaData) {
               defer,
               compress: config.compressSingletonFolder,
               async getTreeData(path) {
-                const { root } = await platform.getTreeData(metaData, path, false, accessToken)
+                const { root } = await platform.getTreeData(
+                  metaData,
+                  path,
+                  false,
+                  config.accessToken,
+                )
                 return root
               },
             }),
@@ -55,7 +59,7 @@ export function useVisibleNodesGenerator(metaData: MetaData) {
           setStateContext('tree-rendered')
         })
       },
-      [metaData, accessToken], // eslint-disable-line react-hooks/exhaustive-deps
+      [metaData, config.accessToken], // eslint-disable-line react-hooks/exhaustive-deps
     ),
   )
 
diff --git a/src/components/FileExplorer/index.tsx b/src/components/FileExplorer/index.tsx
index ac413b5..c75cb86 100644
--- a/src/components/FileExplorer/index.tsx
+++ b/src/components/FileExplorer/index.tsx
@@ -24,7 +24,7 @@ import { useHandleNodeClick } from './hooks/useOnNodeClick'
 import { useOnSearch } from './hooks/useOnSearch'
 import { useVisibleNodesGeneratorMethods } from './hooks/useOnVisibleNodesGeneratorReady'
 import { useRenderLabelText } from './hooks/useRenderLabelText'
-import { useVisibleNodesGenerator } from './hooks/useSetupTree'
+import { useVisibleNodesGenerator } from './hooks/useVisibleNodesGenerator'
 import { ListView } from './ListView'
 import { useHandleNodeFocus } from './useHandleNodeFocus'
 import { useVisibleNodes } from './useVisibleNodes'

From 5c65f9e7f5d99a8775b5fbcaa974445dc71f8df6 Mon Sep 17 00:00:00 2001
From: EnixCoda <enixcoda@gmail.com>
Date: Fri, 3 Jun 2022 19:46:28 +0800
Subject: [PATCH 54/93] feat: IconButton & RoundIconButton

---
 src/components/IconButton.tsx      | 49 ++++++++++++++++++++++++++++++
 src/components/RoundIconButton.tsx | 16 ++++++++++
 2 files changed, 65 insertions(+)
 create mode 100644 src/components/IconButton.tsx
 create mode 100644 src/components/RoundIconButton.tsx

diff --git a/src/components/IconButton.tsx b/src/components/IconButton.tsx
new file mode 100644
index 0000000..8f22a3a
--- /dev/null
+++ b/src/components/IconButton.tsx
@@ -0,0 +1,49 @@
+import { IconProps } from '@primer/octicons-react'
+import { Box, merge, SxProp, useTheme } from '@primer/react'
+import { getBaseStyles, getSizeStyles, getVariantStyles } from '@primer/react/lib/Button/styles'
+import {
+  IconButtonProps as PrimerIconButtonProps,
+  StyledButton
+} from '@primer/react/lib/Button/types'
+import React from 'react'
+import { is } from 'utils/is'
+
+export type IconButtonProps = PrimerIconButtonProps & {
+  iconSize?: IconProps['size']
+  iconColor?: string
+}
+
+// Modified version of @primer/react/lib/Button/Button.tsx
+// Added better support of colors & size
+
+export function IconButton(props: IconButtonProps) {
+  const {
+    variant = 'default',
+    size = 'medium',
+    iconSize, // grow the icon to the same size as the button
+    iconColor, // extra control of icon color
+    sx: sxProp = {},
+    icon: Icon,
+    ...rest
+  } = props
+  const { theme } = useTheme()
+  const sxStyles = merge.all(
+    [
+      getBaseStyles(theme),
+      getSizeStyles(size, variant, true),
+      getVariantStyles(variant, theme),
+      // Unsatisfied with preset color of the `invisible` variant
+      {
+        color: iconColor || (variant === 'invisible' ? 'fg.subtle' : undefined),
+      },
+      sxProp as SxProp,
+    ].filter(is.not.undefined),
+  )
+  return (
+    <StyledButton sx={sxStyles} {...rest}>
+      <Box as="span" sx={{ display: 'inline-block' }}>
+        <Icon size={iconSize} />
+      </Box>
+    </StyledButton>
+  )
+}
diff --git a/src/components/RoundIconButton.tsx b/src/components/RoundIconButton.tsx
new file mode 100644
index 0000000..ddc2178
--- /dev/null
+++ b/src/components/RoundIconButton.tsx
@@ -0,0 +1,16 @@
+import React from 'react'
+import { IconButton, IconButtonProps } from './IconButton'
+
+export function RoundIconButton(props: IconButtonProps) {
+  return (
+    <IconButton
+      variant="invisible"
+      title={props['aria-label']}
+      {...props}
+      sx={{
+        borderRadius: '20px',
+        ...props.sx,
+      }}
+    />
+  )
+}

From c558eaf35cb6dd29f5415dbd7763937fd3a2b802 Mon Sep 17 00:00:00 2001
From: EnixCoda <enixcoda@gmail.com>
Date: Fri, 3 Jun 2022 21:44:17 +0800
Subject: [PATCH 55/93] feat: is.not

---
 src/utils/is.ts | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/src/utils/is.ts b/src/utils/is.ts
index b2ad89d..9ea15f4 100644
--- a/src/utils/is.ts
+++ b/src/utils/is.ts
@@ -2,6 +2,14 @@ export const is = {
   boolean: (d: unknown): d is boolean => typeof d === 'boolean',
   number: (d: unknown): d is number => typeof d === 'number',
   string: (d: unknown): d is string => typeof d === 'string',
+  not: {
+    undefined: <T>(d: T | undefined): d is T => d !== undefined,
+    null: <T>(d: T | null): d is T => d !== null,
+    true: <T>(d: T | true): d is T => d !== true,
+    false: <T>(d: T | false): d is T => d !== false,
+    number: <T>(d: T | number): d is T => typeof d !== 'number',
+    string: <T>(d: T | string): d is T => typeof d !== 'string',
+  },
   JSON: {
     object(d: unknown): d is JSONObject {
       return (typeof d === 'object' && d && !Array.isArray(d)) || false

From 10668b6606753f7221da32c2bd5d3ad67c9a4692 Mon Sep 17 00:00:00 2001
From: EnixCoda <enixcoda@gmail.com>
Date: Fri, 3 Jun 2022 23:34:09 +0800
Subject: [PATCH 56/93] feat: optimize icons

---
 src/components/FileExplorer/DiffStatGraph.tsx | 28 +++---
 src/components/FileExplorer/Node.tsx          |  7 +-
 .../FileExplorer/hooks/useNodeRenderers.tsx   |  3 +-
 src/components/{settings => }/Footer.tsx      | 14 +--
 src/components/Icon.tsx                       | 28 ++----
 src/components/LoadingIndicator.tsx           |  4 +-
 src/components/ResizeHandler.tsx              |  3 +-
 src/components/SideBar.tsx                    | 37 ++++----
 src/components/settings/SettingsBar.tsx       | 13 ++-
 .../settings/SimpleConfigField/FieldLabel.tsx | 27 ++++--
 src/styles/index.scss                         | 87 +++----------------
 11 files changed, 109 insertions(+), 142 deletions(-)
 rename src/components/{settings => }/Footer.tsx (62%)

diff --git a/src/components/FileExplorer/DiffStatGraph.tsx b/src/components/FileExplorer/DiffStatGraph.tsx
index 2a93095..9d055fa 100644
--- a/src/components/FileExplorer/DiffStatGraph.tsx
+++ b/src/components/FileExplorer/DiffStatGraph.tsx
@@ -1,7 +1,22 @@
+import {
+  DiffAddedIcon,
+  DiffIgnoredIcon,
+  DiffModifiedIcon,
+  DiffRemovedIcon,
+  DiffRenamedIcon
+} from '@primer/octicons-react'
 import * as React from 'react'
 import { resolveDiffGraphMeta } from 'utils/general'
 import { Icon } from '../Icon'
 
+const iconMap = {
+  added: DiffAddedIcon,
+  ignored: DiffIgnoredIcon,
+  modified: DiffModifiedIcon,
+  removed: DiffRemovedIcon,
+  renamed: DiffRenamedIcon,
+}
+
 export function DiffStatGraph({
   diff: { status, changes, additions, deletions },
 }: {
@@ -19,18 +34,7 @@ export function DiffStatGraph({
 
   return (
     <span className={'diff-stat-graph'}>
-      <Icon
-        className={status}
-        type={
-          {
-            added: 'diffAdded',
-            ignored: 'diffIgnored',
-            modified: 'diffModified',
-            removed: 'diffRemoved',
-            renamed: 'diffRenamed',
-          }[status]
-        }
-      />
+      <Icon className={status} IconComponent={iconMap[status]} />
       {children}
     </span>
   )
diff --git a/src/components/FileExplorer/Node.tsx b/src/components/FileExplorer/Node.tsx
index 1f9800b..4244d75 100644
--- a/src/components/FileExplorer/Node.tsx
+++ b/src/components/FileExplorer/Node.tsx
@@ -77,17 +77,18 @@ const NodeItemIcon = React.memo(function NodeItemIcon({
     () => (node.type === 'tree' ? getFolderIconURL(node, open) : getFileIconURL(node)),
     [node, open],
   )
+  const iconType = React.useMemo(() => getIconType(node), [node])
 
-  if (icons === 'native') return <Icon type={getIconType(node)} />
+  if (icons === 'native') return <Icon type={iconType} />
   return (
     <>
       <Icon
         className={'node-item-type-icon'}
         placeholder={node.type !== 'tree'}
-        type={loading ? 'loading' : getIconType(node)}
+        type={loading ? 'loading' : iconType}
       />
       {node.type === 'commit' ? (
-        <Icon type={getIconType(node)} />
+        <Icon type={iconType} />
       ) : (
         <img alt={node.name} className={cx('node-item-icon', { dim: icons === 'dim' })} src={src} />
       )}
diff --git a/src/components/FileExplorer/hooks/useNodeRenderers.tsx b/src/components/FileExplorer/hooks/useNodeRenderers.tsx
index 08bf1e9..be6aafb 100644
--- a/src/components/FileExplorer/hooks/useNodeRenderers.tsx
+++ b/src/components/FileExplorer/hooks/useNodeRenderers.tsx
@@ -1,3 +1,4 @@
+import { CommentIcon } from '@primer/octicons-react'
 import { useConfigs } from 'containers/ConfigsContext'
 import * as React from 'react'
 import { isNotFalsy } from 'utils/general'
@@ -42,7 +43,7 @@ export function useRenderFileCommentAmounts() {
           node.comments.active
         } active, ${node.comments.resolved} resolved`}
       >
-        <Icon type={'comment'} /> {node.comments.active > 9 ? '9+' : node.comments.active}
+        <Icon IconComponent={CommentIcon} /> {node.comments.active > 9 ? '9+' : node.comments.active}
       </span>
     ) : null
   }
diff --git a/src/components/settings/Footer.tsx b/src/components/Footer.tsx
similarity index 62%
rename from src/components/settings/Footer.tsx
rename to src/components/Footer.tsx
index 7542476..87b27e2 100644
--- a/src/components/settings/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -1,8 +1,9 @@
+import { GearIcon } from '@primer/octicons-react'
 import { Link } from '@primer/react'
-import { Icon } from 'components/Icon'
 import { VERSION } from 'env'
 import * as React from 'react'
-import { wikiLinks } from './SettingsBar'
+import { RoundIconButton } from './RoundIconButton'
+import { wikiLinks } from './settings/SettingsBar'
 
 type Props = {
   toggleShowSettings: () => void
@@ -21,9 +22,12 @@ export function Footer(props: Props) {
       >
         {VERSION}
       </Link>
-      <button className={'settings-button'} onClick={toggleShowSettings}>
-        <Icon type={'gear'} className={'show-settings-icon'} />
-      </button>
+      <RoundIconButton
+        aria-label={'settings'}
+        icon={GearIcon}
+        iconColor="fg.muted"
+        onClick={toggleShowSettings}
+      />
     </div>
   )
 }
diff --git a/src/components/Icon.tsx b/src/components/Icon.tsx
index 46eabf9..2da8150 100644
--- a/src/components/Icon.tsx
+++ b/src/components/Icon.tsx
@@ -61,14 +61,7 @@ const typeToIconComponentMap: {
 } = {
   search: 'Search',
   loading: 'Clock',
-  hourglass: 'Hourglass',
   submodule: 'Submodule',
-  grabber: 'Grabber',
-  comment: 'Comment',
-  x: 'X',
-  pin: 'Pin',
-  tab: 'Tab',
-  gear: 'Gear',
   diff: 'Diff',
   diffAdded: 'DiffAdded',
   diffIgnored: 'DiffIgnored',
@@ -76,7 +69,6 @@ const typeToIconComponentMap: {
   diffRemoved: 'DiffRemoved',
   diffRenamed: 'DiffRenamed',
   folder: 'ChevronRight',
-  'chevron-down': 'ChevronDown',
   'go-to': 'Reply',
   '.zip': 'FileZip',
   '.rar': 'FileZip',
@@ -99,7 +91,9 @@ const typeToIconComponentMap: {
 }
 
 type Props = {
-  type: string
+  type?: keyof typeof typeToIconComponentMap
+  name?: keyof typeof iconToComponentMap
+  IconComponent?: React.ComponentType<IconProps>
   className?: string
   placeholder?: boolean
   onClick?: (event: React.MouseEvent<HTMLElement>) => void
@@ -107,19 +101,15 @@ type Props = {
 
 export const Icon = React.memo(function Icon({
   type,
-  className = undefined,
   placeholder,
+  className = undefined,
+  name = (type && typeToIconComponentMap[type]) || defaultIcon,
+  IconComponent = iconToComponentMap[name],
   ...otherProps
 }: Props) {
-  let children: React.ReactNode = null
-  if (!placeholder) {
-    const name = typeToIconComponentMap[type] || defaultIcon
-    const IconComponent = iconToComponentMap[name]
-    children = <IconComponent className={cx('octicon', name)} {...otherProps} />
-  }
   return (
-    <div className={cx('octicon-wrapper', className)} {...otherProps}>
-      {children}
-    </div>
+    <span className={cx('octicon-wrapper', className)} {...otherProps}>
+      {placeholder ? null : <IconComponent className={cx('octicon', name)} {...otherProps} />}
+    </span>
   )
 })
diff --git a/src/components/LoadingIndicator.tsx b/src/components/LoadingIndicator.tsx
index c0d0dad..4295a83 100644
--- a/src/components/LoadingIndicator.tsx
+++ b/src/components/LoadingIndicator.tsx
@@ -1,4 +1,4 @@
-import { Icon } from 'components/Icon'
+import { HourglassIcon } from '@primer/octicons-react'
 import * as React from 'react'
 
 type Props = {
@@ -8,7 +8,7 @@ export function LoadingIndicator({ text }: Props) {
   return (
     <div className={'loading-indicator-container'}>
       <div className={'loading-indicator'}>
-        <Icon className={'loading-indicator-icon'} type={'hourglass'} />
+        <HourglassIcon className={'loading-indicator-icon'} />
         {text}
       </div>
     </div>
diff --git a/src/components/ResizeHandler.tsx b/src/components/ResizeHandler.tsx
index b8513a9..43e5b65 100644
--- a/src/components/ResizeHandler.tsx
+++ b/src/components/ResizeHandler.tsx
@@ -1,3 +1,4 @@
+import { GrabberIcon } from '@primer/octicons-react'
 import { Icon } from 'components/Icon'
 import * as React from 'react'
 import { ResizeState, useResizeHandler } from '../utils/hooks/useResizeHandler'
@@ -21,7 +22,7 @@ export function ResizeHandler({ onResize, onResetSize, onResizeStateChange, size
       onDoubleClick={onResetSize}
       style={style}
     >
-      <Icon type={'grabber'} className={'grabber-icon'} size={20} />
+      <Icon IconComponent={GrabberIcon} />
     </div>
   )
 }
diff --git a/src/components/SideBar.tsx b/src/components/SideBar.tsx
index 2c4d101..836e81b 100644
--- a/src/components/SideBar.tsx
+++ b/src/components/SideBar.tsx
@@ -1,8 +1,9 @@
+import { PinIcon, TabIcon } from '@primer/octicons-react'
 import { AccessDeniedDescription } from 'components/AccessDeniedDescription'
 import { FileExplorer } from 'components/FileExplorer'
+import { Footer } from 'components/Footer'
 import { MetaBar } from 'components/MetaBar'
 import { Portal } from 'components/Portal'
-import { Footer } from 'components/settings/Footer'
 import { SideBarBodyWrapper } from 'components/SideBarBodyWrapper'
 import { ToggleShowButton } from 'components/ToggleShowButton'
 import { useConfigs } from 'containers/ConfigsContext'
@@ -19,8 +20,8 @@ import { RepoContext } from '../containers/RepoContext'
 import { SideBarStateContext } from '../containers/SideBarState'
 import { Theme } from '../containers/Theme'
 import { useToggleSideBarWithKeyboard } from '../utils/hooks/useToggleSideBarWithKeyboard'
-import { Icon } from './Icon'
 import { LoadingIndicator } from './LoadingIndicator'
+import { RoundIconButton } from './RoundIconButton'
 import { SettingsBarContent } from './settings/SettingsBar'
 
 export function SideBar() {
@@ -151,27 +152,29 @@ export function SideBar() {
               <div className={'header'}>
                 <div className={'close-side-bar-button-position'}>
                   {sidebarToggleMode === 'persistent' && (
-                    <button
-                      title={'Collapse sidebar'}
-                      className={'close-side-bar-button'}
+                    <RoundIconButton
+                      icon={TabIcon}
+                      aria-label={'Collapse sidebar'}
+                      sx={{
+                        transform: 'rotateY(180deg)',
+                      }}
                       onClick={toggleShowSideBar}
-                    >
-                      <Icon className={'action-icon'} type={'tab'} />
-                    </button>
+                    />
                   )}
-                  <button
-                    title={'Toggle sidebar dock mode between float and persistent'}
-                    className={cx('close-side-bar-button', {
-                      active: sidebarToggleMode === 'persistent',
-                    })}
+                  <RoundIconButton
+                    icon={PinIcon}
+                    aria-label={'Toggle sidebar dock mode between float and persistent'}
+                    iconColor={sidebarToggleMode === 'persistent' ? 'fg.default' : undefined}
+                    sx={{
+                      transform: 'rotateY(180deg)',
+                    }}
                     onClick={() =>
                       configContext.onChange({
-                        sidebarToggleMode: sidebarToggleMode === 'float' ? 'persistent' : 'float',
+                        sidebarToggleMode:
+                          sidebarToggleMode === 'persistent' ? 'float' : 'persistent',
                       })
                     }
-                  >
-                    <Icon className={'action-icon'} type={'pin'} />
-                  </button>
+                  />
                 </div>
                 {metaData && <MetaBar metaData={metaData} />}
               </div>
diff --git a/src/components/settings/SettingsBar.tsx b/src/components/settings/SettingsBar.tsx
index 6ebe7c8..5698c07 100644
--- a/src/components/settings/SettingsBar.tsx
+++ b/src/components/settings/SettingsBar.tsx
@@ -1,5 +1,6 @@
+import { ChevronDownIcon } from '@primer/octicons-react'
 import { Box } from '@primer/react'
-import { Icon } from 'components/Icon'
+import { RoundIconButton } from 'components/RoundIconButton'
 import { platform } from 'platforms'
 import { GitHub } from 'platforms/GitHub'
 import * as React from 'react'
@@ -53,9 +54,13 @@ export function SettingsBarContent({ toggleShow }: { toggleShow: () => void }) {
     <div className={'gitako-settings-bar'}>
       <div className={'gitako-settings-bar-header'}>
         <h2 className={'gitako-settings-bar-title'}>Settings</h2>
-        <button className={'settings-button'} onClick={toggleShow}>
-          <Icon type={'chevron-down'} className={'hide-settings-icon'} />
-        </button>
+        <RoundIconButton
+          aria-label="Close settings"
+          onClick={toggleShow}
+          size="medium"
+          icon={ChevronDownIcon}
+          color="fg.default"
+        />
       </div>
       <Box display="grid" gridGap={4} className={'gitako-settings-bar-content'}>
         <div className={'shadow-shelter'} />
diff --git a/src/components/settings/SimpleConfigField/FieldLabel.tsx b/src/components/settings/SimpleConfigField/FieldLabel.tsx
index a1bf242..7953830 100644
--- a/src/components/settings/SimpleConfigField/FieldLabel.tsx
+++ b/src/components/settings/SimpleConfigField/FieldLabel.tsx
@@ -1,3 +1,5 @@
+import { InfoIcon, LinkExternalIcon } from '@primer/octicons-react'
+import { Box } from '@primer/react'
 import * as React from 'react'
 import { ConfigKeys } from 'utils/config/helper'
 import { SimpleConfigField } from '.'
@@ -12,14 +14,29 @@ export function FieldLabel<Key extends ConfigKeys>({
       {label}
       {(wikiLink || tooltip) && ' '}
       {wikiLink ? (
-        <a href={wikiLink} title={tooltip} target="_blank" rel="noopener noreferrer">
-          (?)
+        <a
+          className={'help'}
+          href={wikiLink}
+          title={tooltip}
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <LinkExternalIcon size="small" />
         </a>
       ) : (
         tooltip && (
-          <span className={'help'} title={tooltip}>
-            (?)
-          </span>
+          <Box
+            as="span"
+            sx={{
+              '.octicon': {
+                color: 'fg.subtle',
+              },
+            }}
+            className={'help'}
+            title={tooltip}
+          >
+            <InfoIcon size="small" />
+          </Box>
         )
       )}
     </>
diff --git a/src/styles/index.scss b/src/styles/index.scss
index c811421..c797a3b 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -220,7 +220,12 @@ $minimal-z-index: max(
     padding-top: 0;
 
     .#{$name}-side-bar {
-      h1, h2, h3, h4, h5, h6 {
+      h1,
+      h2,
+      h3,
+      h4,
+      h5,
+      h6 {
         margin: 0;
       }
     }
@@ -409,14 +414,7 @@ $minimal-z-index: max(
       background: var(--color-bg-subtle);
       border-left: 1px solid var(--color-border-default);
     }
-
-    .octicon.Grabber {
-      margin-left: -2px;
-      width: 20px;
-      font-size: 0;
-    }
   }
-
   .#{$name}-side-bar-body {
     $button-size: 32px;
     position: relative;
@@ -426,20 +424,9 @@ $minimal-z-index: max(
     flex-direction: column;
     background: var(--color-bg-subtle);
     border-left: 1px solid var(--color-border-default);
-
-    .octicon {
-      transition: transform 0.3s ease;
-      color: var(--color-fg-subtle);
-      width: 100%;
-      height: 100%;
-    }
-
-    .octicon-color {
-      color: var(--color-fg-subtle);
-    }
-
     .octicon-wrapper {
       display: inline-block;
+      color: var(--color-fg-subtle);
       width: 16px;
       min-width: 16px; // prevent shrink when sidebar is narrow
       text-align: center;
@@ -478,41 +465,6 @@ $minimal-z-index: max(
         .close-side-bar-button-position {
           float: right;
           z-index: 1; // prevent being covered by following elements
-
-          .close-side-bar-button {
-            @include icon-button;
-            width: $button-size;
-            height: $button-size;
-            border-radius: $button-size;
-
-            // feedback to click should be instant
-            &:not(:active) {
-              transition: background linear 0.3s;
-            }
-
-            &.active .octicon {
-              color: var(--color-fg-default);
-            }
-
-            .action-icon {
-              color: var(--color-fg-subtle);
-              width: 20px;
-              height: 20px;
-              text-align: center;
-              .octicon {
-                width: 100%;
-                height: 100%;
-              }
-              .Pin,
-              .Tab {
-                transform: rotateY(180deg);
-              }
-            }
-          }
-
-          .close-side-bar-button + .close-side-bar-button {
-            margin-left: 4px;
-          }
         }
       }
 
@@ -536,11 +488,7 @@ $minimal-z-index: max(
             height: 20px;
             margin-right: 4px;
 
-            .octicon {
-              width: 20px;
-              height: 20px;
-              animation: pulse-rotate 1.8s infinite ease;
-            }
+            animation: pulse-rotate 1.8s infinite ease;
           }
         }
       }
@@ -755,6 +703,9 @@ $minimal-z-index: max(
                   height: 10px;
                   margin: 0 1px;
                   border-radius: 2px;
+                }
+
+                .diff-stat-graph-no-change {
                   background: var(--color-neutral-emphasis);
                 }
 
@@ -861,6 +812,9 @@ $minimal-z-index: max(
       .hint {
         color: var(--color-fg-subtle);
       }
+      .help {
+        cursor: help;
+      }
       .access-token-input-control {
         display: flex;
         .access-token-input {
@@ -881,19 +835,6 @@ $minimal-z-index: max(
         color: var(--color-fg-muted);
       }
     }
-
-    .settings-button {
-      @include icon-button();
-      $size: 32px;
-      width: $size;
-      height: $size;
-      border-radius: $size;
-      user-select: none;
-
-      .octicon-wrapper {
-        width: 18px;
-      }
-    }
   }
 }
 

From 5b41832f784d974df3dbf1a1775f0163a9fc90bf Mon Sep 17 00:00:00 2001
From: EnixCoda <enixcoda@gmail.com>
Date: Sat, 4 Jun 2022 00:47:29 +0800
Subject: [PATCH 57/93] feat: improve PR file tree resolution perf

> 100 times if PR has >100k changes
---
 src/platforms/GitHub/getPullRequestTreeData.ts | 15 ++++++---------
 1 file changed, 6 insertions(+), 9 deletions(-)

diff --git a/src/platforms/GitHub/getPullRequestTreeData.ts b/src/platforms/GitHub/getPullRequestTreeData.ts
index de71c98..f87ee50 100644
--- a/src/platforms/GitHub/getPullRequestTreeData.ts
+++ b/src/platforms/GitHub/getPullRequestTreeData.ts
@@ -39,19 +39,16 @@ export async function getPullRequestTreeData(
   )
   // query all elements at once to make getFileElementHash run faster
   const elementsHavePath = docs.map(doc => doc.querySelectorAll(`[data-path]`))
-  const getFileElementHash = (path: string) => {
-    let e
+  const map = new Map<string, string>()
     for (const group of elementsHavePath) {
       for (let i = 0; i < group.length; i++) {
         const element = group[i]
-        if (element.getAttribute('data-path')?.startsWith(path)) {
-          e = element
-          break
-        }
+      const id = element.parentElement?.id
+      if (id) {
+        const path = element.getAttribute('data-path')
+        if (path) map.set(path, id)
       }
-      if (e) break
     }
-    return e?.parentElement?.id
   }
 
   const urlMainPart = `https://${window.location.host}/${userName}/${repoName}/pull/${pullId}/files${window.location.search}`
@@ -61,7 +58,7 @@ export async function getPullRequestTreeData(
       path: filename || '',
       type: 'blob',
       name: filename?.split('/').pop() || '',
-      url: `${urlMainPart}${formatHash(getFileElementHash(filename))}`,
+      url: `${urlMainPart}${formatHash(map.get(filename))}`,
       sha: sha,
       comments: commentsMap.get(filename),
       diff: {

From 1e323bc2d5759c0584c54cdada160b1151631792 Mon Sep 17 00:00:00 2001
From: EnixCoda <enixcoda@gmail.com>
Date: Sat, 4 Jun 2022 15:41:33 +0800
Subject: [PATCH 58/93] feat: reload context

---
 src/components/Gitako.tsx           | 29 ++++++++++++++++-------------
 src/components/ToggleShowButton.tsx | 18 +++++++++++++++++-
 src/containers/ReloadContext.tsx    | 17 +++++++++++++++++
 src/styles/index.scss               |  7 ++++---
 4 files changed, 54 insertions(+), 17 deletions(-)
 create mode 100644 src/containers/ReloadContext.tsx

diff --git a/src/components/Gitako.tsx b/src/components/Gitako.tsx
index 13039b3..8fc22db 100644
--- a/src/components/Gitako.tsx
+++ b/src/components/Gitako.tsx
@@ -1,5 +1,6 @@
 import { SideBar } from 'components/SideBar'
 import { ConfigsContextWrapper } from 'containers/ConfigsContext'
+import { ReloadContextWrapper } from 'containers/ReloadContext'
 import * as React from 'react'
 import { ErrorBoundary } from '../containers/ErrorBoundary'
 import { StateBarErrorContextWrapper } from '../containers/ErrorContext'
@@ -9,18 +10,20 @@ import { StateBarStateContextWrapper } from '../containers/SideBarState'
 
 export function Gitako() {
   return (
-    <ErrorBoundary>
-      <ConfigsContextWrapper>
-        <StateBarStateContextWrapper>
-          <StateBarErrorContextWrapper>
-            <OAuthWrapper>
-              <RepoContextWrapper>
-                <SideBar />
-              </RepoContextWrapper>
-            </OAuthWrapper>
-          </StateBarErrorContextWrapper>
-        </StateBarStateContextWrapper>
-      </ConfigsContextWrapper>
-    </ErrorBoundary>
+    <ReloadContextWrapper>
+      <ErrorBoundary>
+        <ConfigsContextWrapper>
+          <StateBarStateContextWrapper>
+            <StateBarErrorContextWrapper>
+              <OAuthWrapper>
+                <RepoContextWrapper>
+                  <SideBar />
+                </RepoContextWrapper>
+              </OAuthWrapper>
+            </StateBarErrorContextWrapper>
+          </StateBarStateContextWrapper>
+        </ConfigsContextWrapper>
+      </ErrorBoundary>
+    </ReloadContextWrapper>
   )
 }
diff --git a/src/components/ToggleShowButton.tsx b/src/components/ToggleShowButton.tsx
index 5e51750..180477f 100644
--- a/src/components/ToggleShowButton.tsx
+++ b/src/components/ToggleShowButton.tsx
@@ -1,9 +1,12 @@
+import { SyncIcon } from '@primer/octicons-react'
 import iconURL from 'assets/icons/Gitako.png'
 import { useConfigs } from 'containers/ConfigsContext'
+import { ReloadContext } from 'containers/ReloadContext'
 import * as React from 'react'
 import { useDebounce, useWindowSize } from 'react-use'
 import { cx } from 'utils/cx'
 import { useResizeHandler } from 'utils/hooks/useResizeHandler'
+import { RoundIconButton } from './RoundIconButton'
 
 type Props = {
   error?: string | null
@@ -19,6 +22,7 @@ function getSafeDistance(y: number, height: number) {
 }
 
 export function ToggleShowButton({ error, className, onClick, onHover }: Props) {
+  const reload = React.useContext(ReloadContext)
   const ref = React.useRef<HTMLDivElement>(null)
   const config = useConfigs()
   const [distance, setDistance] = React.useState(config.value.toggleButtonVerticalDistance)
@@ -68,7 +72,19 @@ export function ToggleShowButton({ error, className, onClick, onHover }: Props)
       >
         <img className={'tentacle'} draggable={false} src={iconURL} />
       </button>
-      {error && <span className={'error-message'}>{error}</span>}
+      {error && (
+        <span className={'error-message'}>
+          {error}
+          <RoundIconButton
+            sx={{ ml: 1 }}
+            variant="danger"
+            size="small"
+            aria-label={'Reload Gitako'}
+            icon={SyncIcon}
+            onClick={reload}
+          />
+        </span>
+      )}
     </div>
   )
 }
diff --git a/src/containers/ReloadContext.tsx b/src/containers/ReloadContext.tsx
new file mode 100644
index 0000000..4e30436
--- /dev/null
+++ b/src/containers/ReloadContext.tsx
@@ -0,0 +1,17 @@
+import * as React from 'react'
+import { noop } from 'utils/general'
+
+export type ReloadContextShape = () => void
+
+export const ReloadContext = React.createContext<ReloadContextShape>(noop)
+
+export function ReloadContextWrapper({ children }: React.PropsWithChildren<{}>) {
+  const [key, setKey] = React.useState(0)
+  const reload = React.useCallback(() => setKey(key => key + 1), [])
+
+  return (
+    <ReloadContext.Provider key={key} value={reload}>
+      {children}
+    </ReloadContext.Provider>
+  )
+}
diff --git a/src/styles/index.scss b/src/styles/index.scss
index c797a3b..2d78fa8 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -357,17 +357,18 @@ $minimal-z-index: max(
   .error-message {
     display: none;
     margin-left: 4px;
-    padding: 2px 4px;
+    padding: 4px;
     font-size: 12px;
     color: var(--color-danger-fg);
     border: 1px solid var(--color-border-default);
-    border-radius: 2px;
+    border-radius: 4px;
     background-color: var(--color-bg-subtle);
   }
 
   &:hover {
     .error-message {
-      display: inline-block;
+      display: inline-flex;
+      align-items: center;
     }
   }
 }

From 9553e1c0bbfb3ece305d1983ee6cd8bd00e622ca Mon Sep 17 00:00:00 2001
From: EnixCoda <enixcoda@gmail.com>
Date: Sat, 4 Jun 2022 16:35:56 +0800
Subject: [PATCH 59/93] feat: optimize scroll behavior

---
 src/components/FileExplorer/ListView.tsx | 28 +++++++++++++++++++++---
 1 file changed, 25 insertions(+), 3 deletions(-)

diff --git a/src/components/FileExplorer/ListView.tsx b/src/components/FileExplorer/ListView.tsx
index 127d3bc..7258616 100644
--- a/src/components/FileExplorer/ListView.tsx
+++ b/src/components/FileExplorer/ListView.tsx
@@ -1,9 +1,10 @@
 import { useConfigs } from 'containers/ConfigsContext'
 import { platform } from 'platforms'
 import * as React from 'react'
-import { FixedSizeList } from 'react-window'
+import { Align, FixedSizeList } from 'react-window'
 import { useOnLocationChange } from 'utils/hooks/useOnLocationChange'
 import { useOnPJAXDone } from 'utils/hooks/usePJAX'
+import { useStateIO } from 'utils/hooks/useStateIO'
 import { NodeRendererContext } from '.'
 import { VirtualNode } from './VirtualNode'
 
@@ -33,9 +34,30 @@ export function ListView({
         : -1,
     [focusedNode?.path, nodes, width, height],
   )
+
+  const $mode = useStateIO<Align>('start')
+  const enableScroll = width * height > 0 // these can be 0 on first render
+
   React.useEffect(() => {
-    if (listRef.current && index !== -1) listRef.current.scrollToItem(index, 'smart')
-  }, [index])
+    // - init loading
+    //   - "start"
+    //     - NO immediate call
+    // - jump to file
+    //   - "start"
+    //     - NO immediate call
+    // - click file/folder
+    //   - not invoke
+    // - navigate with keyboard
+    //   - "smart"
+    //     - immediate call
+    if (enableScroll && listRef.current && index !== -1) {
+      listRef.current.scrollToItem(index, $mode.value)
+    }
+  }, [enableScroll, $mode.value, index])
+
+  React.useEffect(() => {
+    if (enableScroll && $mode.value === 'start') $mode.onChange('smart')
+  }, [enableScroll, $mode.value]) // eslint-disable-line react-hooks/exhaustive-deps
 
   const goToCurrentItem = React.useCallback(() => {
     const targetPath = platform.getCurrentPath(metaData.branchName)

From caaff93ad76fe81a73ca661acb9134468972ab91 Mon Sep 17 00:00:00 2001
From: EnixCoda <enixcoda@gmail.com>
Date: Sat, 4 Jun 2022 21:11:47 +0800
Subject: [PATCH 60/93] chore: extract root element insertion

---
 src/content.tsx        |  7 ++-----
 src/utils/DOMHelper.ts | 14 +++++++++++++-
 2 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/src/content.tsx b/src/content.tsx
index 44d0ba8..7cee36a 100644
--- a/src/content.tsx
+++ b/src/content.tsx
@@ -2,7 +2,7 @@ import { Gitako } from 'components/Gitako'
 import { platform } from 'platforms'
 import * as React from 'react'
 import { createRoot } from 'react-dom/client'
-import { rootElementID } from 'utils/DOMHelper'
+import { insertMountPoint } from 'utils/DOMHelper'
 import './content.scss'
 
 if (platform.resolvePartialMetaData()) {
@@ -15,10 +15,7 @@ if (platform.resolvePartialMetaData()) {
 
 async function init() {
   await injectStyles(browser.runtime.getURL('content.css'))
-  const sideBarElement = document.createElement('div')
-  sideBarElement.setAttribute('id', rootElementID)
-  document.body.appendChild(sideBarElement)
-  createRoot(sideBarElement).render(<Gitako />)
+  createRoot(insertMountPoint()).render(<Gitako />)
 }
 
 // injects a copy of stylesheets so that other extensions(e.g. dark reader) could read
diff --git a/src/utils/DOMHelper.ts b/src/utils/DOMHelper.ts
index cd8383e..1881f5f 100644
--- a/src/utils/DOMHelper.ts
+++ b/src/utils/DOMHelper.ts
@@ -48,7 +48,7 @@ export function $<T2>(
   selector: string,
   existCallback: undefined | null,
   otherwise: () => T2,
-): HTMLElement | T2 | null
+): HTMLElement | T2
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export function $(selector: string, existCallback?: any, otherwise?: any) {
   const element = document.querySelector(selector)
@@ -58,6 +58,18 @@ export function $(selector: string, existCallback?: any, otherwise?: any) {
   return otherwise ? otherwise() : null
 }
 
+/**
+ * add the root element into DOM
+ */
+export function insertMountPoint() {
+  return $(formatID(rootElementID), undefined, () => {
+    const rootElement = document.createElement('div')
+    rootElement.setAttribute('id', rootElementID)
+    document.body.appendChild(rootElement)
+    return rootElement
+  })
+}
+
 /**
  * add the logo element into DOM
  */

From b0283f1f5e1c0f6138bd4da49c09b753c1d22d28 Mon Sep 17 00:00:00 2001
From: EnixCoda <enixcoda@gmail.com>
Date: Sun, 5 Jun 2022 02:46:20 +0800
Subject: [PATCH 61/93] feat: optimize highlight render performance

---
 src/components/Highlight.tsx               | 36 ++++++++++++++--------
 src/components/HighlightOnIndexes.test.tsx | 27 ++++++++++++++++
 src/components/HighlightOnIndexes.tsx      | 33 +++++++++++++-------
 src/utils/general.ts                       | 17 +++++++---
 4 files changed, 86 insertions(+), 27 deletions(-)
 create mode 100644 src/components/HighlightOnIndexes.test.tsx

diff --git a/src/components/Highlight.tsx b/src/components/Highlight.tsx
index 820a294..cb91e29 100644
--- a/src/components/Highlight.tsx
+++ b/src/components/Highlight.tsx
@@ -1,6 +1,9 @@
 import * as React from 'react'
 
-export function Highlight(props: { text: string; match?: RegExp | string }) {
+export const Highlight = React.memo(function Highlight(props: {
+  text: string
+  match?: RegExp | string
+}) {
   const { text, match } = props
   const $match = React.useMemo(() => {
     if (match) {
@@ -13,23 +16,32 @@ export function Highlight(props: { text: string; match?: RegExp | string }) {
     return null
   }, [match])
 
-  if (!$match) return <>{text}</>
+  const chunks = useChunks(text, $match)
+
+  return <>{chunks.map(([type, text], key) => React.createElement(type, { key }, text))}</>
+})
+
+function useChunks(text: string, $match: RegExp | null) {
+  const contents: [string, string][] = []
+  if ($match === null) return [['span', text]]
 
   const matchedPieces = Array.from(text.matchAll($match)).map(
     ([text, highlightText = text]) => highlightText,
   )
   const preservedPieces = text.split($match)
-  const content = []
 
-  let i = 0
-  while (matchedPieces.length || preservedPieces.length) {
-    if (preservedPieces.length) {
-      content.push(<span key={i++}>{preservedPieces.shift()}</span>)
-    }
-    if (matchedPieces.length) {
-      content.push(<mark key={i++}>{matchedPieces.shift()}</mark>)
-    }
+  const push = (type: string, text: string) => {
+    if (!text) return
+    const last = contents[contents.length - 1]
+    if (last && last[0] === type) last[1] += text
+    else contents.push([type, text])
   }
 
-  return <>{content}</>
+  let i = 0
+  while (i < Math.max(matchedPieces.length, preservedPieces.length)) {
+    push('span', preservedPieces[i])
+    push('mark', matchedPieces[i])
+    ++i
+  }
+  return contents
 }
diff --git a/src/components/HighlightOnIndexes.test.tsx b/src/components/HighlightOnIndexes.test.tsx
new file mode 100644
index 0000000..1ffd64f
--- /dev/null
+++ b/src/components/HighlightOnIndexes.test.tsx
@@ -0,0 +1,27 @@
+import { render } from '@testing-library/react'
+import React from 'react'
+import { is } from 'utils/is'
+import { HighlightOnIndexes } from './HighlightOnIndexes'
+
+function test(title: string, text: string, indexes?: number[]) {
+  it(title, () => {
+    expect(render(<HighlightOnIndexes text={text} indexes={indexes} />).container.textContent).toBe(
+      text,
+    )
+  })
+}
+
+const text = 'abcdef'
+for (let i = 0; i < Math.pow(2, text.length); i++) {
+  const bitwise = i.toString(2)
+  const indexes = bitwise
+    .split('')
+    .reverse()
+    .map((bit, index) => (bit === '1' ? index : false))
+    .filter(is.not.false)
+  test(
+    `renders properly when highlight ${bitwise.padStart(text.length, '0')}, indexes [${indexes}]`,
+    text,
+    indexes,
+  )
+}
diff --git a/src/components/HighlightOnIndexes.tsx b/src/components/HighlightOnIndexes.tsx
index f8a21f4..c31ac2b 100644
--- a/src/components/HighlightOnIndexes.tsx
+++ b/src/components/HighlightOnIndexes.tsx
@@ -1,17 +1,28 @@
-import * as React from 'react'
-
-export function HighlightOnIndexes(props: { text: string; indexes?: number[] }) {
-  const { text, indexes } = props
-
-  if (!indexes?.length) return <>{text}</>
+import * as React from 'react';
 
+export function HighlightOnIndexes({ text, indexes = [] }: { text: string; indexes?: number[] }) {
   return (
     <>
-      {text
-        .split('')
-        .map((char, i) =>
-          indexes.includes(i) ? <mark key={i}>{char}</mark> : <span key={i}>{char}</span>,
-        )}
+      {[-1]
+        .concat(indexes)
+        .map((index, i, arr) => [
+          index === -1 ? '' : text.slice(index, index + 1),
+          text.slice(index + 1, arr[i + 1]),
+        ])
+        .reduce((arr, pair) => {
+          const last = arr[arr.length - 1]
+          if (last && !last[1]) {
+            last[0] += pair[0]
+            last[1] += pair[1]
+          } else {
+            arr.push(pair)
+          }
+          return arr
+        }, [] as string[][])
+        .map(([chunk, nextChunk], i) => [
+          chunk && <mark key={i * 2}>{chunk}</mark>,
+          nextChunk && <span key={i * 2 + 1}>{nextChunk}</span>,
+        ])}
     </>
   )
 }
diff --git a/src/utils/general.ts b/src/utils/general.ts
index 850244b..0b6925f 100644
--- a/src/utils/general.ts
+++ b/src/utils/general.ts
@@ -1,5 +1,6 @@
 import { ReactElement } from 'react'
 import * as ReactDOM from 'react-dom'
+import { is } from './is'
 
 export function pick<T>(source: T, keys: string[]): Partial<T> {
   if (keys && typeof keys === 'object') {
@@ -129,12 +130,20 @@ export async function JSONRequest<D>(
   ).json()
 }
 
-export function searchKeyToRegexp(searchKey: string) {
-  if (!searchKey) return null
-
-  return safeRegexp(searchKey, hasUpperCase(searchKey) ? 'g' : 'gi')
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function memoize<Args extends any[], R>(fn: (...args: Args) => R): (...args: Args) => R {
+  let lastArgs: Args | null = null
+  let lastR: R | null = null
+  return (...args) => {
+    if (lastArgs && is.shallowEqual.array(lastArgs, args)) return lastR as R
+    return (lastR = fn(...(lastArgs = args)))
+  }
 }
 
+export const searchKeyToRegexp = memoize((searchKey: string) =>
+  searchKey ? safeRegexp(searchKey, hasUpperCase(searchKey) ? 'g' : 'gi') : null,
+)
+
 export function hasUpperCase(input: string) {
   return /[A-Z]/.test(input)
 }

From bbf7f3d7ea558353da133eb86b3d86d988eca528 Mon Sep 17 00:00:00 2001
From: EnixCoda <enixcoda@gmail.com>
Date: Sun, 5 Jun 2022 02:46:29 +0800
Subject: [PATCH 62/93] feat: is equal

---
 src/utils/is.ts | 73 +++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 73 insertions(+)

diff --git a/src/utils/is.ts b/src/utils/is.ts
index 9ea15f4..b6062e5 100644
--- a/src/utils/is.ts
+++ b/src/utils/is.ts
@@ -1,4 +1,77 @@
+type Primitive = string | number | boolean | null | undefined
+
+const equal = {
+  type: (a: unknown, b: unknown) => getType(a) === getType(b),
+  unknown(a: unknown, b: unknown) {
+    const type = getType(a)
+    if (!equal.primitive(type, getType(b))) return false
+    switch (type) {
+      case 'array':
+        if (!equal.array(a as unknown[], b as unknown[])) return false
+        break
+      case 'object':
+        if (!equal.object(a as Record<string, unknown>, b as Record<string, unknown>)) return false
+        break
+      case 'date':
+      case 'function':
+      case 'regexp':
+      case 'symbol':
+        if (!equal.primitive(`${a}`, `${b}`)) return false
+        break
+      default:
+        if (!equal.primitive(a as Primitive, b as Primitive)) return false
+    }
+    return true
+  },
+  primitive: <T extends Primitive>(a: T, b: T) => a === b,
+  array(a: unknown[], b: unknown[]) {
+    if (a.length !== b.length) return false
+    const length = a.length
+    for (let i = 0; i < length; i++) if (!equal.unknown(a[i], b[i])) return false
+    return true
+  },
+  object(a: Record<string, unknown>, b: Record<string, unknown>) {
+    if (Object.keys(a).length !== Object.keys(b).length) return false
+  },
+}
+
+const shallowEqual = {
+  array(a: unknown[], b: unknown[]) {
+    if (a.length !== b.length) return false
+    const length = a.length
+    for (let i = 0; i < length; i++) if (a[i] !== b[i]) return false
+    return true
+  },
+}
+
+function getType(a: unknown) {
+  switch (typeof a) {
+    case 'boolean':
+      return 'boolean'
+    case 'function':
+      return 'function'
+    case 'number':
+      return 'number'
+    case 'string':
+      return 'string'
+    case 'symbol':
+      return 'symbol'
+    case 'undefined':
+      return 'undefined'
+    case 'object':
+      if (a === null) return 'null'
+      if (Array.isArray(a)) return 'array'
+      if (a instanceof Date) return 'date'
+      if (a instanceof RegExp) return 'regexp'
+      return 'object'
+    default:
+      return 'unknown'
+  }
+}
+
 export const is = {
+  equal,
+  shallowEqual,
   boolean: (d: unknown): d is boolean => typeof d === 'boolean',
   number: (d: unknown): d is number => typeof d === 'number',
   string: (d: unknown): d is string => typeof d === 'string',

From fcdef87b2abe93008dfbfe2682d6da4ad9294e90 Mon Sep 17 00:00:00 2001
From: EnixCoda <enixcoda@gmail.com>
Date: Mon, 6 Jun 2022 16:29:59 +0800
Subject: [PATCH 63/93] fix: enable code fold on all code blocks

---
 src/platforms/GitHub/hooks/useGitHubCodeFold.tsx | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/platforms/GitHub/hooks/useGitHubCodeFold.tsx b/src/platforms/GitHub/hooks/useGitHubCodeFold.tsx
index 6bb0641..9d6a4e3 100644
--- a/src/platforms/GitHub/hooks/useGitHubCodeFold.tsx
+++ b/src/platforms/GitHub/hooks/useGitHubCodeFold.tsx
@@ -13,6 +13,10 @@ const selectorOfLineContent = `.blob-code`
 
 const theCSSClassForToggleElementOnActive = 'gitako-code-fold-active'
 function init() {
+  document.querySelectorAll(tableSelector).forEach(processTable)
+}
+
+function processTable(table: Element) {
   type LineNumber = number // alias
   const blocks: LineNumber[] = [] // startLine -> exclusiveEndLine
   /**
@@ -34,8 +38,7 @@ function init() {
    * 5
    */
 
-  const table = document.querySelector(tableSelector)
-  const lineElements = Array.from(document.querySelectorAll([tableSelector, 'tr'].join(' ')))
+  const lineElements = Array.from(table.querySelectorAll('tr'))
   if (!table || !lineElements.length) return
   if (table.classList.contains(theCSSClassMark)) {
     if (table.classList.contains(theCSSClassMarkWhenDisabled)) {
@@ -124,7 +127,7 @@ function init() {
       if (e.target.classList.contains(theCSSClassForToggleElement)) {
         const tr = e.target.parentElement?.parentElement
         if (tr) {
-          toggleLine(lineElements.indexOf(tr))
+          toggleLine(lineElements.indexOf(tr as HTMLTableRowElement))
           e.stopPropagation()
         }
       }
@@ -133,8 +136,9 @@ function init() {
 }
 
 function cancelToggleFeature() {
-  const table = document.querySelector(tableSelector)
-  table?.classList.add(theCSSClassMarkWhenDisabled)
+  document
+    .querySelectorAll(tableSelector)
+    .forEach(table => table.classList.add(theCSSClassMarkWhenDisabled))
 }
 
 function getTextLevel(text: string) {

From 8819984f980fa6bfe866b59334bbd309c85772fd Mon Sep 17 00:00:00 2001
From: EnixCoda <enixcoda@gmail.com>
Date: Mon, 6 Jun 2022 21:31:32 +0800
Subject: [PATCH 64/93] refactor: update settings layout

---
 src/components/FileExplorer/index.tsx   |  6 ++----
 src/components/SideBar.tsx              |  2 +-
 src/components/settings/SettingsBar.tsx |  2 ++
 src/styles/index.scss                   | 28 +++++++------------------
 4 files changed, 12 insertions(+), 26 deletions(-)

diff --git a/src/components/FileExplorer/index.tsx b/src/components/FileExplorer/index.tsx
index c75cb86..e3236e7 100644
--- a/src/components/FileExplorer/index.tsx
+++ b/src/components/FileExplorer/index.tsx
@@ -2,7 +2,6 @@ import { Label, Text } from '@primer/react'
 import { LoadingIndicator } from 'components/LoadingIndicator'
 import { SearchBar } from 'components/SearchBar'
 import * as React from 'react'
-import { cx } from 'utils/cx'
 import { run } from 'utils/general'
 import { useLoadedContext } from 'utils/hooks/useLoadedContext'
 import { VisibleNodes } from 'utils/VisibleNodesGenerator'
@@ -39,10 +38,9 @@ export type NodeRendererContext = {
 
 type Props = {
   metaData: MetaData
-  freeze: boolean
 }
 
-export function FileExplorer({ freeze, metaData }: Props) {
+export function FileExplorer({ metaData }: Props) {
   const visibleNodesGenerator = useVisibleNodesGenerator(metaData)
   const visibleNodes = useVisibleNodes(visibleNodesGenerator)
 
@@ -82,7 +80,7 @@ export function FileExplorer({ freeze, metaData }: Props) {
   useFocusFileExplorerOnFirstRender()
 
   return (
-    <div className={cx(`file-explorer`, { freeze })} tabIndex={-1} onKeyDown={handleKeyDown}>
+    <div className={`file-explorer`} tabIndex={-1} onKeyDown={handleKeyDown}>
       {run(() => {
         switch (state) {
           case 'tree-loading':
diff --git a/src/components/SideBar.tsx b/src/components/SideBar.tsx
index 836e81b..4b63ed9 100644
--- a/src/components/SideBar.tsx
+++ b/src/components/SideBar.tsx
@@ -190,7 +190,7 @@ export function SideBar() {
                   case 'error-due-to-auth':
                     return <AccessDeniedDescription />
                   default:
-                    return metaData && <FileExplorer metaData={metaData} freeze={showSettings} />
+                    return metaData && <FileExplorer metaData={metaData} />
                 }
               })}
             </div>
diff --git a/src/components/settings/SettingsBar.tsx b/src/components/settings/SettingsBar.tsx
index 5698c07..922f8e0 100644
--- a/src/components/settings/SettingsBar.tsx
+++ b/src/components/settings/SettingsBar.tsx
@@ -1,5 +1,6 @@
 import { ChevronDownIcon } from '@primer/octicons-react'
 import { Box } from '@primer/react'
+import { Footer } from 'components/Footer'
 import { RoundIconButton } from 'components/RoundIconButton'
 import { platform } from 'platforms'
 import { GitHub } from 'platforms/GitHub'
@@ -98,6 +99,7 @@ export function SettingsBarContent({ toggleShow }: { toggleShow: () => void }) {
           </div>
         </SettingsSection>
       </Box>
+      <Footer toggleShowSettings={toggleShow} />
     </div>
   )
 }
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 2d78fa8..d0ba9d4 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -418,6 +418,7 @@ $minimal-z-index: max(
   }
   .#{$name}-side-bar-body {
     $button-size: 32px;
+
     position: relative;
     width: var(--gitako-width);
     height: 100%;
@@ -425,6 +426,7 @@ $minimal-z-index: max(
     flex-direction: column;
     background: var(--color-bg-subtle);
     border-left: 1px solid var(--color-border-default);
+
     .octicon-wrapper {
       display: inline-block;
       color: var(--color-fg-subtle);
@@ -501,22 +503,6 @@ $minimal-z-index: max(
         display: flex;
         flex-direction: column;
         flex-wrap: nowrap;
-        &.freeze {
-          filter: blur(1.5px) opacity(0.6) grayscale(0.9) brightness(0.8);
-          transition: filter 0.25s ease;
-          &:hover {
-            filter: blur(1.5px) opacity(0.6) grayscale(0.9) brightness(0.9);
-          }
-          &:active {
-            filter: blur(1.5px) opacity(0.6) grayscale(0.9) brightness(0.7);
-          }
-          cursor: pointer;
-
-          > * {
-            pointer-events: none;
-            user-select: none;
-          }
-        }
 
         .search-input {
           padding-left: 0;
@@ -770,19 +756,19 @@ $minimal-z-index: max(
     }
 
     .#{$name}-settings-bar {
-      background: var(--color-bg-subtle);
+      position: absolute;
+      width: 100%;
+      height: 100%;
       display: flex;
       flex-direction: column;
-      max-height: calc(100vh - 240px);
-      min-height: 240px;
-      z-index: 1;
+      z-index: 2;
       overflow: hidden; // prevent box-shadow of children overflow
+      background: var(--color-bg-subtle);
 
       &-header {
         display: flex;
         justify-content: space-between;
         align-items: flex-start;
-        border-top: 1px solid var(--color-border-muted);
         padding: 10px;
         box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.2), 0 3px 4px 0 rgba(0, 0, 0, 0.14),
           0 3px 3px -2px rgba(0, 0, 0, 0.12);

From 4b4b3c4841d5cdac36d7d8e442f575c2f853b5a9 Mon Sep 17 00:00:00 2001
From: EnixCoda <enixcoda@gmail.com>
Date: Mon, 6 Jun 2022 23:01:06 +0800
Subject: [PATCH 65/93] chore: adjust settings close icon size

---
 src/components/settings/SettingsBar.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/settings/SettingsBar.tsx b/src/components/settings/SettingsBar.tsx
index 922f8e0..dd0cccd 100644
--- a/src/components/settings/SettingsBar.tsx
+++ b/src/components/settings/SettingsBar.tsx
@@ -59,6 +59,7 @@ export function SettingsBarContent({ toggleShow }: { toggleShow: () => void }) {
           aria-label="Close settings"
           onClick={toggleShow}
           size="medium"
+          iconSize={20}
           icon={ChevronDownIcon}
           color="fg.default"
         />

From 6ce88e7cf08449884e1149f37ca4173aca285fdb Mon Sep 17 00:00:00 2001
From: EnixCoda <enixcoda@gmail.com>
Date: Mon, 6 Jun 2022 23:30:57 +0800
Subject: [PATCH 66/93] refactor: extract list-control hooks

---
 src/components/FileExplorer/ListView.tsx | 21 +--------------------
 src/components/FileExplorer/index.tsx    | 13 +++++++++++--
 2 files changed, 12 insertions(+), 22 deletions(-)

diff --git a/src/components/FileExplorer/ListView.tsx b/src/components/FileExplorer/ListView.tsx
index 7258616..758cc58 100644
--- a/src/components/FileExplorer/ListView.tsx
+++ b/src/components/FileExplorer/ListView.tsx
@@ -1,9 +1,6 @@
 import { useConfigs } from 'containers/ConfigsContext'
-import { platform } from 'platforms'
 import * as React from 'react'
 import { Align, FixedSizeList } from 'react-window'
-import { useOnLocationChange } from 'utils/hooks/useOnLocationChange'
-import { useOnPJAXDone } from 'utils/hooks/usePJAX'
 import { useStateIO } from 'utils/hooks/useStateIO'
 import { NodeRendererContext } from '.'
 import { VirtualNode } from './VirtualNode'
@@ -12,17 +9,9 @@ type ListViewProps = {
   height: number
   width: number
   nodeRendererContext: NodeRendererContext
-  metaData: MetaData
-  expandTo: (path: string[]) => void
 }
 
-export function ListView({
-  width,
-  height,
-  metaData,
-  expandTo,
-  nodeRendererContext,
-}: ListViewProps) {
+export function ListView({ width, height, nodeRendererContext }: ListViewProps) {
   const { visibleNodes } = nodeRendererContext
   const { focusedNode, nodes } = visibleNodes
 
@@ -59,14 +48,6 @@ export function ListView({
     if (enableScroll && $mode.value === 'start') $mode.onChange('smart')
   }, [enableScroll, $mode.value]) // eslint-disable-line react-hooks/exhaustive-deps
 
-  const goToCurrentItem = React.useCallback(() => {
-    const targetPath = platform.getCurrentPath(metaData.branchName)
-    if (targetPath) expandTo(targetPath)
-  }, [metaData.branchName, expandTo])
-
-  useOnLocationChange(goToCurrentItem)
-  useOnPJAXDone(goToCurrentItem)
-
   const { compactFileTree } = useConfigs().value
 
   return (
diff --git a/src/components/FileExplorer/index.tsx b/src/components/FileExplorer/index.tsx
index e3236e7..e9c7926 100644
--- a/src/components/FileExplorer/index.tsx
+++ b/src/components/FileExplorer/index.tsx
@@ -1,9 +1,12 @@
 import { Label, Text } from '@primer/react'
 import { LoadingIndicator } from 'components/LoadingIndicator'
 import { SearchBar } from 'components/SearchBar'
+import { platform } from 'platforms'
 import * as React from 'react'
 import { run } from 'utils/general'
 import { useLoadedContext } from 'utils/hooks/useLoadedContext'
+import { useOnLocationChange } from 'utils/hooks/useOnLocationChange'
+import { useOnPJAXDone } from 'utils/hooks/usePJAX'
 import { VisibleNodes } from 'utils/VisibleNodesGenerator'
 import { SideBarStateContext } from '../../containers/SideBarState'
 import { SizeObserver } from '../SizeObserver'
@@ -79,6 +82,14 @@ export function FileExplorer({ metaData }: Props) {
   const state = useLoadedContext(SideBarStateContext).value
   useFocusFileExplorerOnFirstRender()
 
+  const goToCurrentItem = React.useCallback(() => {
+    const targetPath = platform.getCurrentPath(metaData.branchName)
+    if (targetPath) expandTo(targetPath)
+  }, [metaData.branchName, expandTo])
+
+  useOnLocationChange(goToCurrentItem)
+  useOnPJAXDone(goToCurrentItem)
+
   return (
     <div className={`file-explorer`} tabIndex={-1} onKeyDown={handleKeyDown}>
       {run(() => {
@@ -124,8 +135,6 @@ export function FileExplorer({ metaData }: Props) {
                             height={height}
                             width={width}
                             nodeRendererContext={nodeRendererContext}
-                            expandTo={expandTo}
-                            metaData={metaData}
                           />
                         </div>
                       )}

From 8716ce02e9461f62688dff69df9bd19dc96048f5 Mon Sep 17 00:00:00 2001
From: EnixCoda <enixcoda@gmail.com>
Date: Mon, 6 Jun 2022 23:31:30 +0800
Subject: [PATCH 67/93] chore: optimize list horizontal style

---
 src/components/FileExplorer/ListView.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/FileExplorer/ListView.tsx b/src/components/FileExplorer/ListView.tsx
index 758cc58..b53fcde 100644
--- a/src/components/FileExplorer/ListView.tsx
+++ b/src/components/FileExplorer/ListView.tsx
@@ -58,7 +58,7 @@ export function ListView({ width, height, nodeRendererContext }: ListViewProps)
       itemCount={visibleNodes.nodes.length}
       itemSize={compactFileTree ? 24 : 37}
       height={height}
-      width={width}
+      width={'100%'}
     >
       {VirtualNode}
     </FixedSizeList>

From ef481d7d7e682b3cac151ac8ab861675797e0737 Mon Sep 17 00:00:00 2001
From: EnixCoda <enixcoda@gmail.com>
Date: Mon, 6 Jun 2022 23:44:44 +0800
Subject: [PATCH 68/93] test: add Highlight test

---
 src/components/Highlight.test.tsx | 15 +++++++++++++++
 src/components/Highlight.tsx      | 16 +++++-----------
 2 files changed, 20 insertions(+), 11 deletions(-)
 create mode 100644 src/components/Highlight.test.tsx

diff --git a/src/components/Highlight.test.tsx b/src/components/Highlight.test.tsx
new file mode 100644
index 0000000..5d1fbc3
--- /dev/null
+++ b/src/components/Highlight.test.tsx
@@ -0,0 +1,15 @@
+import { render } from '@testing-library/react'
+import React, { ComponentProps } from 'react'
+import { Highlight } from './Highlight'
+
+function test(title: string, text: string, match?: ComponentProps<typeof Highlight>['match']) {
+  it(title, () => {
+    expect(render(<Highlight text={text} match={match} />).container.textContent).toBe(text)
+  })
+}
+
+test('sample', 'abc', undefined)
+test('sample', 'abc', /./)
+test('sample', 'abc', /../)
+test('sample', 'abc', /.../)
+test('sample', 'abc', /..../)
diff --git a/src/components/Highlight.tsx b/src/components/Highlight.tsx
index cb91e29..0102ef7 100644
--- a/src/components/Highlight.tsx
+++ b/src/components/Highlight.tsx
@@ -1,17 +1,11 @@
-import * as React from 'react'
+import * as React from 'react';
 
-export const Highlight = React.memo(function Highlight(props: {
-  text: string
-  match?: RegExp | string
-}) {
+export const Highlight = React.memo(function Highlight(props: { text: string; match?: RegExp }) {
   const { text, match } = props
   const $match = React.useMemo(() => {
-    if (match) {
-      if (match instanceof RegExp) {
-        if (match.flags.includes('g')) return match
-        return new RegExp(match.source, 'g' + match.flags)
-      }
-      return new RegExp(match, 'g')
+    if (match instanceof RegExp) {
+      if (match.flags.includes('g')) return match
+      return new RegExp(match.source, 'g' + match.flags)
     }
     return null
   }, [match])

From 6092d65b00c70b9dcb107065b488aaf26c704f2c Mon Sep 17 00:00:00 2001
From: EnixCoda <enixcoda@gmail.com>
Date: Thu, 16 Jun 2022 22:36:36 +0800
Subject: [PATCH 69/93] fix: theme selectors

---
 src/styles/themes.scss | 50 ++++++++++++++++++++++++------------------
 1 file changed, 29 insertions(+), 21 deletions(-)

diff --git a/src/styles/themes.scss b/src/styles/themes.scss
index 852b34f..8c005ca 100644
--- a/src/styles/themes.scss
+++ b/src/styles/themes.scss
@@ -8,22 +8,30 @@
 @import '@primer/primitives/dist/scss/colors/_light.scss';
 @import '@primer/primitives/dist/scss/colors/_light_tritanopia.scss';
 
-@mixin theme($themeName) {
-  &[data-color-mode='light'][data-light-theme='#{$themeName}'],
-  &[data-color-mode='dark'][data-dark-theme='#{$themeName}'] {
-    @content;
-  }
-
-  &[data-color-mode='auto'] {
-    &[data-light-theme='#{$themeName}'] {
-      @media (prefers-color-scheme: light) {
+@mixin theme($selector, $themeName) {
+  @at-root {
+    :root[data-color-mode='light'][data-light-theme='#{$themeName}'],
+    :root[data-color-mode='dark'][data-dark-theme='#{$themeName}'] {
+      #{$selector} {
         @content;
       }
     }
 
-    &[data-dark-theme='#{$themeName}'] {
-      @media (prefers-color-scheme: dark) {
-        @content;
+    :root[data-color-mode='auto'] {
+      &[data-light-theme='#{$themeName}'] {
+        @media (prefers-color-scheme: light) {
+          #{$selector} {
+            @content;
+          }
+        }
+      }
+
+      &[data-dark-theme='#{$themeName}'] {
+        @media (prefers-color-scheme: dark) {
+          #{$selector} {
+            @content;
+          }
+        }
       }
     }
   }
@@ -40,31 +48,31 @@
   --color-bg-overlay: var(--color-canvas-overlay);
   --color-bg-subtle: var(--color-canvas-subtle);
 
-  @include theme('dark') {
+  @include theme(&, 'dark') {
     @include primer-colors-dark;
   }
-  @include theme('dark_high_contrast') {
+  @include theme(&, 'dark_high_contrast') {
     @include primer-colors-dark_high_contrast;
   }
-  @include theme('light_colorblind') {
+  @include theme(&, 'light_colorblind') {
     @include primer-colors-light_colorblind;
   }
-  @include theme('dark_colorblind') {
+  @include theme(&, 'dark_colorblind') {
     @include primer-colors-dark_colorblind;
   }
-  @include theme('dark_tritanopia') {
+  @include theme(&, 'dark_tritanopia') {
     @include primer-colors-dark_tritanopia;
   }
-  @include theme('light_high_contrast') {
+  @include theme(&, 'light_high_contrast') {
     @include primer-colors-light_high_contrast;
   }
-  @include theme('dark_dimmed') {
+  @include theme(&, 'dark_dimmed') {
     @include primer-colors-dark_dimmed;
   }
-  @include theme('light') {
+  @include theme(&, 'light') {
     @include primer-colors-light;
   }
-  @include theme('light_tritanopia') {
+  @include theme(&, 'light_tritanopia') {
     @include primer-colors-light_tritanopia;
   }
 }

From 5a16682c7f580bb51bbba441077ebce9d2775f13 Mon Sep 17 00:00:00 2001
From: EnixCoda <enixcoda@gmail.com>
Date: Sat, 18 Jun 2022 22:40:56 +0800
Subject: [PATCH 70/93] fix: folder rotate on toggle open

---
 src/styles/index.scss | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/styles/index.scss b/src/styles/index.scss
index d0ba9d4..af8cfef 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -605,6 +605,11 @@ $minimal-z-index: max(
             width: 16px;
             // not specify height here, it'll break vertical alignment
 
+            .octicon.ChevronRight {
+              // smooth rotation animation
+              transition: transform .3s ease;
+            }
+
             & + .octicon-wrapper,
             & + .node-item-icon {
               margin-right: 6px;

From 31fc538a5cb863f077e3cb45da29645444770e70 Mon Sep 17 00:00:00 2001
From: EnixCoda <enixcoda@gmail.com>
Date: Thu, 16 Jun 2022 01:07:58 +0800
Subject: [PATCH 71/93] feat: self implemented virtual scroller

---
 src/components/FileExplorer/ListView.tsx      |  83 +++++--
 src/components/FileExplorer/Node.tsx          |   5 +-
 src/components/FileExplorer/VirtualNode.tsx   |   3 +-
 .../FileExplorer/hooks/useExpandTo.tsx        |   4 +-
 .../FileExplorer/hooks/useFocusNode.tsx       |   4 +-
 src/components/FileExplorer/hooks/useGoTo.tsx |   7 +-
 .../FileExplorer/hooks/useHandleKeyDown.tsx   |  17 +-
 .../hooks/useNodeRenderContext.tsx            |  27 --
 .../FileExplorer/hooks/useOnNodeClick.tsx     |  11 +-
 .../FileExplorer/hooks/useOnSearch.tsx        |  12 +-
 .../FileExplorer/hooks/useToggleExpansion.tsx |   4 +-
 .../hooks/useVisibleNodesGenerator.tsx        |   3 +-
 ...sx => useVisibleNodesGeneratorMethods.tsx} |   7 +-
 src/components/FileExplorer/index.tsx         | 230 ++++++++++++------
 .../FileExplorer/useHandleNodeFocus.tsx       |  15 +-
 .../FileExplorer/useLatestValueRef.tsx        |  14 ++
 .../FileExplorer/useVirtualScroll.tsx         | 125 ++++++++++
 src/components/MetaBar.tsx                    |   8 +-
 src/components/SideBar.tsx                    |  11 +-
 src/components/SideBarBodyWrapper.tsx         |   2 +-
 src/components/SizeObserver.tsx               |  42 ----
 src/global.d.ts                               |   2 +
 src/styles/index.scss                         |  13 +-
 src/utils/DOMHelper.ts                        |   3 +-
 src/utils/hooks/useElementSize.ts             |  32 +++
 25 files changed, 459 insertions(+), 225 deletions(-)
 delete mode 100644 src/components/FileExplorer/hooks/useNodeRenderContext.tsx
 rename src/components/FileExplorer/hooks/{useOnVisibleNodesGeneratorReady.tsx => useVisibleNodesGeneratorMethods.tsx} (86%)
 create mode 100644 src/components/FileExplorer/useLatestValueRef.tsx
 create mode 100644 src/components/FileExplorer/useVirtualScroll.tsx
 delete mode 100644 src/components/SizeObserver.tsx
 create mode 100644 src/utils/hooks/useElementSize.ts

diff --git a/src/components/FileExplorer/ListView.tsx b/src/components/FileExplorer/ListView.tsx
index b53fcde..6dcc8f4 100644
--- a/src/components/FileExplorer/ListView.tsx
+++ b/src/components/FileExplorer/ListView.tsx
@@ -1,9 +1,9 @@
 import { useConfigs } from 'containers/ConfigsContext'
 import * as React from 'react'
-import { Align, FixedSizeList } from 'react-window'
 import { useStateIO } from 'utils/hooks/useStateIO'
 import { NodeRendererContext } from '.'
-import { VirtualNode } from './VirtualNode'
+import { Node } from './Node'
+import { AlignMode, useVirtualScroll } from './useVirtualScroll'
 
 type ListViewProps = {
   height: number
@@ -12,10 +12,25 @@ type ListViewProps = {
 }
 
 export function ListView({ width, height, nodeRendererContext }: ListViewProps) {
-  const { visibleNodes } = nodeRendererContext
-  const { focusedNode, nodes } = visibleNodes
+  const { onNodeClick, onNodeFocus, renderLabelText, renderActions, visibleNodes } =
+    nodeRendererContext
+  const { focusedNode, nodes, expandedNodes, depths, loading } = visibleNodes
+
+  const { compactFileTree } = useConfigs().value
+
+  const rowHeight = compactFileTree ? 24 : 37
+  const totalAmount = visibleNodes.nodes.length
+  const { onScroll, visibleRows, containerStyle, scrollToItem, ref } =
+    useVirtualScroll<HTMLDivElement>({
+      totalAmount,
+      rowHeight,
+      viewportHeight: height,
+      overScan: 10,
+    })
+
+  const $mode = useStateIO<AlignMode>('top')
+  const enableScroll = width * height > 0 // these can be 0 on first render
 
-  const listRef = React.useRef<FixedSizeList<NodeRendererContext>>(null)
   const index = React.useMemo(
     () =>
       width && height && focusedNode?.path
@@ -24,43 +39,57 @@ export function ListView({ width, height, nodeRendererContext }: ListViewProps)
     [focusedNode?.path, nodes, width, height],
   )
 
-  const $mode = useStateIO<Align>('start')
-  const enableScroll = width * height > 0 // these can be 0 on first render
-
   React.useEffect(() => {
     // - init loading
-    //   - "start"
+    //   - "top"
     //     - NO immediate call
     // - jump to file
-    //   - "start"
+    //   - "top"
     //     - NO immediate call
     // - click file/folder
     //   - not invoke
     // - navigate with keyboard
-    //   - "smart"
+    //   - "lazy"
     //     - immediate call
-    if (enableScroll && listRef.current && index !== -1) {
-      listRef.current.scrollToItem(index, $mode.value)
+    if (enableScroll && index !== -1) {
+      scrollToItem?.(index, $mode.value)
     }
-  }, [enableScroll, $mode.value, index])
+  }, [enableScroll, $mode.value, index, scrollToItem])
 
   React.useEffect(() => {
-    if (enableScroll && $mode.value === 'start') $mode.onChange('smart')
+    if (enableScroll && $mode.value === 'top') $mode.onChange('lazy')
   }, [enableScroll, $mode.value]) // eslint-disable-line react-hooks/exhaustive-deps
 
-  const { compactFileTree } = useConfigs().value
-
   return (
-    <FixedSizeList<NodeRendererContext>
-      ref={listRef}
-      itemKey={(index, { visibleNodes }) => visibleNodes.nodes[index]?.path}
-      itemData={nodeRendererContext}
-      itemCount={visibleNodes.nodes.length}
-      itemSize={compactFileTree ? 24 : 37}
-      height={height}
-      width={'100%'}
+    <div
+      style={{
+        height,
+        width: '100%',
+        overflow: 'auto',
+      }}
+      ref={ref}
+      onScroll={onScroll}
     >
-      {VirtualNode}
-    </FixedSizeList>
+      <div style={containerStyle}>
+        {visibleRows.map(({ row, style }) => {
+          const node = nodes[row]
+          return (
+            <Node
+              key={node.path}
+              node={node}
+              style={style}
+              depth={depths.get(node) || 0}
+              focused={focusedNode?.path === node.path}
+              loading={loading.has(node.path)}
+              expanded={expandedNodes.has(node.path)}
+              onClick={onNodeClick}
+              onFocus={onNodeFocus}
+              renderLabelText={renderLabelText}
+              renderActions={renderActions}
+            />
+          )
+        })}
+      </div>
+    </div>
   )
 }
diff --git a/src/components/FileExplorer/Node.tsx b/src/components/FileExplorer/Node.tsx
index 4244d75..5d07670 100644
--- a/src/components/FileExplorer/Node.tsx
+++ b/src/components/FileExplorer/Node.tsx
@@ -28,7 +28,8 @@ type Props = {
   renderLabelText(node: TreeNode): React.ReactNode
   style?: React.CSSProperties
 }
-export function Node({
+
+export const Node = React.memo(function Node({
   node,
   depth,
   expanded,
@@ -60,7 +61,7 @@ export function Node({
       {renderActions && <div className={'actions'}>{renderActions(node)}</div>}
     </a>
   )
-}
+})
 
 const NodeItemIcon = React.memo(function NodeItemIcon({
   node,
diff --git a/src/components/FileExplorer/VirtualNode.tsx b/src/components/FileExplorer/VirtualNode.tsx
index 8d464a8..f5cbebb 100644
--- a/src/components/FileExplorer/VirtualNode.tsx
+++ b/src/components/FileExplorer/VirtualNode.tsx
@@ -6,8 +6,9 @@ import { NodeRendererContext } from '.'
 export const VirtualNode = React.memo(function VirtualNode({
   index,
   style,
-  data: { onNodeClick, onNodeFocus, renderLabelText, renderActions, visibleNodes },
+  data,
 }: Override<ListChildComponentProps, { data: NodeRendererContext }>) {
+  const { onNodeClick, onNodeFocus, renderLabelText, renderActions, visibleNodes } = data
   if (!visibleNodes) return null
 
   const { nodes, focusedNode, expandedNodes, loading, depths } = visibleNodes
diff --git a/src/components/FileExplorer/hooks/useExpandTo.tsx b/src/components/FileExplorer/hooks/useExpandTo.tsx
index 43e378a..4f9a74c 100644
--- a/src/components/FileExplorer/hooks/useExpandTo.tsx
+++ b/src/components/FileExplorer/hooks/useExpandTo.tsx
@@ -1,11 +1,9 @@
 import * as React from 'react'
 import { VisibleNodesGenerator } from 'utils/VisibleNodesGenerator'
 
-export function useExpandTo(visibleNodesGenerator: VisibleNodesGenerator | null) {
+export function useExpandTo(visibleNodesGenerator: VisibleNodesGenerator) {
   return React.useCallback(
     async (currentPath: string[]) => {
-      if (!visibleNodesGenerator) return
-
       const nodeExpandedTo = await visibleNodesGenerator.expandTo(currentPath.join('/'))
       if (nodeExpandedTo) visibleNodesGenerator.focusNode(nodeExpandedTo)
     },
diff --git a/src/components/FileExplorer/hooks/useFocusNode.tsx b/src/components/FileExplorer/hooks/useFocusNode.tsx
index e988068..4d8d9e4 100644
--- a/src/components/FileExplorer/hooks/useFocusNode.tsx
+++ b/src/components/FileExplorer/hooks/useFocusNode.tsx
@@ -1,9 +1,9 @@
 import * as React from 'react'
 import { VisibleNodesGenerator } from 'utils/VisibleNodesGenerator'
 
-export function useFocusNode(visibleNodesGenerator: VisibleNodesGenerator | null) {
+export function useFocusNode(visibleNodesGenerator: VisibleNodesGenerator) {
   return React.useCallback(
-    (node: TreeNode | null) => visibleNodesGenerator?.focusNode(node),
+    (node: TreeNode | null) => visibleNodesGenerator.focusNode(node),
     [visibleNodesGenerator],
   )
 }
diff --git a/src/components/FileExplorer/hooks/useGoTo.tsx b/src/components/FileExplorer/hooks/useGoTo.tsx
index 10c5e9b..f17918d 100644
--- a/src/components/FileExplorer/hooks/useGoTo.tsx
+++ b/src/components/FileExplorer/hooks/useGoTo.tsx
@@ -1,15 +1,14 @@
 import * as React from 'react'
 import { VisibleNodesGenerator } from 'utils/VisibleNodesGenerator'
+import { useExpandTo } from './useExpandTo'
 
 export function useGoTo(
-  visibleNodesGenerator: VisibleNodesGenerator | null,
+  visibleNodesGenerator: VisibleNodesGenerator,
   updateSearchKey: React.Dispatch<React.SetStateAction<string>>,
-  expandTo: (currentPath: string[]) => Promise<void>,
+  expandTo: ReturnType<typeof useExpandTo>,
 ) {
   return React.useCallback(
     (path: string[]) => {
-      if (!visibleNodesGenerator) return
-
       updateSearchKey('')
       visibleNodesGenerator.search(null)
       visibleNodesGenerator.onNextUpdate(() => expandTo(path))
diff --git a/src/components/FileExplorer/hooks/useHandleKeyDown.tsx b/src/components/FileExplorer/hooks/useHandleKeyDown.tsx
index d0abee5..7532e52 100644
--- a/src/components/FileExplorer/hooks/useHandleKeyDown.tsx
+++ b/src/components/FileExplorer/hooks/useHandleKeyDown.tsx
@@ -3,7 +3,8 @@ import * as DOMHelper from 'utils/DOMHelper'
 import { OperatingSystems, os } from 'utils/general'
 import { loadWithPJAX } from 'utils/hooks/usePJAX'
 import { VisibleNodes } from 'utils/VisibleNodesGenerator'
-import { VisibleNodesGeneratorMethods } from './useOnVisibleNodesGeneratorReady'
+import { AlignMode } from '../useVirtualScroll'
+import { VisibleNodesGeneratorMethods } from './useVisibleNodesGeneratorMethods'
 
 function wouldBlockHistoryNavigation(event: React.KeyboardEvent) {
   // Cmd + left/right on macOS
@@ -25,17 +26,19 @@ function getVisibleParentNode(nodes: TreeNode[], focusedNode: TreeNode) {
 }
 
 export function useHandleKeyDown(
-  visibleNodes: VisibleNodes | null,
+  visibleNodes: VisibleNodes,
   { focusNode, toggleExpansion, goTo }: VisibleNodesGeneratorMethods,
   searched: boolean,
+  setAlignMode: (mode: AlignMode) => void,
 ) {
   return React.useCallback(
     (event: React.KeyboardEvent<HTMLElement>) => {
-      if (!visibleNodes) return
       const { nodes, focusedNode, expandedNodes } = visibleNodes
-      function handleVerticalMove(index: number) {
+
+      const handleVerticalMove = (index: number) => {
         if (0 <= index && index < nodes.length) {
           DOMHelper.focusFileExplorer()
+          setAlignMode('lazy')
           focusNode(nodes[index])
         } else {
           DOMHelper.focusSearchInput()
@@ -66,11 +69,13 @@ export function useHandleKeyDown(
             }
             if (expandedNodes.has(focusedNode.path)) {
               toggleExpansion(focusedNode, { recursive: event.altKey })
+              setAlignMode('lazy')
             } else {
               // go forward to the start of the list, find the closest node with lower depth
               const parentNode = getVisibleParentNode(nodes, focusedNode)
               if (parentNode) {
                 focusNode(parentNode)
+                setAlignMode('lazy')
               }
             }
             break
@@ -87,6 +92,7 @@ export function useHandleKeyDown(
                 const nextNode = nodes[focusedNodeIndex + 1]
                 if (focusedNode.contents?.includes(nextNode)) {
                   focusNode(nextNode)
+                  setAlignMode('lazy')
                 }
               } else {
                 toggleExpansion(focusedNode, { recursive: event.altKey })
@@ -103,6 +109,7 @@ export function useHandleKeyDown(
             // expand node or redirect to file page
             if (searched) {
               goTo(focusedNode.path.split('/'))
+              setAlignMode('top')
             } else {
               if (focusedNode.type === 'tree') {
                 toggleExpansion(focusedNode, { recursive: event.altKey })
@@ -145,6 +152,6 @@ export function useHandleKeyDown(
         }
       }
     },
-    [visibleNodes, searched, goTo, focusNode, toggleExpansion],
+    [visibleNodes, searched, goTo, focusNode, toggleExpansion, setAlignMode],
   )
 }
diff --git a/src/components/FileExplorer/hooks/useNodeRenderContext.tsx b/src/components/FileExplorer/hooks/useNodeRenderContext.tsx
deleted file mode 100644
index a739c51..0000000
--- a/src/components/FileExplorer/hooks/useNodeRenderContext.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import * as React from 'react'
-import { VisibleNodes } from 'utils/VisibleNodesGenerator'
-import { NodeRendererContext } from '../index'
-import { useHandleNodeFocus } from '../useHandleNodeFocus'
-import { useNodeRenderers } from './useNodeRenderers'
-import { useHandleNodeClick } from './useOnNodeClick'
-import { useRenderLabelText } from './useRenderLabelText'
-
-export function useNodeRenderContext(
-  visibleNodes: VisibleNodes | null,
-  onNodeClick: ReturnType<typeof useHandleNodeClick>,
-  onNodeFocus: ReturnType<typeof useHandleNodeFocus>,
-  renderActions: ReturnType<typeof useNodeRenderers>,
-  renderLabelText: ReturnType<typeof useRenderLabelText>,
-): NodeRendererContext | null {
-  return React.useMemo(
-    () =>
-      visibleNodes && {
-        visibleNodes,
-        onNodeClick,
-        onNodeFocus,
-        renderActions,
-        renderLabelText,
-      },
-    [visibleNodes, onNodeClick, onNodeFocus, renderActions, renderLabelText],
-  )
-}
diff --git a/src/components/FileExplorer/hooks/useOnNodeClick.tsx b/src/components/FileExplorer/hooks/useOnNodeClick.tsx
index 6e0403b..84a8996 100644
--- a/src/components/FileExplorer/hooks/useOnNodeClick.tsx
+++ b/src/components/FileExplorer/hooks/useOnNodeClick.tsx
@@ -2,12 +2,17 @@ import { useConfigs } from 'containers/ConfigsContext'
 import * as React from 'react'
 import { isOpenInNewWindowClick } from 'utils/general'
 import { loadWithPJAX } from 'utils/hooks/usePJAX'
-import { VisibleNodesGeneratorMethods } from './useOnVisibleNodesGeneratorReady'
+import { AlignMode } from '../useVirtualScroll'
+import { VisibleNodesGeneratorMethods } from './useVisibleNodesGeneratorMethods'
 
-export function useHandleNodeClick({ toggleExpansion, focusNode }: VisibleNodesGeneratorMethods) {
+export function useHandleNodeClick(
+  { toggleExpansion, focusNode }: VisibleNodesGeneratorMethods,
+  setAlignMode: (mode: AlignMode) => void,
+) {
   const { recursiveToggleFolder } = useConfigs().value
   return React.useCallback(
     (event: React.MouseEvent<HTMLElement, MouseEvent>, node: TreeNode) => {
+      setAlignMode('lazy')
       switch (node.type) {
         case 'tree': {
           const recursive =
@@ -40,6 +45,6 @@ export function useHandleNodeClick({ toggleExpansion, focusNode }: VisibleNodesG
         }
       }
     },
-    [toggleExpansion, recursiveToggleFolder, focusNode],
+    [toggleExpansion, recursiveToggleFolder, focusNode, setAlignMode],
   )
 }
diff --git a/src/components/FileExplorer/hooks/useOnSearch.tsx b/src/components/FileExplorer/hooks/useOnSearch.tsx
index f9b9fe8..2b88353 100644
--- a/src/components/FileExplorer/hooks/useOnSearch.tsx
+++ b/src/components/FileExplorer/hooks/useOnSearch.tsx
@@ -5,18 +5,16 @@ import { SearchMode, searchModes } from '../../searchModes'
 
 export function useOnSearch(
   updateSearchKey: (searchKey: string) => void,
-  visibleNodesGenerator: VisibleNodesGenerator | null,
+  visibleNodesGenerator: VisibleNodesGenerator,
 ) {
   const { restoreExpandedFolders } = useConfigs().value
   return React.useCallback(
     (searchKey: string, searchMode: SearchMode) => {
       updateSearchKey(searchKey)
-      if (visibleNodesGenerator) {
-        visibleNodesGenerator.search(
-          searchModes[searchMode].getSearchParams(searchKey),
-          restoreExpandedFolders,
-        )
-      }
+      visibleNodesGenerator.search(
+        searchModes[searchMode].getSearchParams(searchKey),
+        restoreExpandedFolders,
+      )
     },
     [updateSearchKey, visibleNodesGenerator, restoreExpandedFolders],
   )
diff --git a/src/components/FileExplorer/hooks/useToggleExpansion.tsx b/src/components/FileExplorer/hooks/useToggleExpansion.tsx
index 8cbf253..db06042 100644
--- a/src/components/FileExplorer/hooks/useToggleExpansion.tsx
+++ b/src/components/FileExplorer/hooks/useToggleExpansion.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { VisibleNodesGenerator } from 'utils/VisibleNodesGenerator'
 
-export function useToggleExpansion(visibleNodesGenerator: VisibleNodesGenerator | null) {
+export function useToggleExpansion(visibleNodesGenerator: VisibleNodesGenerator) {
   return React.useCallback(
     async (
       node: TreeNode,
@@ -11,8 +11,6 @@ export function useToggleExpansion(visibleNodesGenerator: VisibleNodesGenerator
         recursive?: boolean
       },
     ) => {
-      if (!visibleNodesGenerator) return
-
       if (node.type === 'tree') {
         visibleNodesGenerator.focusNode(node)
         await visibleNodesGenerator.toggleExpand(node, recursive)
diff --git a/src/components/FileExplorer/hooks/useVisibleNodesGenerator.tsx b/src/components/FileExplorer/hooks/useVisibleNodesGenerator.tsx
index 9ddf107..35610f5 100644
--- a/src/components/FileExplorer/hooks/useVisibleNodesGenerator.tsx
+++ b/src/components/FileExplorer/hooks/useVisibleNodesGenerator.tsx
@@ -7,7 +7,7 @@ import { useSequentialEffect } from 'utils/hooks/useSequentialEffect'
 import { VisibleNodesGenerator } from 'utils/VisibleNodesGenerator'
 import { SideBarStateContext } from '../../../containers/SideBarState'
 
-export function useVisibleNodesGenerator(metaData: MetaData) {
+export function useVisibleNodesGenerator(metaData: MetaData | null) {
   const [visibleNodesGenerator, setVisibleNodesGenerator] = useState<VisibleNodesGenerator | null>(
     null,
   )
@@ -21,6 +21,7 @@ export function useVisibleNodesGenerator(metaData: MetaData) {
     useCallback(
       shouldAbort => {
         catchNetworkErrors(async () => {
+          if (!metaData) return
           if (shouldAbort()) return
 
           setStateContext('tree-loading')
diff --git a/src/components/FileExplorer/hooks/useOnVisibleNodesGeneratorReady.tsx b/src/components/FileExplorer/hooks/useVisibleNodesGeneratorMethods.tsx
similarity index 86%
rename from src/components/FileExplorer/hooks/useOnVisibleNodesGeneratorReady.tsx
rename to src/components/FileExplorer/hooks/useVisibleNodesGeneratorMethods.tsx
index 81e858c..6363869 100644
--- a/src/components/FileExplorer/hooks/useOnVisibleNodesGeneratorReady.tsx
+++ b/src/components/FileExplorer/hooks/useVisibleNodesGeneratorMethods.tsx
@@ -7,7 +7,7 @@ import { useGoTo } from './useGoTo'
 import { useToggleExpansion } from './useToggleExpansion'
 
 export function useVisibleNodesGeneratorMethods(
-  visibleNodesGenerator: VisibleNodesGenerator | null,
+  visibleNodesGenerator: VisibleNodesGenerator,
   getCurrentPath: () => string[] | null,
   updateSearchKey: React.Dispatch<React.SetStateAction<string>>,
 ) {
@@ -17,9 +17,8 @@ export function useVisibleNodesGeneratorMethods(
   const focusNode = useFocusNode(visibleNodesGenerator)
 
   // Only run when visibleNodesGenerator changes
+  // Confirmed: other items in deps array also only update when that changes
   useEffect(() => {
-    if (!visibleNodesGenerator) return
-
     if (platform.shouldExpandAll?.()) {
       visibleNodesGenerator.onNextUpdate(visibleNodes =>
         visibleNodes.nodes.forEach(node => toggleExpansion(node, { recursive: true })),
@@ -28,7 +27,7 @@ export function useVisibleNodesGeneratorMethods(
       const targetPath = getCurrentPath()
       if (targetPath) goTo(targetPath)
     }
-  }, [visibleNodesGenerator]) // eslint-disable-line react-hooks/exhaustive-deps
+  }, [visibleNodesGenerator, getCurrentPath, goTo, toggleExpansion])
 
   return {
     expandTo,
diff --git a/src/components/FileExplorer/index.tsx b/src/components/FileExplorer/index.tsx
index e9c7926..0640126 100644
--- a/src/components/FileExplorer/index.tsx
+++ b/src/components/FileExplorer/index.tsx
@@ -1,19 +1,22 @@
 import { Label, Text } from '@primer/react'
 import { LoadingIndicator } from 'components/LoadingIndicator'
 import { SearchBar } from 'components/SearchBar'
+import { useConfigs } from 'containers/ConfigsContext'
+import { RepoContext } from 'containers/RepoContext'
 import { platform } from 'platforms'
 import * as React from 'react'
+import { usePrevious } from 'react-use'
+import { cx } from 'utils/cx'
 import { run } from 'utils/general'
+import { useElementSize } from 'utils/hooks/useElementSize'
 import { useLoadedContext } from 'utils/hooks/useLoadedContext'
 import { useOnLocationChange } from 'utils/hooks/useOnLocationChange'
 import { useOnPJAXDone } from 'utils/hooks/usePJAX'
-import { VisibleNodes } from 'utils/VisibleNodesGenerator'
+import { VisibleNodes, VisibleNodesGenerator } from 'utils/VisibleNodesGenerator'
 import { SideBarStateContext } from '../../containers/SideBarState'
-import { SizeObserver } from '../SizeObserver'
 import { useFocusFileExplorerOnFirstRender } from './hooks/useFocusFileExplorerOnFirstRender'
 import { useGetCurrentPath } from './hooks/useGetCurrentPath'
 import { useHandleKeyDown } from './hooks/useHandleKeyDown'
-import { useNodeRenderContext } from './hooks/useNodeRenderContext'
 import {
   NodeRenderer,
   useNodeRenderers,
@@ -24,11 +27,12 @@ import {
 } from './hooks/useNodeRenderers'
 import { useHandleNodeClick } from './hooks/useOnNodeClick'
 import { useOnSearch } from './hooks/useOnSearch'
-import { useVisibleNodesGeneratorMethods } from './hooks/useOnVisibleNodesGeneratorReady'
 import { useRenderLabelText } from './hooks/useRenderLabelText'
 import { useVisibleNodesGenerator } from './hooks/useVisibleNodesGenerator'
-import { ListView } from './ListView'
+import { useVisibleNodesGeneratorMethods } from './hooks/useVisibleNodesGeneratorMethods'
+import { Node } from './Node'
 import { useHandleNodeFocus } from './useHandleNodeFocus'
+import { AlignMode, useVirtualScroll } from './useVirtualScroll'
 import { useVisibleNodes } from './useVisibleNodes'
 
 export type NodeRendererContext = {
@@ -39,17 +43,95 @@ export type NodeRendererContext = {
   visibleNodes: VisibleNodes
 }
 
-type Props = {
-  metaData: MetaData
-}
-
-export function FileExplorer({ metaData }: Props) {
+export function FileExplorer() {
+  const metaData = React.useContext(RepoContext)
   const visibleNodesGenerator = useVisibleNodesGenerator(metaData)
   const visibleNodes = useVisibleNodes(visibleNodesGenerator)
+  const state = useLoadedContext(SideBarStateContext).value
 
+  return (
+    <>
+      {run(() => {
+        switch (state) {
+          case 'tree-loading':
+            return <LoadingIndicator text={'Fetching File List...'} />
+          case 'tree-rendering':
+            return <LoadingIndicator text={'Rendering File List...'} />
+          case 'tree-rendered':
+            return (
+              metaData &&
+              visibleNodesGenerator &&
+              visibleNodes && (
+                <LoadedFileExplorer
+                  metaData={metaData}
+                  visibleNodesGenerator={visibleNodesGenerator}
+                  visibleNodes={visibleNodes}
+                />
+              )
+            )
+        }
+      })}
+    </>
+  )
+}
+
+function LoadedFileExplorer({
+  metaData,
+  visibleNodesGenerator,
+  visibleNodes,
+}: {
+  metaData: MetaData
+  visibleNodesGenerator: VisibleNodesGenerator
+  visibleNodes: VisibleNodes
+}) {
   const [searchKey, updateSearchKey] = React.useState('')
   const searched = !!searchKey
   const onSearch = useOnSearch(updateSearchKey, visibleNodesGenerator)
+  const { focusedNode, nodes, expandedNodes, depths, loading } = visibleNodes
+
+  const {
+    ref: filesRef,
+    size: [, height],
+  } = useElementSize<HTMLDivElement>()
+  const { compactFileTree } = useConfigs().value
+  const {
+    ref: scrollElementRef,
+    onScroll,
+    visibleRows,
+    containerStyle,
+    scrollToItem,
+  } = useVirtualScroll<HTMLDivElement>({
+    totalAmount: visibleNodes.nodes.length,
+    rowHeight: compactFileTree ? 24 : 37,
+    viewportHeight: height,
+    overScan: 10,
+  })
+
+  // - init loading
+  //   - "top"
+  // - jump to file
+  //   - "top"
+  // - tab to file
+  //   - "lazy"
+  // - click file/folder
+  //   - "lazy"
+  // - navigate with keyboard
+  //   - "lazy"
+  const [alignMode, setAlignMode] = React.useState<AlignMode>('top')
+
+  const index = React.useMemo(
+    () => (focusedNode?.path ? nodes.findIndex(node => node.path === focusedNode.path) : -1),
+    [focusedNode?.path, nodes],
+  )
+
+  React.useLayoutEffect(() => {
+    if (index !== -1) scrollToItem(index, alignMode)
+  }, [index, scrollToItem, alignMode])
+  const prevSearchKey = usePrevious(searchKey)
+  React.useEffect(() => {
+    // when start searching or stop searching
+    if (!prevSearchKey !== !searchKey) scrollToItem(0, alignMode)
+  }, [prevSearchKey, searchKey, scrollToItem, alignMode])
 
   const getCurrentPath = useGetCurrentPath(metaData)
   const methods = useVisibleNodesGeneratorMethods(
@@ -58,9 +140,9 @@ export function FileExplorer({ metaData }: Props) {
     updateSearchKey,
   )
   const { expandTo, goTo, focusNode } = methods
-  const handleNodeClick = useHandleNodeClick(methods)
-  const handleNodeFocus = useHandleNodeFocus(methods)
-  const handleKeyDown = useHandleKeyDown(visibleNodes, methods, searched)
+  const handleNodeFocus = useHandleNodeFocus(methods, setAlignMode)
+  const handleNodeClick = useHandleNodeClick(methods, setAlignMode)
+  const handleKeyDown = useHandleKeyDown(visibleNodes, methods, searched, setAlignMode)
   const handleFocusSearchBar = () => focusNode(null)
 
   const renderActions = useNodeRenderers([
@@ -71,15 +153,6 @@ export function FileExplorer({ metaData }: Props) {
   ])
   const renderLabelText = useRenderLabelText(searchKey)
 
-  const nodeRendererContext = useNodeRenderContext(
-    visibleNodes,
-    handleNodeClick,
-    handleNodeFocus,
-    renderActions,
-    renderLabelText,
-  )
-
-  const state = useLoadedContext(SideBarStateContext).value
   useFocusFileExplorerOnFirstRender()
 
   const goToCurrentItem = React.useCallback(() => {
@@ -92,59 +165,68 @@ export function FileExplorer({ metaData }: Props) {
 
   return (
     <div className={`file-explorer`} tabIndex={-1} onKeyDown={handleKeyDown}>
-      {run(() => {
-        switch (state) {
-          case 'tree-loading':
-            return <LoadingIndicator text={'Fetching File List...'} />
-          case 'tree-rendering':
-            return <LoadingIndicator text={'Rendering File List...'} />
-          case 'tree-rendered':
-            return (
-              visibleNodes &&
-              nodeRendererContext && (
-                <>
-                  {visibleNodesGenerator?.defer && (
-                    <div className={'status'}>
-                      <Label
-                        title="This repository is large. Gitako has switched to Lazy Mode to improve performance. Folders will be loaded on demand."
-                        className={'lazy-mode'}
-                        variant="attention"
-                      >
-                        Lazy Mode is ON
-                      </Label>
-                    </div>
-                  )}
-                  <SearchBar value={searchKey} onSearch={onSearch} onFocus={handleFocusSearchBar} />
-                  {searched && visibleNodes.nodes.length === 0 && (
-                    <>
-                      <Text marginTop={6} textAlign="center" color="text.gray">
-                        No results found.
-                      </Text>
-                      {visibleNodesGenerator?.defer && (
-                        <Text textAlign="center" color="gray.4" fontSize="12px">
-                          Search results are limited to loaded folders in Lazy Mode.
-                        </Text>
-                      )}
-                    </>
-                  )}
-                  {visibleNodes.nodes.length > 0 && (
-                    <SizeObserver<HTMLDivElement>>
-                      {({ width = 0, height = 0 }, ref) => (
-                        <div className={'files'} ref={ref}>
-                          <ListView
-                            height={height}
-                            width={width}
-                            nodeRendererContext={nodeRendererContext}
-                          />
-                        </div>
-                      )}
-                    </SizeObserver>
-                  )}
-                </>
+      {visibleNodesGenerator?.defer && (
+        <div className={'status'}>
+          <Label
+            title="This repository is large. Gitako has switched to Lazy Mode to improve performance. Folders will be loaded on demand."
+            className={'lazy-mode'}
+            variant="attention"
+          >
+            Lazy Mode is ON
+          </Label>
+        </div>
+      )}
+      <SearchBar value={searchKey} onSearch={onSearch} onFocus={handleFocusSearchBar} />
+      {searched && visibleNodes.nodes.length === 0 && (
+        <>
+          <Text marginTop={6} textAlign="center" color="text.gray">
+            No results found.
+          </Text>
+          {visibleNodesGenerator?.defer && (
+            <Text textAlign="center" color="gray.4" fontSize="12px">
+              Search results are limited to loaded folders in Lazy Mode.
+            </Text>
+          )}
+        </>
+      )}
+      <div
+        className={cx('files', {
+          // instead of unmounting, hide the element when not needed, so that the ref can be preserved after search result matches nothing
+          hidden: visibleNodes.nodes.length === 0,
+        })}
+        ref={filesRef}
+      >
+        <div
+          style={{
+            height,
+            width: '100%',
+            overflow: 'auto',
+          }}
+          ref={scrollElementRef}
+          onScroll={onScroll}
+        >
+          <div style={containerStyle}>
+            {visibleRows.map(({ row, style }) => {
+              const node = nodes[row]
+              return (
+                <Node
+                  key={node.path}
+                  node={node}
+                  style={style}
+                  depth={depths.get(node) || 0}
+                  focused={focusedNode?.path === node.path}
+                  loading={loading.has(node.path)}
+                  expanded={expandedNodes.has(node.path)}
+                  onClick={handleNodeClick}
+                  onFocus={handleNodeFocus}
+                  renderLabelText={renderLabelText}
+                  renderActions={renderActions}
+                />
               )
-            )
-        }
-      })}
+            })}
+          </div>
+        </div>
+      </div>
     </div>
   )
 }
diff --git a/src/components/FileExplorer/useHandleNodeFocus.tsx b/src/components/FileExplorer/useHandleNodeFocus.tsx
index dcaf1f8..50fddfe 100644
--- a/src/components/FileExplorer/useHandleNodeFocus.tsx
+++ b/src/components/FileExplorer/useHandleNodeFocus.tsx
@@ -1,9 +1,16 @@
 import * as React from 'react'
-import { VisibleNodesGeneratorMethods } from './hooks/useOnVisibleNodesGeneratorReady'
+import { VisibleNodesGeneratorMethods } from './hooks/useVisibleNodesGeneratorMethods'
+import { AlignMode } from './useVirtualScroll'
 
-export function useHandleNodeFocus({ focusNode }: VisibleNodesGeneratorMethods) {
+export function useHandleNodeFocus(
+  { focusNode }: VisibleNodesGeneratorMethods,
+  setAlignMode: (mode: AlignMode) => void,
+) {
   return React.useCallback(
-    (event: React.FocusEvent<HTMLElement, Element>, node: TreeNode) => focusNode(node),
-    [focusNode],
+    (event: React.FocusEvent<HTMLElement, Element>, node: TreeNode) => {
+      setAlignMode('lazy')
+      focusNode(node)
+    },
+    [focusNode, setAlignMode],
   )
 }
diff --git a/src/components/FileExplorer/useLatestValueRef.tsx b/src/components/FileExplorer/useLatestValueRef.tsx
new file mode 100644
index 0000000..dd3738f
--- /dev/null
+++ b/src/components/FileExplorer/useLatestValueRef.tsx
@@ -0,0 +1,14 @@
+import * as React from 'react';
+
+function useLatestValueRef<T>(value: T) {
+  const ref = React.useRef(value);
+  React.useEffect(() => {
+    ref.current = value;
+  });
+  return ref;
+}
+export function useCallbackRef<Args extends AnyArray, R>(
+  callback: (...args: Args) => R): (...args: Args) => R {
+  const ref = useLatestValueRef(callback);
+  return React.useCallback((...args: Args) => ref.current(...args), [ref]);
+}
diff --git a/src/components/FileExplorer/useVirtualScroll.tsx b/src/components/FileExplorer/useVirtualScroll.tsx
new file mode 100644
index 0000000..1883ab3
--- /dev/null
+++ b/src/components/FileExplorer/useVirtualScroll.tsx
@@ -0,0 +1,125 @@
+import * as React from 'react'
+import { useCallbackRef } from './useLatestValueRef'
+
+function memoize<Args extends AnyArray, R>(
+  fn: (...args: Args) => R,
+  serializeArguments: (...args: Args) => string | number,
+): (...args: Args) => R {
+  const memory = new Map<string | number, R>()
+  return (...args) => {
+    const key = serializeArguments(...args)
+    let r = memory.get(key)
+    if (!r) memory.set(key, (r = fn(...args)))
+    return r
+  }
+}
+
+export type AlignMode = 'top' | 'end' | 'lazy'
+
+export function useVirtualScroll<E extends HTMLElement>({
+  totalAmount,
+  viewportHeight,
+  rowHeight,
+  overScan = 0,
+}: {
+  totalAmount: number
+  overScan?: number
+  viewportHeight: number
+  rowHeight: number
+}) {
+  const totalHeight = totalAmount * rowHeight
+
+  const ref = React.useRef<E | null>(null) // TODO: compare DOM native event listener
+  const [scrollTop, setScrollTop] = React.useState(0)
+  const [controlledScrollTop, setControlledScrollTop] = React.useState(0)
+
+  const onScroll = React.useCallback((e: React.UIEvent<E, UIEvent>) => {
+    setScrollTop(e.currentTarget.scrollTop)
+  }, [])
+
+  const [startRenderIndex, endRenderIndex] = React.useMemo(() => {
+    const viewportLastItemOverflow = viewportHeight % rowHeight
+    const visibleRowCount = (viewportHeight - viewportLastItemOverflow) / rowHeight
+    const inViewIndexFirst = (Math.min(scrollTop, totalHeight - viewportHeight) / rowHeight) >> 0
+    const inViewIndexLast = inViewIndexFirst + visibleRowCount
+    const renderIndexFirst = Math.max(0, inViewIndexFirst - overScan)
+    const renderIndexLast = Math.min(totalAmount, inViewIndexLast + overScan)
+    return [renderIndexFirst, renderIndexLast]
+  }, [scrollTop, viewportHeight, overScan, rowHeight, totalAmount, totalHeight])
+
+  const indexes = React.useMemo(() => {
+    const indexes: number[] = []
+    let i = startRenderIndex
+    while (i < endRenderIndex) indexes.push(i++)
+    return indexes
+  }, [startRenderIndex, endRenderIndex])
+
+  const mapStyles = React.useCallback(
+    (row: number): React.CSSProperties => ({
+      position: 'absolute',
+      top: 0,
+      transform: `translateY(${row * rowHeight}px)`,
+      width: '100%',
+      height: rowHeight,
+    }),
+    [rowHeight],
+  )
+  const memoizedStyler = React.useMemo(() => memoize(mapStyles, row => row), [mapStyles])
+
+  const visibleRows: { row: number; style: React.CSSProperties }[] = React.useMemo(
+    () =>
+      indexes.map(row => ({
+        row,
+        style: memoizedStyler(row),
+      })),
+    [indexes, memoizedStyler],
+  )
+
+  React.useLayoutEffect(() => {
+    if (ref.current) {
+      ref.current.scrollTop = controlledScrollTop
+    }
+  }, [controlledScrollTop])
+
+  const containerStyle: React.CSSProperties = React.useMemo(
+    () => ({
+      height: totalHeight,
+      position: 'relative',
+    }),
+    [totalHeight],
+  )
+
+  const scrollToItem = useCallbackRef((row: number, mode: AlignMode) => {
+    const getOffsetEnd = () => row * rowHeight + rowHeight - viewportHeight
+    const getOffsetTop = () => row * rowHeight
+
+    const updateScrollPosition = (scrollTop: number) => {
+      setScrollTop(scrollTop)
+      setControlledScrollTop(scrollTop)
+    }
+
+    switch (mode) {
+      case 'top':
+        return updateScrollPosition(getOffsetTop())
+      case 'end':
+        return updateScrollPosition(getOffsetEnd())
+      case 'lazy': {
+        const isAbove = row * rowHeight < scrollTop
+        const isBelow = row * rowHeight + rowHeight > scrollTop + viewportHeight
+        if (isBelow) {
+          updateScrollPosition(getOffsetEnd())
+        } else if (isAbove) {
+          updateScrollPosition(getOffsetTop())
+        }
+      }
+    }
+  })
+
+  return {
+    ref,
+    visibleRows,
+    onScroll,
+    containerStyle,
+    scrollToItem,
+  }
+}
diff --git a/src/components/MetaBar.tsx b/src/components/MetaBar.tsx
index 0500067..ae31309 100644
--- a/src/components/MetaBar.tsx
+++ b/src/components/MetaBar.tsx
@@ -1,14 +1,14 @@
 import { GitBranchIcon } from '@primer/octicons-react'
 import { Box, BranchName, Breadcrumbs, Text } from '@primer/react'
+import { RepoContext } from 'containers/RepoContext'
 import { platform } from 'platforms'
 import * as React from 'react'
 import { createAnchorClickHandler } from 'utils/createAnchorClickHandler'
 
-type Props = {
-  metaData: MetaData
-}
+export function MetaBar() {
+  const metaData = React.useContext(RepoContext)
+  if (!metaData) return null
 
-export function MetaBar({ metaData }: Props) {
   const { userName, repoName, branchName } = metaData
   const { repoUrl, userUrl, branchUrl } = platform.resolveUrlFromMetaData(metaData)
   return (
diff --git a/src/components/SideBar.tsx b/src/components/SideBar.tsx
index 4b63ed9..aca0575 100644
--- a/src/components/SideBar.tsx
+++ b/src/components/SideBar.tsx
@@ -16,7 +16,6 @@ import { useLoadedContext } from 'utils/hooks/useLoadedContext'
 import { useOnPJAXDone, usePJAX } from 'utils/hooks/usePJAX'
 import { useStateIO } from 'utils/hooks/useStateIO'
 import { SideBarErrorContext } from '../containers/ErrorContext'
-import { RepoContext } from '../containers/RepoContext'
 import { SideBarStateContext } from '../containers/SideBarState'
 import { Theme } from '../containers/Theme'
 import { useToggleSideBarWithKeyboard } from '../utils/hooks/useToggleSideBarWithKeyboard'
@@ -25,7 +24,6 @@ import { RoundIconButton } from './RoundIconButton'
 import { SettingsBarContent } from './settings/SettingsBar'
 
 export function SideBar() {
-  const metaData = React.useContext(RepoContext)
   const state = useLoadedContext(SideBarStateContext).value
   const configContext = useConfigs()
 
@@ -176,7 +174,7 @@ export function SideBar() {
                     }
                   />
                 </div>
-                {metaData && <MetaBar metaData={metaData} />}
+                <MetaBar />
               </div>
               {run(() => {
                 switch (state) {
@@ -189,8 +187,11 @@ export function SideBar() {
                     return <LoadingIndicator text={'Fetching repo meta...'} />
                   case 'error-due-to-auth':
                     return <AccessDeniedDescription />
-                  default:
-                    return metaData && <FileExplorer metaData={metaData} />
+                  case 'meta-loaded':
+                  case 'tree-loading':
+                  case 'tree-rendering':
+                  case 'tree-rendered':
+                    return <FileExplorer />
                 }
               })}
             </div>
diff --git a/src/components/SideBarBodyWrapper.tsx b/src/components/SideBarBodyWrapper.tsx
index 92bb720..96e0104 100644
--- a/src/components/SideBarBodyWrapper.tsx
+++ b/src/components/SideBarBodyWrapper.tsx
@@ -119,7 +119,7 @@ export function SideBarBodyWrapper({
       style={{ height: heightForSafari }}
       onMouseLeave={onMouseLeave}
     >
-      <div className={'gitako-side-bar-body-wrapper-content'}>{children}</div>
+      {children}
       {features.resize && (
         <ResizeHandler
           onResize={onResize}
diff --git a/src/components/SizeObserver.tsx b/src/components/SizeObserver.tsx
deleted file mode 100644
index 26347e6..0000000
--- a/src/components/SizeObserver.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import * as React from 'react'
-import * as features from 'utils/features'
-
-type Size = {
-  width: number
-  height: number
-}
-
-type Props<R extends Element> = {
-  children(size: Partial<Size>, ref: React.MutableRefObject<R | null>): React.ReactNode
-}
-
-export function SizeObserver<R extends Element>({ children }: Props<R>) {
-  const ref = React.useRef<R | null>(null)
-
-  const [size, setSize] = React.useState<Partial<Size>>({
-    width: undefined,
-    height: undefined,
-  })
-
-  React.useEffect(() => {
-    if (ref.current) {
-      if (features.resize) {
-        const observer = new window.ResizeObserver(entries => {
-          const entry = entries[0]
-          if (!entry) return
-          const rect = entry.contentRect
-          setSize(rect)
-        })
-        observer.observe(ref.current)
-        return () => observer.disconnect()
-      } else {
-        if ('getBoundingClientRect' in ref.current) {
-          const rect = ref.current.getBoundingClientRect()
-          setSize(rect)
-        }
-      }
-    }
-  }, [])
-
-  return <>{children(size, ref)}</>
-}
diff --git a/src/global.d.ts b/src/global.d.ts
index 7c00502..a47db99 100644
--- a/src/global.d.ts
+++ b/src/global.d.ts
@@ -1,3 +1,5 @@
+type AnyArray = any[] // eslint-disable-line @typescript-eslint/no-explicit-any
+
 type MetaData = {
   userName: string
   repoName: string
diff --git a/src/styles/index.scss b/src/styles/index.scss
index af8cfef..7878191 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -497,12 +497,11 @@ $minimal-z-index: max(
       }
 
       .file-explorer {
-        width: 100%;
-        height: 100%;
         outline: none;
-        display: flex;
+        display: inline-flex;
+        flex: 1;
         flex-direction: column;
-        flex-wrap: nowrap;
+        overflow: hidden; // essential for shrinking `.files` when viewport height reduce
 
         .search-input {
           padding-left: 0;
@@ -534,6 +533,10 @@ $minimal-z-index: max(
           flex: 1;
           overflow: hidden;
 
+          &.hidden {
+            display: none;
+          }
+
           // Put this inside files will help files to get proper size derived from parents, regardless of its content size
           .magic-size-container {
             position: absolute;
@@ -607,7 +610,7 @@ $minimal-z-index: max(
 
             .octicon.ChevronRight {
               // smooth rotation animation
-              transition: transform .3s ease;
+              transition: transform 0.3s ease;
             }
 
             & + .octicon-wrapper,
diff --git a/src/utils/DOMHelper.ts b/src/utils/DOMHelper.ts
index 1881f5f..2884e70 100644
--- a/src/utils/DOMHelper.ts
+++ b/src/utils/DOMHelper.ts
@@ -132,7 +132,8 @@ export function copyElementContent(element: Element, trimLeadingSpace?: boolean)
 export function focusFileExplorer() {
   const sideBarContentSelector = '.gitako-side-bar .file-explorer'
   $(sideBarContentSelector, sideBarElement => {
-    if (sideBarElement instanceof HTMLElement) sideBarElement.focus()
+    if (document.activeElement !== sideBarElement && sideBarElement instanceof HTMLElement)
+      sideBarElement.focus()
   })
 }
 
diff --git a/src/utils/hooks/useElementSize.ts b/src/utils/hooks/useElementSize.ts
new file mode 100644
index 0000000..ef87f22
--- /dev/null
+++ b/src/utils/hooks/useElementSize.ts
@@ -0,0 +1,32 @@
+import * as React from 'react'
+import * as features from 'utils/features'
+import { Size2D } from '../../components/SideBarBodyWrapper'
+
+export function useElementSize<E extends HTMLElement>() {
+  const ref = React.useRef<E | null>(null)
+
+  const [size, setSize] = React.useState<Size2D>([0, 0])
+
+  React.useEffect(() => {
+    if (ref.current) {
+      if (features.resize) {
+        const observer = new window.ResizeObserver(entries => {
+          const entry = entries[0]
+          if (!entry) return
+          const { width, height } = entry.contentRect
+          setSize([width, height])
+        })
+        observer.observe(ref.current)
+        return () => observer.disconnect()
+      } else if ('getBoundingClientRect' in ref.current) {
+        const { width, height } = ref.current.getBoundingClientRect()
+        setSize([width, height])
+      }
+    }
+  }, [])
+
+  return {
+    ref,
+    size,
+  }
+}

From 49093718537b72e22ede342bae5a05dbde9bd10c Mon Sep 17 00:00:00 2001
From: EnixCoda <enixcoda@gmail.com>
Date: Sun, 19 Jun 2022 23:18:32 +0800
Subject: [PATCH 72/93] fix: patch primer themes

---
 src/containers/Theme.tsx | 38 ++++++++++++++++++++------------------
 1 file changed, 20 insertions(+), 18 deletions(-)

diff --git a/src/containers/Theme.tsx b/src/containers/Theme.tsx
index 3ba2551..b9f44b9 100644
--- a/src/containers/Theme.tsx
+++ b/src/containers/Theme.tsx
@@ -1,27 +1,29 @@
+import primitives from '@primer/primitives'
 import { BaseStyles, ThemeProvider } from '@primer/react'
 import theme from '@primer/react/lib-esm/theme'
 import * as React from 'react'
 
+// Temporary color fix for out-of-date embedded @primer/primitives in @primer/react
+// The `*_tritanopia` themes are actually not bundled within @primer/react@35.2.2
+// TODO: Upgrade @primer/react to support these themes
+const fixedTheme = {
+  ...theme,
+  colorSchemes: {
+    ...theme.colorSchemes,
+    light_tritanopia: theme.colorSchemes.light,
+    dark_tritanopia: theme.colorSchemes.dark,
+  },
+}
+
+const validColorSchemes = Object.keys(fixedTheme.colorSchemes) as EnumString<
+  keyof typeof primitives['colors']
+>[]
+
 const colorModeMap: Record<string, 'night' | 'day'> = {
   dark: 'night',
   light: 'day',
 }
 
-const validColorSchemes = Object.keys(theme.colorSchemes) as EnumString<
-  | 'light'
-  | 'light_high_contrast'
-  | 'light_colorblind'
-  | 'light_tritanopia'
-  | 'dark'
-  | 'dark_dimmed'
-  | 'dark_high_contrast'
-  | 'dark_colorblind'
-  | 'dark_tritanopia'
->[]
-// The `*_tritanopia` themes are actually not bundled within @primer/react@35.2.2
-// TODO: Upgrade @primer/react to support these themes
-// BUT: Do not remove the validation, there might be other themes in future
-
 const getPreferenceFromDOM = () => {
   // <html lang="en" data-color-mode="auto" data-light-theme="light" data-dark-theme="dark" ...
   // <html lang="en" data-color-mode="light" data-light-theme="light" data-dark-theme="dark" ...
@@ -30,8 +32,8 @@ const getPreferenceFromDOM = () => {
 
   return {
     colorMode: (colorMode && colorModeMap[colorMode]) || 'auto',
-    dayScheme: lightTheme && validColorSchemes.includes(lightTheme) ? lightTheme : undefined,
-    nightScheme: darkTheme && validColorSchemes.includes(darkTheme) ? darkTheme : undefined,
+    dayScheme: lightTheme && validColorSchemes.includes(lightTheme) ? lightTheme : 'light',
+    nightScheme: darkTheme && validColorSchemes.includes(darkTheme) ? darkTheme : 'dark',
   } as const
 }
 
@@ -49,7 +51,7 @@ function useThemePreference() {
 export function Theme({ children }: React.PropsWithChildren<{}>) {
   const themePreference = useThemePreference()
   return (
-    <ThemeProvider {...themePreference}>
+    <ThemeProvider {...themePreference} theme={fixedTheme}>
       <BaseStyles>{children}</BaseStyles>
     </ThemeProvider>
   )

From 11942789b87313e466dadac99adfe0b6fddd6677 Mon Sep 17 00:00:00 2001
From: EnixCoda <enixcoda@gmail.com>
Date: Sun, 19 Jun 2022 23:18:55 +0800
Subject: [PATCH 73/93] chore: shorten is

---
 src/utils/is.ts | 14 +++++---------
 1 file changed, 5 insertions(+), 9 deletions(-)

diff --git a/src/utils/is.ts b/src/utils/is.ts
index b6062e5..41b95d0 100644
--- a/src/utils/is.ts
+++ b/src/utils/is.ts
@@ -84,14 +84,10 @@ export const is = {
     string: <T>(d: T | string): d is T => typeof d !== 'string',
   },
   JSON: {
-    object(d: unknown): d is JSONObject {
-      return (typeof d === 'object' && d && !Array.isArray(d)) || false
-    },
-    array(d: unknown): d is JSONArray {
-      return Array.isArray(d)
-    },
-    plain(d: unknown): d is JSONPrimitive {
-      return d === null || d === 'undefined' || is.boolean(d) || is.number(d) || is.string(d)
-    },
+    object: (d: unknown): d is JSONObject =>
+      (typeof d === 'object' && d !== null && !Array.isArray(d)) || false,
+    array: (d: unknown): d is JSONArray => Array.isArray(d),
+    plain: (d: unknown): d is JSONPrimitive =>
+      d === null || d === 'undefined' || is.boolean(d) || is.number(d) || is.string(d),
   },
 }

From 26db4e825903fe47e083d04e2d271f0eabc4a2a7 Mon Sep 17 00:00:00 2001
From: EnixCoda <enixcoda@gmail.com>
Date: Sun, 19 Jun 2022 23:24:48 +0800
Subject: [PATCH 74/93] build: add UT to CI

---
 .github/workflows/ci.yml | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index f7075e7..32d14bf 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -29,7 +29,7 @@ jobs:
         id: yarn-cache-dir-path
         run: echo "::set-output name=dir::$(yarn cache dir)"
 
-      - name: Cache deps
+      - name: Cache Dependencies
         uses: actions/cache@v1
         id: yarn-cache
         with:
@@ -38,7 +38,7 @@ jobs:
           restore-keys: |
             ${{ runner.os }}-yarn-
 
-      - name: Install deps
+      - name: Install Dependencies
         env:
           PUPPETEER_SKIP_CHROMIUM_DOWNLOAD: true
         run: |
@@ -48,7 +48,11 @@ jobs:
         run: |
           make build
 
-      - name: Test
+      - name: Unit Test
+        run: |
+          yarn jest src
+
+      - name: E2E Test
         uses: mujo-code/puppeteer-headful@master
         env:
           CI: 'true'

From 5cddc2077ea5e75deb6f8c191b9daef3551be216 Mon Sep 17 00:00:00 2001
From: EnixCoda <enixcoda@gmail.com>
Date: Fri, 24 Jun 2022 22:08:50 +0800
Subject: [PATCH 75/93] chore: enhance tab focus flow, skip file explorer
 container

---
 src/components/FileExplorer/index.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/FileExplorer/index.tsx b/src/components/FileExplorer/index.tsx
index 0640126..05ba77b 100644
--- a/src/components/FileExplorer/index.tsx
+++ b/src/components/FileExplorer/index.tsx
@@ -194,6 +194,7 @@ function LoadedFileExplorer({
           // instead of unmounting, hide the element when not needed, so that the ref can be preserved after search result matches nothing
           hidden: visibleNodes.nodes.length === 0,
         })}
+        tabIndex={-1} // prevent getting focus via tab key on GitHub
         ref={filesRef}
       >
         <div

From ce3dffb84debbf22e2177742c8772eeebead6a6a Mon Sep 17 00:00:00 2001
From: EnixCoda <enixcoda@gmail.com>
Date: Mon, 4 Jul 2022 02:14:32 +0800
Subject: [PATCH 76/93] fix: set DOM scrollTop when programmatically scroll to
 item

---
 src/components/FileExplorer/useVirtualScroll.tsx | 13 +++++--------
 1 file changed, 5 insertions(+), 8 deletions(-)

diff --git a/src/components/FileExplorer/useVirtualScroll.tsx b/src/components/FileExplorer/useVirtualScroll.tsx
index 1883ab3..dad2973 100644
--- a/src/components/FileExplorer/useVirtualScroll.tsx
+++ b/src/components/FileExplorer/useVirtualScroll.tsx
@@ -31,7 +31,6 @@ export function useVirtualScroll<E extends HTMLElement>({
 
   const ref = React.useRef<E | null>(null) // TODO: compare DOM native event listener
   const [scrollTop, setScrollTop] = React.useState(0)
-  const [controlledScrollTop, setControlledScrollTop] = React.useState(0)
 
   const onScroll = React.useCallback((e: React.UIEvent<E, UIEvent>) => {
     setScrollTop(e.currentTarget.scrollTop)
@@ -75,12 +74,6 @@ export function useVirtualScroll<E extends HTMLElement>({
     [indexes, memoizedStyler],
   )
 
-  React.useLayoutEffect(() => {
-    if (ref.current) {
-      ref.current.scrollTop = controlledScrollTop
-    }
-  }, [controlledScrollTop])
-
   const containerStyle: React.CSSProperties = React.useMemo(
     () => ({
       height: totalHeight,
@@ -95,7 +88,11 @@ export function useVirtualScroll<E extends HTMLElement>({
 
     const updateScrollPosition = (scrollTop: number) => {
       setScrollTop(scrollTop)
-      setControlledScrollTop(scrollTop)
+
+      // Note: storing the scrollTop into a state and update DOM element scrollTop inside a layout effect would not work.
+      if (ref.current) {
+        ref.current.scrollTop = scrollTop
+      }
     }
 
     switch (mode) {

From f6675e8163b20152d1d850e5a3eebae618b70c72 Mon Sep 17 00:00:00 2001
From: EnixCoda <enixcoda@gmail.com>
Date: Mon, 4 Jul 2022 21:24:24 +0800
Subject: [PATCH 77/93] fix: handle profile repositories <-> repository
 redirecting

---
 src/components/SideBar.tsx     | 67 +++++++++++++---------------------
 src/containers/RepoContext.tsx | 10 +++--
 src/content.tsx                | 11 ++----
 src/global.d.ts                |  5 ++-
 src/platforms/GitHub/index.ts  | 19 +++++++++-
 src/platforms/index.ts         | 16 ++++----
 src/platforms/platform.d.ts    |  1 +
 7 files changed, 69 insertions(+), 60 deletions(-)

diff --git a/src/components/SideBar.tsx b/src/components/SideBar.tsx
index 24f79d9..5ae23c7 100644
--- a/src/components/SideBar.tsx
+++ b/src/components/SideBar.tsx
@@ -25,6 +25,7 @@ import { SettingsBarContent } from './settings/SettingsBar'
 
 export function SideBar() {
   const state = useLoadedContext(SideBarStateContext).value
+  const error = useLoadedContext(SideBarErrorContext).value
   const configContext = useConfigs()
 
   const { sideBarWidth } = configContext.value
@@ -59,17 +60,18 @@ export function SideBar() {
         : false
       : intelligentToggle,
   )
-  const shouldShow = $shouldShow.value
-  const toggleBodyIndent = React.useCallback(() => {
-    if (sidebarToggleMode === 'persistent') {
-      DOMHelper.setBodyIndent(shouldShow)
-    } else {
-      DOMHelper.setBodyIndent(false)
-    }
+  // Lock false on error
+  const setShowSideBar = $shouldShow.onChange
 
-    if (shouldShow) {
-      DOMHelper.focusFileExplorer() // TODO: verify if it works
-    }
+  const shouldShow = React.useMemo(
+    () => !error && state !== 'disabled' && $shouldShow.value,
+    [error, state, $shouldShow.value],
+  )
+
+  const toggleBodyIndent = React.useCallback(() => {
+    DOMHelper.setBodyIndent(sidebarToggleMode === 'persistent' ? shouldShow : false)
+
+    if (shouldShow) DOMHelper.focusFileExplorer() // TODO: verify if it works
   }, [shouldShow, sidebarToggleMode])
 
   React.useEffect(() => {
@@ -85,24 +87,7 @@ export function SideBar() {
     }
   }, [shouldShow, intelligentToggle]) // eslint-disable-line react-hooks/exhaustive-deps
 
-  const error = useLoadedContext(SideBarErrorContext).value
-  // Lock shouldShow on error
-  React.useEffect(() => {
-    if (error && shouldShow) {
-      $shouldShow.onChange(false)
-    }
-  }, [error]) // eslint-disable-line react-hooks/exhaustive-deps
-
-  const setShowSideBar = React.useCallback(
-    (show: boolean) => {
-      if (!error) $shouldShow.onChange(show)
-    },
-    [error], // eslint-disable-line react-hooks/exhaustive-deps
-  )
-
-  const toggleShowSideBar = React.useCallback(() => {
-    if (!error) $shouldShow.onChange(show => !show)
-  }, [error]) // eslint-disable-line react-hooks/exhaustive-deps
+  const toggleShowSideBar = React.useCallback(() => setShowSideBar(show => !show), [setShowSideBar])
   useToggleSideBarWithKeyboard(state, toggleShowSideBar)
 
   const updateSideBarVisibility = React.useCallback(() => {
@@ -126,22 +111,24 @@ export function SideBar() {
     }
   }, [hideSidebarOnInvalidToken, setShowSideBar])
 
+  if (state === 'disabled') return null
+
   return (
     <Theme>
+      <Portal into={$logoContainerElement.value}>
+        <ToggleShowButton
+          error={error}
+          className={cx({
+            hidden: shouldShow,
+          })}
+          onHover={sidebarToggleMode === 'float' ? () => setShowSideBar(true) : undefined}
+          onClick={toggleShowSideBar}
+        />
+      </Portal>
       <div className={'gitako-side-bar'}>
-        <Portal into={$logoContainerElement.value}>
-          <ToggleShowButton
-            error={error}
-            className={cx({
-              hidden: shouldShow,
-            })}
-            onHover={sidebarToggleMode === 'float' ? () => setShowSideBar(true) : undefined}
-            onClick={toggleShowSideBar}
-          />
-        </Portal>
         <SideBarBodyWrapper
           className={cx(`toggle-mode-${sidebarToggleMode}`, {
-            collapsed: error || !shouldShow,
+            collapsed: !shouldShow,
           })}
           baseSize={baseSize}
           onLeave={sidebarToggleMode === 'float' ? () => setShowSideBar(false) : undefined}
@@ -183,8 +170,6 @@ export function SideBar() {
               </div>
               {run(() => {
                 switch (state) {
-                  case 'disabled':
-                    return null
                   case 'getting-access-token':
                     return <LoadingIndicator text={'Getting access token...'} />
                   case 'after-getting-access-token':
diff --git a/src/containers/RepoContext.tsx b/src/containers/RepoContext.tsx
index 6d64fdf..5778973 100644
--- a/src/containers/RepoContext.tsx
+++ b/src/containers/RepoContext.tsx
@@ -27,9 +27,9 @@ function resolvePartialMetaData() {
       repoName,
       type: type === 'pull' ? type : undefined,
     }
-  } else {
-    return partialMetaData
   }
+
+  return null
 }
 
 function usePartialMetaData(): PartialMetaData | null {
@@ -75,8 +75,10 @@ function useDefaultBranch(partialMetaData: PartialMetaData | null) {
     catchNetworkError(async () => {
       if (!partialMetaData) return
       $state.onChange('meta-loading')
+      const { userName, repoName } = partialMetaData
+      if (!userName || !repoName) return
 
-      const defaultBranch = await platform.getDefaultBranchName(partialMetaData, accessToken)
+      const defaultBranch = await platform.getDefaultBranchName({ userName, repoName }, accessToken)
       $defaultBranch.onChange(defaultBranch)
     })
   }, [partialMetaData, accessToken]) // eslint-disable-line react-hooks/exhaustive-deps
@@ -94,6 +96,8 @@ function useMetaData(
   React.useEffect(() => {
     if (partialMetaData && defaultBranchName && theBranch) {
       const { userName, repoName } = partialMetaData
+      if (!userName || !repoName) return
+
       const safeMetaData: MetaData = {
         userName,
         repoName,
diff --git a/src/content.tsx b/src/content.tsx
index d0f37e1..200742f 100644
--- a/src/content.tsx
+++ b/src/content.tsx
@@ -1,16 +1,13 @@
 import { Gitako } from 'components/Gitako'
-import { platform } from 'platforms'
 import * as React from 'react'
 import { createRoot } from 'react-dom/client'
 import { insertSideBarMountPoint, persistGitakoElements } from 'utils/DOMHelper'
 import './content.scss'
 
-if (platform.resolvePartialMetaData()) {
-  if (document.readyState === 'loading') {
-    document.addEventListener('DOMContentLoaded', init)
-  } else {
-    init()
-  }
+if (document.readyState === 'loading') {
+  document.addEventListener('DOMContentLoaded', init)
+} else {
+  init()
 }
 
 async function init() {
diff --git a/src/global.d.ts b/src/global.d.ts
index a47db99..add2cd6 100644
--- a/src/global.d.ts
+++ b/src/global.d.ts
@@ -8,7 +8,10 @@ type MetaData = {
   type?: EnumString<'tree' | 'blob' | 'pull' | 'commit'>
 }
 
-type PartialMetaData = Omit<MakeOptional<MetaData, 'branchName'>, 'defaultBranchName'>
+type PartialMetaData = Omit<
+  MakeOptional<MetaData, 'repoName' | 'userName' | 'branchName'>,
+  'defaultBranchName'
+>
 
 type TreeNode = {
   name: string
diff --git a/src/platforms/GitHub/index.ts b/src/platforms/GitHub/index.ts
index a99e5c0..fea3c92 100644
--- a/src/platforms/GitHub/index.ts
+++ b/src/platforms/GitHub/index.ts
@@ -2,6 +2,7 @@ import { useConfigs } from 'containers/ConfigsContext'
 import { GITHUB_OAUTH } from 'env'
 import { Base64 } from 'js-base64'
 import { configRef } from 'utils/config/helper'
+import { $ } from 'utils/DOMHelper'
 import { resolveGitModules } from 'utils/gitSubmodule'
 import { sortFoldersToFront } from 'utils/treeParser'
 import * as API from './API'
@@ -82,12 +83,28 @@ function getUrlForRedirect(
 }
 
 export function isEnterprise() {
-  return !window.location.host.endsWith('github.com')
+  return (
+    (window.location.host !== 'github.com' &&
+      /**
+       * <a class="Header-link " href="https://host.com/" data-hotkey="g d" aria-label="Homepage Enterprise">
+       *   <span>Enterprise</span>
+       * </a>
+       */
+      $('a.Header-link[aria-label="Homepage Enterprise"]', e => e.textContent === 'Enterprise')) ||
+    false
+  )
 }
 
 const pathSHAMap = new Map<string, string>()
 
 export const GitHub: Platform = {
+  shouldActivate() {
+    return (
+      window.location.host === 'github.com' ||
+      // <link rel="fluid-icon" href="https://host.com/fluidicon.png" title="GitHub">
+      !!document.querySelector('link[rel="fluid-icon"][title="GitHub"]')
+    )
+  },
   isEnterprise,
   resolvePartialMetaData() {
     if (!DOMHelper.isInRepoPage()) {
diff --git a/src/platforms/index.ts b/src/platforms/index.ts
index a29a355..cc85789 100644
--- a/src/platforms/index.ts
+++ b/src/platforms/index.ts
@@ -5,16 +5,18 @@ import { Gitee } from './Gitee'
 import { GitHub } from './GitHub'
 
 const platforms = {
-  GitHub: GitHub,
-  Gitee: Gitee,
-  Gitea: Gitea,
+  GitHub,
+  Gitee,
+  Gitea,
 }
 
 function resolvePlatform() {
-  for (const platform of Object.values(platforms)) {
-    if (platform.resolvePartialMetaData()) return platform
-  }
-  return dummyPlatformForTypeSafety
+  return (
+    forOf(platforms, (platformName, platform) => {
+      const { shouldActivate = () => !!platform.resolvePartialMetaData() } = platform
+      if (shouldActivate()) return platform
+    }) || dummyPlatformForTypeSafety
+  )
 }
 
 function getPlatformName() {
diff --git a/src/platforms/platform.d.ts b/src/platforms/platform.d.ts
index 75a2c1d..c7b1dc0 100644
--- a/src/platforms/platform.d.ts
+++ b/src/platforms/platform.d.ts
@@ -1,4 +1,5 @@
 type Platform = {
+  shouldActivate?(): boolean
   isEnterprise(): boolean
   // branch name might not be available when resolving from DOM and URL
   resolvePartialMetaData(): PartialMetaData | null

From 3e89db3feb2b8a09a90b5addb8eb8447d2122e90 Mon Sep 17 00:00:00 2001
From: EnixCoda <enixcoda@gmail.com>
Date: Mon, 4 Jul 2022 21:24:35 +0800
Subject: [PATCH 78/93] chore: remove left border of sidebar

---
 src/styles/index.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/styles/index.scss b/src/styles/index.scss
index 7878191..205d04a 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -425,7 +425,6 @@ $minimal-z-index: max(
     display: flex;
     flex-direction: column;
     background: var(--color-bg-subtle);
-    border-left: 1px solid var(--color-border-default);
 
     .octicon-wrapper {
       display: inline-block;

From 3ce088cf7bc5885940409ef483c90e58ed169881 Mon Sep 17 00:00:00 2001
From: EnixCoda <enixcoda@gmail.com>
Date: Mon, 4 Jul 2022 21:51:46 +0800
Subject: [PATCH 79/93] chore: remove unused safari mark

---
 src/components/SideBar.tsx | 6 +-----
 src/utils/DOMHelper.ts     | 5 -----
 2 files changed, 1 insertion(+), 10 deletions(-)

diff --git a/src/components/SideBar.tsx b/src/components/SideBar.tsx
index 5ae23c7..5bb8b8c 100644
--- a/src/components/SideBar.tsx
+++ b/src/components/SideBar.tsx
@@ -11,7 +11,7 @@ import { platform } from 'platforms'
 import * as React from 'react'
 import { cx } from 'utils/cx'
 import * as DOMHelper from 'utils/DOMHelper'
-import { detectBrowser, run } from 'utils/general'
+import { run } from 'utils/general'
 import { useLoadedContext } from 'utils/hooks/useLoadedContext'
 import { useOnPJAXDone, usePJAX } from 'utils/hooks/usePJAX'
 import { useStateIO } from 'utils/hooks/useStateIO'
@@ -48,10 +48,6 @@ export function SideBar() {
     }
   }, [hasMetaData]) // eslint-disable-line react-hooks/exhaustive-deps
 
-  React.useEffect(() => {
-    if (detectBrowser() === 'Safari') DOMHelper.markGitakoSafariFlag()
-  }, [])
-
   const { sidebarToggleMode, intelligentToggle } = configContext.value
   const $shouldShow = useStateIO(() =>
     intelligentToggle === null
diff --git a/src/utils/DOMHelper.ts b/src/utils/DOMHelper.ts
index 8bc6244..b53bb6c 100644
--- a/src/utils/DOMHelper.ts
+++ b/src/utils/DOMHelper.ts
@@ -19,11 +19,6 @@ export function markGitakoReadyState(ready: boolean) {
   return setGitakoBodyClass(readyClassName, ready)
 }
 
-export function markGitakoSafariFlag(enable = true) {
-  const className = 'gitako-safari'
-  return setGitakoBodyClass(className, enable)
-}
-
 /**
  * if should show gitako, then move body right to make space for showing gitako
  * otherwise, hide the space

From b0c54b84eca356b0023348e6b9341c80bdd868c5 Mon Sep 17 00:00:00 2001
From: EnixCoda <enixcoda@gmail.com>
Date: Mon, 4 Jul 2022 21:51:59 +0800
Subject: [PATCH 80/93] chore: ignore webpack from eslint

---
 package.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/package.json b/package.json
index dcfd7ae..978818b 100644
--- a/package.json
+++ b/package.json
@@ -111,6 +111,7 @@
       "plugin:react-hooks/recommended"
     ],
     "ignorePatterns": [
+      "webpack.config.js",
       "*jest*",
       "scripts"
     ],

From 8f0e4a9ccb636aabda199e85b3d6ffb53b067d85 Mon Sep 17 00:00:00 2001
From: EnixCoda <enixcoda@gmail.com>
Date: Mon, 11 Jul 2022 00:56:17 +0800
Subject: [PATCH 81/93] fix: redirect not working in PR pages

---
 src/platforms/GitHub/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/platforms/GitHub/index.ts b/src/platforms/GitHub/index.ts
index fea3c92..2eb519a 100644
--- a/src/platforms/GitHub/index.ts
+++ b/src/platforms/GitHub/index.ts
@@ -216,7 +216,7 @@ export const GitHub: Platform = {
 
       return {
         'data-pjax': pjaxContainerSelector,
-        'data-turbo-frame': turboContainerId,
+        'data-turbo-frame': URLHelper.isInPullPage() ? undefined : turboContainerId,
         onClick() {
           /* Overwriting default onClick */
         },

From 98a67381db1a8dad1e84384aad87f6ad2e06f7d0 Mon Sep 17 00:00:00 2001
From: EnixCoda <enixcoda@gmail.com>
Date: Tue, 12 Jul 2022 01:15:48 +0800
Subject: [PATCH 82/93] refactor: raise Gitako out of document body

---
 src/components/SideBar.tsx            |  5 +-
 src/components/SideBarBodyWrapper.tsx | 22 ++++---
 src/content.tsx                       |  3 +-
 src/styles/index.scss                 | 24 ++++----
 src/utils/DOMHelper.ts                | 84 +++++----------------------
 src/utils/hooks/usePJAX.ts            |  4 +-
 6 files changed, 46 insertions(+), 96 deletions(-)

diff --git a/src/components/SideBar.tsx b/src/components/SideBar.tsx
index 5bb8b8c..6f5e536 100644
--- a/src/components/SideBar.tsx
+++ b/src/components/SideBar.tsx
@@ -127,8 +127,11 @@ export function SideBar() {
             collapsed: !shouldShow,
           })}
           baseSize={baseSize}
+          // TODO: move sidebarToggleMode inside
           onLeave={sidebarToggleMode === 'float' ? () => setShowSideBar(false) : undefined}
-          sizeVariableMountPoint={sidebarToggleMode === 'persistent' ? document.body : undefined}
+          sizeVariableMountPoint={
+            sidebarToggleMode === 'persistent' ? DOMHelper.gitakoDescriptionTarget : undefined
+          }
         >
           <div className={'gitako-side-bar-body'}>
             <div
diff --git a/src/components/SideBarBodyWrapper.tsx b/src/components/SideBarBodyWrapper.tsx
index a268f66..2c94cce 100644
--- a/src/components/SideBarBodyWrapper.tsx
+++ b/src/components/SideBarBodyWrapper.tsx
@@ -7,6 +7,7 @@ import { cx } from 'utils/cx'
 import { setCSSVariable } from 'utils/DOMHelper'
 import * as features from 'utils/features'
 import { detectBrowser } from 'utils/general'
+import { useOnPJAXDone } from 'utils/hooks/usePJAX'
 import { ResizeState } from 'utils/hooks/useResizeHandler'
 import { useConditionalHook } from '../utils/hooks/useConditionalHook'
 
@@ -53,7 +54,6 @@ export function SideBarBodyWrapper({
     const safeSize = getSafeSize(size, width)
     if (safeSize !== size) setSize(safeSize)
   }, [width, size])
-  const bodyWrapperRef = React.useRef<HTMLDivElement | null>(null)
   useDebounce(() => configContext.onChange({ sideBarWidth: size }), 100, [size])
 
   const applySizeToCSSVariables = React.useCallback(function apply(
@@ -66,13 +66,6 @@ export function SideBarBodyWrapper({
         sizeVariableMountPoint ? `${size}px` : undefined,
         sizeVariableMountPoint,
       )
-
-    if (bodyWrapperRef.current)
-      setCSSVariable(
-        '--gitako-width',
-        sizeVariableMountPoint ? undefined : `${size}px`,
-        bodyWrapperRef.current,
-      )
   },
   [])
 
@@ -95,9 +88,15 @@ export function SideBarBodyWrapper({
     }
   }, [width, sizeVariableMountPoint, applySizeToCSSVariables])
 
+  const applyLatestSizeToCSSVariables = React.useCallback(
+    () => applySizeToCSSVariables(sizeVariableMountPoint, size),
+    [sizeVariableMountPoint, size],
+  )
   React.useEffect(() => {
-    applySizeToCSSVariables(sizeVariableMountPoint, size)
-  }, [sizeVariableMountPoint, size, applySizeToCSSVariables])
+    applyLatestSizeToCSSVariables()
+  }, [applyLatestSizeToCSSVariables])
+
+  useOnPJAXDone(applyLatestSizeToCSSVariables)
 
   const onMouseLeave = React.useCallback(
     <E extends HTMLElement>(e: React.MouseEvent<E>) => {
@@ -112,11 +111,10 @@ export function SideBarBodyWrapper({
     blockLeaveRef.current = state === 'resizing'
   }, [])
 
-  const defaultSideBarWidth = React.useMemo(() => getDefaultConfigs().sideBarWidth, []);
+  const defaultSideBarWidth = React.useMemo(() => getDefaultConfigs().sideBarWidth, [])
 
   return (
     <div
-      ref={bodyWrapperRef}
       className={cx('gitako-side-bar-body-wrapper', className)}
       style={{ height: heightForSafari }}
       onMouseLeave={onMouseLeave}
diff --git a/src/content.tsx b/src/content.tsx
index 200742f..a2173ed 100644
--- a/src/content.tsx
+++ b/src/content.tsx
@@ -1,7 +1,7 @@
 import { Gitako } from 'components/Gitako'
 import * as React from 'react'
 import { createRoot } from 'react-dom/client'
-import { insertSideBarMountPoint, persistGitakoElements } from 'utils/DOMHelper'
+import { insertSideBarMountPoint } from 'utils/DOMHelper'
 import './content.scss'
 
 if (document.readyState === 'loading') {
@@ -12,7 +12,6 @@ if (document.readyState === 'loading') {
 
 async function init() {
   await injectStyles(browser.runtime.getURL('content.css'))
-  persistGitakoElements()
   createRoot(insertSideBarMountPoint()).render(<Gitako />)
 }
 
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 205d04a..beafa12 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -99,7 +99,7 @@ $minimal-z-index: max(
   mask-position: center;
 }
 
-.#{$name}-ready {
+[data-#{$name}-ready='true'] {
   // github
   // code folding start
   .blob-wrapper table .blob-num {
@@ -232,16 +232,18 @@ $minimal-z-index: max(
   }
 }
 
-.with-gitako-spacing {
-  @media screen {
-    margin-left: var(--gitako-width);
-  }
+html[data-with-gitako-spacing='true'] {
+  body {
+    @media screen {
+      margin-left: var(--gitako-width);
+    }
 
-  // gitee
-  &.git-project {
-    width: auto; // shrink width
-    .site-content {
-      min-width: 1040px;
+    // gitee
+    &.git-project {
+      width: auto; // shrink width
+      .site-content {
+        min-width: 1040px;
+      }
     }
   }
 }
@@ -425,6 +427,7 @@ $minimal-z-index: max(
     display: flex;
     flex-direction: column;
     background: var(--color-bg-subtle);
+    font-size: 14px;
 
     .octicon-wrapper {
       display: inline-block;
@@ -638,6 +641,7 @@ $minimal-z-index: max(
             overflow: hidden;
             text-overflow: ellipsis;
             align-items: center;
+            font-size: 14px;
           }
 
           &:not(:hover) {
diff --git a/src/utils/DOMHelper.ts b/src/utils/DOMHelper.ts
index b53bb6c..409a629 100644
--- a/src/utils/DOMHelper.ts
+++ b/src/utils/DOMHelper.ts
@@ -3,33 +3,24 @@
  */
 
 export const rootElementID = 'gitako-root'
-
-export function setGitakoBodyClass(className: string, enable: boolean) {
-  const classList = document.body.classList
-  if (enable) classList.add(className)
-  else classList.remove(className)
-}
+export const gitakoDescriptionTarget = document.documentElement
 
 /**
  * when gitako is ready, make page's header narrower
  * or cancel it
  */
 export function markGitakoReadyState(ready: boolean) {
-  const readyClassName = 'gitako-ready'
-  return setGitakoBodyClass(readyClassName, ready)
+  const readyAttributeName = 'data-gitako-ready'
+  return gitakoDescriptionTarget.setAttribute(readyAttributeName, `${ready}`)
 }
 
 /**
  * if should show gitako, then move body right to make space for showing gitako
  * otherwise, hide the space
  */
-export const bodySpacingClassName = 'with-gitako-spacing'
+export const spacingAttributeName = 'data-with-gitako-spacing'
 export function setBodyIndent(shouldShowGitako: boolean) {
-  if (shouldShowGitako) {
-    document.body.classList.add(bodySpacingClassName)
-  } else {
-    document.body.classList.remove(bodySpacingClassName)
-  }
+  gitakoDescriptionTarget.setAttribute(spacingAttributeName, `${shouldShowGitako}`)
 }
 
 export function $(selector: string): HTMLElement | null
@@ -56,20 +47,20 @@ export function $(selector: string, existCallback?: any, otherwise?: any) {
 /**
  * DOM Structure after calling the `insert*MountPoint` functions
  *
- * <html>
- *   <body>
- *     <div id={rootElementID}>
- *       <div id={sidebarMountPointID}>
- *       </div>
- *       <div id={logoMountPointID}>
- *       </div>
- *     </div>
- *   </body>
- * </html>
+ *  <html>
+ *    <body>
+ *    </body>
+ *    <div id={rootElementID}>
+ *      <div id={sidebarMountPointID}>
+ *      </div>
+ *      <div id={logoMountPointID}>
+ *      </div>
+ *    </div>
+ *  </html>
  */
 
+const mountPointContainer = document.documentElement
 export function insertMountPoint() {
-  const mountPointContainer = document.body // TODO: when replace this, refactor root of `$`
   return $(formatID(rootElementID), undefined, () => {
     const element = document.createElement('div')
     element.setAttribute('id', rootElementID)
@@ -186,46 +177,3 @@ export function formatClass(className: string) {
 export function parseIntFromElement(e: HTMLElement): number {
   return parseInt((e.innerText || '').replace(/[^0-9]/g, ''))
 }
-
-/**
- * Unlike the good-old-PJAX-time, now GitHub replaces whole body element after redirecting using turbo.
- * If move Gitako mount point from `body` to `html`, Gitako style would break because it inherits style from GitHub body.
- * The temporary solution is recovery Gitako elements once the body is removed.
- */
-export function persistGitakoElements(mountPointElement = insertMountPoint()) {
-  mountPointElement.setAttribute('data-turbo-permanent', '')
-
-  const observer = new MutationObserver(mutations => {
-    for (const { addedNodes, removedNodes } of mutations) {
-      const [addedBody, removedBody] = [addedNodes, removedNodes].map(findBodyElement)
-      if (addedBody && removedBody) {
-        // hard-coded list due to limited time
-        // TODO: refactor in a better practice
-
-        // migrate gitako attributes, e.g. class
-        const propertiesNeedToMigrate = ['--gitako-width']
-        for (const property of propertiesNeedToMigrate) {
-          const oldValue = removedBody.style.getPropertyValue(property)
-          if (oldValue) addedBody.style.setProperty(property, oldValue)
-        }
-        const cssClassesNeedToMigrate = [bodySpacingClassName]
-        for (const cssClass of cssClassesNeedToMigrate) {
-          if (removedBody.classList.contains(cssClass)) addedBody.classList.add(cssClass)
-        }
-
-        // move gitako elements
-        if (!addedBody.contains(mountPointElement)) addedBody.appendChild(mountPointElement)
-        if (removedBody.contains(mountPointElement)) removedBody.removeChild(mountPointElement)
-      }
-    }
-
-    function findBodyElement(addedNodes: NodeList) {
-      return Array.from(addedNodes).find(addedNode => addedNode instanceof HTMLBodyElement) as
-        | HTMLBodyElement
-        | undefined
-    }
-  })
-  observer.observe(document.documentElement, {
-    childList: true,
-  })
-}
diff --git a/src/utils/hooks/usePJAX.ts b/src/utils/hooks/usePJAX.ts
index 8dbda16..e0fd283 100644
--- a/src/utils/hooks/usePJAX.ts
+++ b/src/utils/hooks/usePJAX.ts
@@ -58,9 +58,7 @@ export const loadWithPJAX = (url: string, element: HTMLElement) => {
 
 export function useOnPJAXDone(callback: () => void) {
   useEvent('pjax:end', callback, document) // legacy support
-  // 'turbo:render' should be the best timing but GitHub has attached a mutation observer on body to block that
-  // TODO: fire at turbo:render
-  useEvent('turbo:load', callback, document)
+  useEvent('turbo:render', callback, document)
 }
 
 export function useRedirectedEvents(

From 0e96aeb26b3ae1e9117146657272479f5f1f2361 Mon Sep 17 00:00:00 2001
From: EnixCoda <enixcoda@gmail.com>
Date: Fri, 15 Jul 2022 22:23:09 +0800
Subject: [PATCH 83/93] refactor: optimize should expand logic

---
 package.json                                  |   4 +-
 src/components/SideBar.tsx                    | 300 ++++++++++--------
 src/components/SideBarBodyWrapper.tsx         |  57 ++--
 src/containers/RepoContext.tsx                |   2 +
 src/platforms/GitHub/index.ts                 |   2 +-
 src/platforms/Gitea/index.ts                  |   2 +-
 src/platforms/Gitee/index.ts                  |   2 +-
 src/platforms/dummyPlatformForTypeSafety.ts   |   2 +-
 src/platforms/platform.d.ts                   |   2 +-
 src/utils/hooks/usePJAX.ts                    |   2 +-
 .../hooks/useToggleSideBarWithKeyboard.ts     |  22 --
 yarn.lock                                     |   5 +
 12 files changed, 216 insertions(+), 186 deletions(-)
 delete mode 100644 src/utils/hooks/useToggleSideBarWithKeyboard.ts

diff --git a/package.json b/package.json
index a7aa07d..1a90d18 100644
--- a/package.json
+++ b/package.json
@@ -39,6 +39,7 @@
     "pjax-api": "^3.33.0",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
+    "react-iifc": "^1.2.0",
     "react-use": "^17.3.2",
     "react-window": "^1.8.7",
     "styled-components": "^5.3.5",
@@ -118,7 +119,8 @@
       "scripts"
     ],
     "rules": {
-      "@typescript-eslint/ban-types": "off"
+      "@typescript-eslint/ban-types": "off",
+      "react-hooks/rules-of-hooks": "off"
     }
   },
   "resolutions": {
diff --git a/src/components/SideBar.tsx b/src/components/SideBar.tsx
index 6f5e536..044a1d3 100644
--- a/src/components/SideBar.tsx
+++ b/src/components/SideBar.tsx
@@ -9,135 +9,58 @@ import { ToggleShowButton } from 'components/ToggleShowButton'
 import { useConfigs } from 'containers/ConfigsContext'
 import { platform } from 'platforms'
 import * as React from 'react'
+import { IIFC } from 'react-iifc'
 import { cx } from 'utils/cx'
 import * as DOMHelper from 'utils/DOMHelper'
-import { run } from 'utils/general'
 import { useLoadedContext } from 'utils/hooks/useLoadedContext'
 import { useOnPJAXDone, usePJAX } from 'utils/hooks/usePJAX'
-import { useStateIO } from 'utils/hooks/useStateIO'
+import * as keyHelper from 'utils/keyHelper'
 import { SideBarErrorContext } from '../containers/ErrorContext'
 import { SideBarStateContext } from '../containers/SideBarState'
 import { Theme } from '../containers/Theme'
-import { useToggleSideBarWithKeyboard } from '../utils/hooks/useToggleSideBarWithKeyboard'
 import { LoadingIndicator } from './LoadingIndicator'
 import { RoundIconButton } from './RoundIconButton'
 import { SettingsBarContent } from './settings/SettingsBar'
 
 export function SideBar() {
-  const state = useLoadedContext(SideBarStateContext).value
+  usePJAX()
+  platform.usePlatformHooks?.()
+  useMarkGitakoReadyState()
+
+  const [shouldExpand, setShouldExpand, toggleShowSideBar] = useShouldExpand()
+
   const error = useLoadedContext(SideBarErrorContext).value
   const configContext = useConfigs()
-
-  const { sideBarWidth } = configContext.value
-  const [baseSize] = React.useState(() => sideBarWidth)
-
-  const [showSettings, setShowSettings] = React.useState(false)
-  const toggleShowSettings = React.useCallback(() => setShowSettings(show => !show), [])
-
-  const $logoContainerElement = useStateIO<HTMLElement | null>(null)
-
-  const hasMetaData = state !== 'disabled' // will be true since retrieving data, cannot use Boolean(metaData)
-  React.useEffect(() => {
-    if (hasMetaData) {
-      DOMHelper.markGitakoReadyState(true)
-      setShowSettings(false)
-      const mountPointElement = DOMHelper.insertLogoMountPoint()
-      if (mountPointElement) $logoContainerElement.onChange(mountPointElement)
-    } else {
-      DOMHelper.markGitakoReadyState(false)
-    }
-  }, [hasMetaData]) // eslint-disable-line react-hooks/exhaustive-deps
-
-  const { sidebarToggleMode, intelligentToggle } = configContext.value
-  const $shouldShow = useStateIO(() =>
-    intelligentToggle === null
-      ? sidebarToggleMode === 'persistent'
-        ? platform.shouldShow()
-        : false
-      : intelligentToggle,
-  )
-  // Lock false on error
-  const setShowSideBar = $shouldShow.onChange
-
-  const shouldShow = React.useMemo(
-    () => !error && state !== 'disabled' && $shouldShow.value,
-    [error, state, $shouldShow.value],
-  )
-
-  const toggleBodyIndent = React.useCallback(() => {
-    DOMHelper.setBodyIndent(sidebarToggleMode === 'persistent' ? shouldShow : false)
-
-    if (shouldShow) DOMHelper.focusFileExplorer() // TODO: verify if it works
-  }, [shouldShow, sidebarToggleMode])
-
-  React.useEffect(() => {
-    toggleBodyIndent()
-  }, [toggleBodyIndent])
-
-  useOnPJAXDone(toggleBodyIndent)
-
-  // Save expand state on toggle if auto expand is off
-  React.useEffect(() => {
-    if (intelligentToggle !== null) {
-      configContext.onChange({ intelligentToggle: shouldShow })
-    }
-  }, [shouldShow, intelligentToggle]) // eslint-disable-line react-hooks/exhaustive-deps
-
-  const toggleShowSideBar = React.useCallback(() => setShowSideBar(show => !show), [setShowSideBar])
-  useToggleSideBarWithKeyboard(state, toggleShowSideBar)
-
-  const updateSideBarVisibility = React.useCallback(() => {
-    if (intelligentToggle === null && sidebarToggleMode === 'persistent') {
-      setShowSideBar(platform.shouldShow())
-    }
-  }, [intelligentToggle, sidebarToggleMode, setShowSideBar])
-
-  usePJAX()
-  useOnPJAXDone(updateSideBarVisibility)
-
-  platform.usePlatformHooks?.()
-
-  // Hide sidebar when error due to auth but token is set  #128
-  const { accessToken } = configContext.value
-  const hideSidebarOnInvalidToken: boolean =
-    intelligentToggle === null && Boolean(state === 'error-due-to-auth' && accessToken)
-  React.useEffect(() => {
-    if (hideSidebarOnInvalidToken) {
-      setShowSideBar(false)
-    }
-  }, [hideSidebarOnInvalidToken, setShowSideBar])
-
-  if (state === 'disabled') return null
+  const { sidebarToggleMode } = configContext.value
 
   return (
     <Theme>
-      <Portal into={$logoContainerElement.value}>
-        <ToggleShowButton
-          error={error}
-          className={cx({
-            hidden: shouldShow,
-          })}
-          onHover={sidebarToggleMode === 'float' ? () => setShowSideBar(true) : undefined}
-          onClick={toggleShowSideBar}
-        />
-      </Portal>
+      <IIFC>
+        {() => {
+          const logoContainerElement = useLogoContainerElement()
+          return (
+            <Portal into={logoContainerElement}>
+              <ToggleShowButton
+                error={error}
+                className={cx({
+                  hidden: shouldExpand,
+                })}
+                onHover={sidebarToggleMode === 'float' ? () => setShouldExpand(true) : undefined}
+                onClick={toggleShowSideBar}
+              />
+            </Portal>
+          )
+        }}
+      </IIFC>
       <div className={'gitako-side-bar'}>
         <SideBarBodyWrapper
           className={cx(`toggle-mode-${sidebarToggleMode}`, {
-            collapsed: !shouldShow,
+            collapsed: error || !shouldExpand,
           })}
-          baseSize={baseSize}
-          // TODO: move sidebarToggleMode inside
-          onLeave={sidebarToggleMode === 'float' ? () => setShowSideBar(false) : undefined}
-          sizeVariableMountPoint={
-            sidebarToggleMode === 'persistent' ? DOMHelper.gitakoDescriptionTarget : undefined
-          }
+          onLeave={sidebarToggleMode === 'float' ? () => setShouldExpand(false) : undefined}
         >
           <div className={'gitako-side-bar-body'}>
-            <div
-              className={'gitako-side-bar-content'}
-              onClick={showSettings ? toggleShowSettings : undefined}
-            >
+            <div className={'gitako-side-bar-content'}>
               <div className={'header'}>
                 <div className={'close-side-bar-button-position'}>
                   {sidebarToggleMode === 'persistent' && (
@@ -167,28 +90,157 @@ export function SideBar() {
                 </div>
                 <MetaBar />
               </div>
-              {run(() => {
-                switch (state) {
-                  case 'getting-access-token':
-                    return <LoadingIndicator text={'Getting access token...'} />
-                  case 'after-getting-access-token':
-                  case 'meta-loading':
-                    return <LoadingIndicator text={'Fetching repo meta...'} />
-                  case 'error-due-to-auth':
-                    return <AccessDeniedDescription />
-                  case 'meta-loaded':
-                  case 'tree-loading':
-                  case 'tree-rendering':
-                  case 'tree-rendered':
-                    return <FileExplorer />
-                }
-              })}
+              <IIFC>
+                {() => {
+                  switch (useLoadedContext(SideBarStateContext).value) {
+                    case 'getting-access-token':
+                      return <LoadingIndicator text={'Getting access token...'} />
+                    case 'after-getting-access-token':
+                    case 'meta-loading':
+                      return <LoadingIndicator text={'Fetching repo meta...'} />
+                    case 'error-due-to-auth':
+                      return <AccessDeniedDescription />
+                    case 'meta-loaded':
+                    case 'tree-loading':
+                    case 'tree-rendering':
+                    case 'tree-rendered':
+                      return <FileExplorer />
+                  }
+                }}
+              </IIFC>
             </div>
-            {showSettings && <SettingsBarContent toggleShow={toggleShowSettings} />}
-            <Footer toggleShowSettings={toggleShowSettings} />
+            <IIFC>
+              {() => {
+                const [showSettings, setShowSettings] = React.useState(false)
+                const toggleShowSettings = React.useCallback(
+                  () => setShowSettings(show => !show),
+                  [],
+                )
+
+                return (
+                  <>
+                    {showSettings && <SettingsBarContent toggleShow={toggleShowSettings} />}
+                    <Footer toggleShowSettings={toggleShowSettings} />
+                  </>
+                )
+              }}
+            </IIFC>
           </div>
         </SideBarBodyWrapper>
       </div>
     </Theme>
   )
 }
+
+function useMarkGitakoReadyState() {
+  React.useEffect(() => {
+    DOMHelper.markGitakoReadyState(true)
+    return () => DOMHelper.markGitakoReadyState(false)
+  }, [])
+}
+
+function useLogoContainerElement() {
+  const [logoContainerElement, setLogoContainerElement] = React.useState<HTMLElement | null>(null)
+  React.useEffect(() => {
+    setLogoContainerElement(DOMHelper.insertLogoMountPoint())
+  }, [])
+  return logoContainerElement
+}
+
+function useUpdateBodyIndentOnStateUpdate(shouldExpand: boolean) {
+  const { sidebarToggleMode } = useConfigs().value
+  React.useEffect(() => {
+    if (sidebarToggleMode === 'persistent' && shouldExpand) {
+      DOMHelper.setBodyIndent(true)
+      return () => DOMHelper.setBodyIndent(false)
+    }
+  }, [sidebarToggleMode, shouldExpand])
+}
+
+function useGetDerivedExpansion() {
+  const { intelligentToggle, sidebarToggleMode } = useConfigs().value
+  return React.useCallback(
+    () =>
+      sidebarToggleMode === 'persistent'
+        ? intelligentToggle === null // auto-expand checked
+          ? platform.shouldExpandSideBar()
+          : intelligentToggle // read saved expand state
+        : false, // do not expand in float mode
+    [intelligentToggle, sidebarToggleMode],
+  )
+}
+
+function useUpdateBodyIndentOnPJAXDone(update: (shouldExpand: boolean) => void) {
+  const { intelligentToggle, sidebarToggleMode } = useConfigs().value
+  useOnPJAXDone(
+    React.useCallback(() => {
+      // check and update expand state if pinned and auto-expand checked
+      if (sidebarToggleMode === 'persistent' && intelligentToggle === null)
+        update(platform.shouldExpandSideBar())
+    }, [update, sidebarToggleMode, intelligentToggle]),
+  )
+}
+
+// Save expand state on toggle if auto expand is off
+function useSaveExpandStateOnToggle(shouldExpand: boolean) {
+  const configContext = useConfigs()
+  const { intelligentToggle } = configContext.value
+  React.useEffect(() => {
+    if (intelligentToggle !== null) configContext.onChange({ intelligentToggle: shouldExpand })
+  }, [shouldExpand, intelligentToggle]) // eslint-disable-line react-hooks/exhaustive-deps
+}
+
+function useToggleSideBarWithKeyboard(toggleShowSideBar: () => void) {
+  const { shortcut } = useConfigs().value
+  const state = useLoadedContext(SideBarStateContext).value
+  const isDisabled = state === 'disabled' || !shortcut
+  React.useEffect(
+    function attachKeyDown() {
+      if (isDisabled) return
+
+      function onKeyDown(e: KeyboardEvent) {
+        const keys = keyHelper.parseEvent(e)
+        if (keys === shortcut) toggleShowSideBar()
+      }
+      window.addEventListener('keydown', onKeyDown)
+      return () => window.removeEventListener('keydown', onKeyDown)
+    },
+    [toggleShowSideBar, isDisabled, shortcut],
+  )
+}
+
+function useCollapseOnNoPermissionWhenTokenHasBeenSet(
+  setShowSideBar: React.Dispatch<React.SetStateAction<boolean>>,
+) {
+  const { accessToken, intelligentToggle, sidebarToggleMode } = useConfigs().value
+  const state = useLoadedContext(SideBarStateContext).value
+  const hideSidebarOnInvalidToken =
+    sidebarToggleMode === 'persistent' &&
+    intelligentToggle === null &&
+    !!accessToken &&
+    state === 'error-due-to-auth'
+  React.useEffect(() => {
+    if (hideSidebarOnInvalidToken) setShowSideBar(false)
+  }, [hideSidebarOnInvalidToken, setShowSideBar])
+}
+
+function useShouldExpand() {
+  const getDerivedExpansion = useGetDerivedExpansion()
+  const [shouldExpand, setShouldExpand] = React.useState(getDerivedExpansion)
+  const toggleShowSideBar = React.useCallback(
+    () => setShouldExpand(show => !show),
+    [setShouldExpand],
+  )
+
+  useSaveExpandStateOnToggle(shouldExpand)
+  useUpdateBodyIndentOnStateUpdate(shouldExpand)
+  useUpdateBodyIndentOnPJAXDone(setShouldExpand)
+  useToggleSideBarWithKeyboard(toggleShowSideBar)
+  useCollapseOnNoPermissionWhenTokenHasBeenSet(setShouldExpand)
+
+  React.useEffect(() => {
+    if (shouldExpand) DOMHelper.focusFileExplorer() // TODO: verify if it works
+  }, [shouldExpand])
+
+  return [shouldExpand, setShouldExpand, toggleShowSideBar] as const
+}
diff --git a/src/components/SideBarBodyWrapper.tsx b/src/components/SideBarBodyWrapper.tsx
index 2c94cce..70879bb 100644
--- a/src/components/SideBarBodyWrapper.tsx
+++ b/src/components/SideBarBodyWrapper.tsx
@@ -4,6 +4,7 @@ import * as React from 'react'
 import { useDebounce, useWindowSize } from 'react-use'
 import { getDefaultConfigs } from 'utils/config/helper'
 import { cx } from 'utils/cx'
+import * as DOMHelper from 'utils/DOMHelper'
 import { setCSSVariable } from 'utils/DOMHelper'
 import * as features from 'utils/features'
 import { detectBrowser } from 'utils/general'
@@ -14,10 +15,8 @@ import { useConditionalHook } from '../utils/hooks/useConditionalHook'
 type Size = number
 export type Size2D = [Size, Size]
 type Props = {
-  baseSize: Size
   className?: string
   onLeave?: React.HTMLAttributes<HTMLElement>['onMouseLeave']
-  sizeVariableMountPoint?: HTMLElement
 }
 
 const MINIMAL_CONTENT_VIEWPORT_WIDTH = 100
@@ -29,26 +28,29 @@ function getSafeSize(size: number, width: number) {
   return size
 }
 
+const sizeVariableMountPoint = DOMHelper.gitakoDescriptionTarget
+
 export function SideBarBodyWrapper({
-  baseSize,
   className,
   children,
   onLeave,
-  sizeVariableMountPoint,
 }: React.PropsWithChildren<Props>) {
-  const [size, setSize] = React.useState(baseSize)
   const configContext = useConfigs()
-  const blockLeaveRef = React.useRef(false)
+  const { sideBarWidth: baseSize } = configContext.value
+  const [size, setSize] = React.useState(baseSize)
+
+  // TODO: fix sidebar flash on first load
+
+  // TODO: verify if it is required
+  // React.useEffect(() => {
+  //   setSize(baseSize)
+  // }, [baseSize])
 
   const heightForSafari = useConditionalHook(
     () => detectBrowser() === 'Safari',
     () => useWindowSize().height, // eslint-disable-line react-hooks/rules-of-hooks
   )
 
-  React.useEffect(() => {
-    setSize(baseSize)
-  }, [baseSize])
-
   const { width } = useWindowSize()
   React.useEffect(() => {
     const safeSize = getSafeSize(size, width)
@@ -56,18 +58,9 @@ export function SideBarBodyWrapper({
   }, [width, size])
   useDebounce(() => configContext.onChange({ sideBarWidth: size }), 100, [size])
 
-  const applySizeToCSSVariables = React.useCallback(function apply(
-    sizeVariableMountPoint: HTMLElement | undefined,
-    size: number,
-  ) {
-    if (sizeVariableMountPoint)
-      setCSSVariable(
-        '--gitako-width',
-        sizeVariableMountPoint ? `${size}px` : undefined,
-        sizeVariableMountPoint,
-      )
-  },
-  [])
+  const applySizeToCSSVariables = React.useCallback((size: number) => {
+    setCSSVariable('--gitako-width', `${size}px`, sizeVariableMountPoint)
+  }, [])
 
   // Update size using useEffect would cause delay
   const onResize = React.useMemo(() => {
@@ -82,22 +75,20 @@ export function SideBarBodyWrapper({
         applied = false
         requestAnimationFrame(() => {
           applied = true
-          applySizeToCSSVariables(sizeVariableMountPoint, sizeToApply)
+          applySizeToCSSVariables(sizeToApply)
         })
       }
     }
-  }, [width, sizeVariableMountPoint, applySizeToCSSVariables])
+  }, [width, applySizeToCSSVariables])
 
   const applyLatestSizeToCSSVariables = React.useCallback(
-    () => applySizeToCSSVariables(sizeVariableMountPoint, size),
-    [sizeVariableMountPoint, size],
+    () => applySizeToCSSVariables(size),
+    [applySizeToCSSVariables, size],
   )
-  React.useEffect(() => {
-    applyLatestSizeToCSSVariables()
-  }, [applyLatestSizeToCSSVariables])
-
+  React.useLayoutEffect(applyLatestSizeToCSSVariables, [applyLatestSizeToCSSVariables])
   useOnPJAXDone(applyLatestSizeToCSSVariables)
 
+  const blockLeaveRef = React.useRef(false)
   const onMouseLeave = React.useCallback(
     <E extends HTMLElement>(e: React.MouseEvent<E>) => {
       if (blockLeaveRef.current) return
@@ -105,12 +96,12 @@ export function SideBarBodyWrapper({
     },
     [onLeave],
   )
-
-  const dummySize: [number, number] = React.useMemo(() => [size, size], [size])
   const onResizeStateChange = React.useCallback((state: ResizeState) => {
     blockLeaveRef.current = state === 'resizing'
   }, [])
 
+  const dummySize: [number, number] = React.useMemo(() => [size, size], [size])
+
   const defaultSideBarWidth = React.useMemo(() => getDefaultConfigs().sideBarWidth, [])
 
   return (
@@ -125,7 +116,7 @@ export function SideBarBodyWrapper({
           onResize={onResize}
           onResetSize={() => {
             setSize(defaultSideBarWidth)
-            applySizeToCSSVariables(sizeVariableMountPoint, defaultSideBarWidth)
+            applySizeToCSSVariables(defaultSideBarWidth)
           }}
           onResizeStateChange={onResizeStateChange}
           size={dummySize}
diff --git a/src/containers/RepoContext.tsx b/src/containers/RepoContext.tsx
index 5778973..9d40014 100644
--- a/src/containers/RepoContext.tsx
+++ b/src/containers/RepoContext.tsx
@@ -14,6 +14,8 @@ export function RepoContextWrapper({ children }: React.PropsWithChildren<{}>) {
   const partialMetaData = usePartialMetaData()
   const defaultBranch = useDefaultBranch(partialMetaData)
   const metaData = useMetaData(partialMetaData, defaultBranch)
+  const state = useLoadedContext(SideBarStateContext).value
+  if (state === 'disabled') return null
 
   return <RepoContext.Provider value={metaData}>{children}</RepoContext.Provider>
 }
diff --git a/src/platforms/GitHub/index.ts b/src/platforms/GitHub/index.ts
index 2eb519a..f4096a0 100644
--- a/src/platforms/GitHub/index.ts
+++ b/src/platforms/GitHub/index.ts
@@ -168,7 +168,7 @@ export const GitHub: Platform = {
 
     return getRepositoryTreeData(metaData, path, recursive, accessToken)
   },
-  shouldShow() {
+  shouldExpandSideBar() {
     return Boolean(
       DOMHelper.isInCodePage() ||
         URLHelper.isInCommitPage() ||
diff --git a/src/platforms/Gitea/index.ts b/src/platforms/Gitea/index.ts
index e02078c..c1b64e8 100644
--- a/src/platforms/Gitea/index.ts
+++ b/src/platforms/Gitea/index.ts
@@ -159,7 +159,7 @@ export const Gitea: Platform = {
 
     return { root }
   },
-  shouldShow() {
+  shouldExpandSideBar() {
     return DOMHelper.isInCodePage()
   },
   getCurrentPath(branchName) {
diff --git a/src/platforms/Gitee/index.ts b/src/platforms/Gitee/index.ts
index 9b201c8..9f226b4 100644
--- a/src/platforms/Gitee/index.ts
+++ b/src/platforms/Gitee/index.ts
@@ -156,7 +156,7 @@ export const Gitee: Platform = {
 
     return { root }
   },
-  shouldShow() {
+  shouldExpandSideBar() {
     return DOMHelper.isInCodePage()
   },
   getCurrentPath(branchName) {
diff --git a/src/platforms/dummyPlatformForTypeSafety.ts b/src/platforms/dummyPlatformForTypeSafety.ts
index c41982a..e147cde 100644
--- a/src/platforms/dummyPlatformForTypeSafety.ts
+++ b/src/platforms/dummyPlatformForTypeSafety.ts
@@ -8,7 +8,7 @@ export const dummyPlatformForTypeSafety: Platform = {
   getDefaultBranchName: dummyPlatformMethod,
   resolveUrlFromMetaData: dummyPlatformMethod,
   getTreeData: dummyPlatformMethod,
-  shouldShow() {
+  shouldExpandSideBar() {
     return false
   },
   getCurrentPath: dummyPlatformMethod,
diff --git a/src/platforms/platform.d.ts b/src/platforms/platform.d.ts
index c7b1dc0..c959677 100644
--- a/src/platforms/platform.d.ts
+++ b/src/platforms/platform.d.ts
@@ -19,7 +19,7 @@ type Platform = {
     recursive?: boolean,
     accessToken?: string,
   ): Promise<{ root: TreeNode; defer?: boolean }>
-  shouldShow(): boolean
+  shouldExpandSideBar(): boolean
   shouldExpandAll?(): boolean
   getCurrentPath(branchName: string): string[] | null
   setOAuth(code: string): Promise<string | null>
diff --git a/src/utils/hooks/usePJAX.ts b/src/utils/hooks/usePJAX.ts
index e0fd283..e23a55e 100644
--- a/src/utils/hooks/usePJAX.ts
+++ b/src/utils/hooks/usePJAX.ts
@@ -58,7 +58,7 @@ export const loadWithPJAX = (url: string, element: HTMLElement) => {
 
 export function useOnPJAXDone(callback: () => void) {
   useEvent('pjax:end', callback, document) // legacy support
-  useEvent('turbo:render', callback, document)
+  useEvent('turbo:render', callback, document) // prevent page content shift after first redirect to new page via turbo when sidebar is pinned
 }
 
 export function useRedirectedEvents(
diff --git a/src/utils/hooks/useToggleSideBarWithKeyboard.ts b/src/utils/hooks/useToggleSideBarWithKeyboard.ts
deleted file mode 100644
index ec09ea0..0000000
--- a/src/utils/hooks/useToggleSideBarWithKeyboard.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { useConfigs } from 'containers/ConfigsContext'
-import * as React from 'react'
-import * as keyHelper from 'utils/keyHelper'
-import { SideBarState } from '../../containers/SideBarState'
-
-export function useToggleSideBarWithKeyboard(state: SideBarState, toggleShowSideBar: () => void) {
-  const { shortcut } = useConfigs().value
-  const isDisabled = state === 'disabled' || !shortcut
-  React.useEffect(
-    function attachKeyDown() {
-      if (isDisabled) return
-
-      function onKeyDown(e: KeyboardEvent) {
-        const keys = keyHelper.parseEvent(e)
-        if (keys === shortcut) toggleShowSideBar()
-      }
-      window.addEventListener('keydown', onKeyDown)
-      return () => window.removeEventListener('keydown', onKeyDown)
-    },
-    [toggleShowSideBar, isDisabled, shortcut],
-  )
-}
diff --git a/yarn.lock b/yarn.lock
index ff243c0..7e18d84 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -9801,6 +9801,11 @@ react-dom@^18.1.0:
     loose-envify "^1.1.0"
     scheduler "^0.22.0"
 
+react-iifc@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/react-iifc/-/react-iifc-1.2.0.tgz#b63d27c1d2e80da1577c908f493659a9ea11083a"
+  integrity sha512-CvOzw8UEDoqgXNiChqgsEi5xCimym6q44kq6ULYqhDqgBtnJ4ajsPM7ucXkT7h4NYfG9vVn7l+xllGj8u+Jv3Q==
+
 react-is@^16.13.1:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"

From 8fb1eb924c6c4b6c33c42a7fcbcfc7f2f72c1939 Mon Sep 17 00:00:00 2001
From: EnixCoda <enixcoda@gmail.com>
Date: Sat, 16 Jul 2022 00:32:56 +0800
Subject: [PATCH 84/93] refactor: deprecate SidebarBodyWrapper

---
 src/components/ResizeHandler.tsx        |   2 +-
 src/components/SideBar.tsx              |  36 +++++--
 src/components/SideBarBodyWrapper.tsx   | 127 ------------------------
 src/components/SideBarResizeHandler.tsx |  85 ++++++++++++++++
 src/components/Size.tsx                 |   2 +
 src/components/ToggleShowButton.tsx     |   2 +-
 src/styles/index.scss                   |   2 +-
 src/utils/DOMHelper.ts                  |   4 +
 src/utils/hooks/useCSSVariable.ts       |   3 +-
 src/utils/hooks/useElementSize.ts       |   2 +-
 src/utils/hooks/useResizeHandler.ts     |   2 +-
 11 files changed, 127 insertions(+), 140 deletions(-)
 delete mode 100644 src/components/SideBarBodyWrapper.tsx
 create mode 100644 src/components/SideBarResizeHandler.tsx
 create mode 100644 src/components/Size.tsx

diff --git a/src/components/ResizeHandler.tsx b/src/components/ResizeHandler.tsx
index 43e5b65..790949c 100644
--- a/src/components/ResizeHandler.tsx
+++ b/src/components/ResizeHandler.tsx
@@ -2,7 +2,7 @@ import { GrabberIcon } from '@primer/octicons-react'
 import { Icon } from 'components/Icon'
 import * as React from 'react'
 import { ResizeState, useResizeHandler } from '../utils/hooks/useResizeHandler'
-import { Size2D } from './SideBarBodyWrapper'
+import { Size2D } from "./Size"
 
 type Props = {
   size: Size2D
diff --git a/src/components/SideBar.tsx b/src/components/SideBar.tsx
index 044a1d3..ea50216 100644
--- a/src/components/SideBar.tsx
+++ b/src/components/SideBar.tsx
@@ -4,16 +4,20 @@ import { FileExplorer } from 'components/FileExplorer'
 import { Footer } from 'components/Footer'
 import { MetaBar } from 'components/MetaBar'
 import { Portal } from 'components/Portal'
-import { SideBarBodyWrapper } from 'components/SideBarBodyWrapper'
 import { ToggleShowButton } from 'components/ToggleShowButton'
 import { useConfigs } from 'containers/ConfigsContext'
 import { platform } from 'platforms'
 import * as React from 'react'
 import { IIFC } from 'react-iifc'
+import { useWindowSize } from 'react-use'
 import { cx } from 'utils/cx'
 import * as DOMHelper from 'utils/DOMHelper'
+import * as features from 'utils/features'
+import { detectBrowser } from 'utils/general'
+import { useConditionalHook } from 'utils/hooks/useConditionalHook'
 import { useLoadedContext } from 'utils/hooks/useLoadedContext'
 import { useOnPJAXDone, usePJAX } from 'utils/hooks/usePJAX'
+import { ResizeState } from 'utils/hooks/useResizeHandler'
 import * as keyHelper from 'utils/keyHelper'
 import { SideBarErrorContext } from '../containers/ErrorContext'
 import { SideBarStateContext } from '../containers/SideBarState'
@@ -21,17 +25,33 @@ import { Theme } from '../containers/Theme'
 import { LoadingIndicator } from './LoadingIndicator'
 import { RoundIconButton } from './RoundIconButton'
 import { SettingsBarContent } from './settings/SettingsBar'
+import { SideBarResizeHandler } from './SideBarResizeHandler'
 
 export function SideBar() {
   usePJAX()
   platform.usePlatformHooks?.()
   useMarkGitakoReadyState()
 
+  const error = useLoadedContext(SideBarErrorContext).value
+
   const [shouldExpand, setShouldExpand, toggleShowSideBar] = useShouldExpand()
 
-  const error = useLoadedContext(SideBarErrorContext).value
   const configContext = useConfigs()
+
+  const blockLeaveRef = React.useRef(false)
   const { sidebarToggleMode } = configContext.value
+  const onMouseLeaveSideBar: React.MouseEventHandler<HTMLElement> = React.useCallback(() => {
+    if (blockLeaveRef.current) return
+    if (sidebarToggleMode === 'float') setShouldExpand(false)
+  }, [sidebarToggleMode, setShouldExpand])
+  const onResizeStateChange = React.useCallback((state: ResizeState) => {
+    blockLeaveRef.current = state === 'resizing'
+  }, [])
+
+  const heightForSafari = useConditionalHook(
+    () => detectBrowser() === 'Safari',
+    () => useWindowSize().height, // eslint-disable-line react-hooks/rules-of-hooks
+  )
 
   return (
     <Theme>
@@ -53,16 +73,17 @@ export function SideBar() {
         }}
       </IIFC>
       <div className={'gitako-side-bar'}>
-        <SideBarBodyWrapper
-          className={cx(`toggle-mode-${sidebarToggleMode}`, {
+        <div
+          className={cx('gitako-side-bar-body-wrapper', `toggle-mode-${sidebarToggleMode}`, {
             collapsed: error || !shouldExpand,
           })}
-          onLeave={sidebarToggleMode === 'float' ? () => setShouldExpand(false) : undefined}
+          style={{ height: heightForSafari }}
+          onMouseLeave={onMouseLeaveSideBar}
         >
           <div className={'gitako-side-bar-body'}>
             <div className={'gitako-side-bar-content'}>
               <div className={'header'}>
-                <div className={'close-side-bar-button-position'}>
+                <div className={'side-bar-position-controls'}>
                   {sidebarToggleMode === 'persistent' && (
                     <RoundIconButton
                       icon={TabIcon}
@@ -126,7 +147,8 @@ export function SideBar() {
               }}
             </IIFC>
           </div>
-        </SideBarBodyWrapper>
+          {features.resize && <SideBarResizeHandler onResizeStateChange={onResizeStateChange} />}
+        </div>
       </div>
     </Theme>
   )
diff --git a/src/components/SideBarBodyWrapper.tsx b/src/components/SideBarBodyWrapper.tsx
deleted file mode 100644
index 70879bb..0000000
--- a/src/components/SideBarBodyWrapper.tsx
+++ /dev/null
@@ -1,127 +0,0 @@
-import { ResizeHandler } from 'components/ResizeHandler'
-import { useConfigs } from 'containers/ConfigsContext'
-import * as React from 'react'
-import { useDebounce, useWindowSize } from 'react-use'
-import { getDefaultConfigs } from 'utils/config/helper'
-import { cx } from 'utils/cx'
-import * as DOMHelper from 'utils/DOMHelper'
-import { setCSSVariable } from 'utils/DOMHelper'
-import * as features from 'utils/features'
-import { detectBrowser } from 'utils/general'
-import { useOnPJAXDone } from 'utils/hooks/usePJAX'
-import { ResizeState } from 'utils/hooks/useResizeHandler'
-import { useConditionalHook } from '../utils/hooks/useConditionalHook'
-
-type Size = number
-export type Size2D = [Size, Size]
-type Props = {
-  className?: string
-  onLeave?: React.HTMLAttributes<HTMLElement>['onMouseLeave']
-}
-
-const MINIMAL_CONTENT_VIEWPORT_WIDTH = 100
-const MINIMAL_WIDTH = 240
-
-function getSafeSize(size: number, width: number) {
-  if (size > width - MINIMAL_CONTENT_VIEWPORT_WIDTH) return width - MINIMAL_CONTENT_VIEWPORT_WIDTH
-  if (size < MINIMAL_WIDTH) return MINIMAL_WIDTH
-  return size
-}
-
-const sizeVariableMountPoint = DOMHelper.gitakoDescriptionTarget
-
-export function SideBarBodyWrapper({
-  className,
-  children,
-  onLeave,
-}: React.PropsWithChildren<Props>) {
-  const configContext = useConfigs()
-  const { sideBarWidth: baseSize } = configContext.value
-  const [size, setSize] = React.useState(baseSize)
-
-  // TODO: fix sidebar flash on first load
-
-  // TODO: verify if it is required
-  // React.useEffect(() => {
-  //   setSize(baseSize)
-  // }, [baseSize])
-
-  const heightForSafari = useConditionalHook(
-    () => detectBrowser() === 'Safari',
-    () => useWindowSize().height, // eslint-disable-line react-hooks/rules-of-hooks
-  )
-
-  const { width } = useWindowSize()
-  React.useEffect(() => {
-    const safeSize = getSafeSize(size, width)
-    if (safeSize !== size) setSize(safeSize)
-  }, [width, size])
-  useDebounce(() => configContext.onChange({ sideBarWidth: size }), 100, [size])
-
-  const applySizeToCSSVariables = React.useCallback((size: number) => {
-    setCSSVariable('--gitako-width', `${size}px`, sizeVariableMountPoint)
-  }, [])
-
-  // Update size using useEffect would cause delay
-  const onResize = React.useMemo(() => {
-    let sizeToApply: number
-    let applied = true
-    return ([size]: number[]) => {
-      // do NOT merge this with the above similar effect, side bar will jump otherwise
-      sizeToApply = getSafeSize(size, width)
-      setSize(sizeToApply)
-
-      if (applied) {
-        applied = false
-        requestAnimationFrame(() => {
-          applied = true
-          applySizeToCSSVariables(sizeToApply)
-        })
-      }
-    }
-  }, [width, applySizeToCSSVariables])
-
-  const applyLatestSizeToCSSVariables = React.useCallback(
-    () => applySizeToCSSVariables(size),
-    [applySizeToCSSVariables, size],
-  )
-  React.useLayoutEffect(applyLatestSizeToCSSVariables, [applyLatestSizeToCSSVariables])
-  useOnPJAXDone(applyLatestSizeToCSSVariables)
-
-  const blockLeaveRef = React.useRef(false)
-  const onMouseLeave = React.useCallback(
-    <E extends HTMLElement>(e: React.MouseEvent<E>) => {
-      if (blockLeaveRef.current) return
-      onLeave?.(e)
-    },
-    [onLeave],
-  )
-  const onResizeStateChange = React.useCallback((state: ResizeState) => {
-    blockLeaveRef.current = state === 'resizing'
-  }, [])
-
-  const dummySize: [number, number] = React.useMemo(() => [size, size], [size])
-
-  const defaultSideBarWidth = React.useMemo(() => getDefaultConfigs().sideBarWidth, [])
-
-  return (
-    <div
-      className={cx('gitako-side-bar-body-wrapper', className)}
-      style={{ height: heightForSafari }}
-      onMouseLeave={onMouseLeave}
-    >
-      {children}
-      {features.resize && (
-        <ResizeHandler
-          onResize={onResize}
-          onResetSize={() => {
-            setSize(defaultSideBarWidth)
-            applySizeToCSSVariables(defaultSideBarWidth)
-          }}
-          onResizeStateChange={onResizeStateChange}
-          size={dummySize}
-        />
-      )}
-    </div>
-  )
-}
diff --git a/src/components/SideBarResizeHandler.tsx b/src/components/SideBarResizeHandler.tsx
new file mode 100644
index 0000000..83a0383
--- /dev/null
+++ b/src/components/SideBarResizeHandler.tsx
@@ -0,0 +1,85 @@
+import { useConfigs } from 'containers/ConfigsContext'
+import * as React from 'react'
+import { useDebounce, useWindowSize } from 'react-use'
+import { getDefaultConfigs } from 'utils/config/helper'
+import * as DOMHelper from 'utils/DOMHelper'
+import { useOnPJAXDone } from 'utils/hooks/usePJAX'
+import { ResizeHandler } from './ResizeHandler'
+import { Size, Size2D } from './Size'
+
+const MINIMAL_CONTENT_VIEWPORT_WIDTH = 100
+const MINIMAL_WIDTH = 240
+
+function getSafeWidth(width: Size, windowWidth: number) {
+  if (width > windowWidth - MINIMAL_CONTENT_VIEWPORT_WIDTH)
+    return windowWidth - MINIMAL_CONTENT_VIEWPORT_WIDTH
+  if (width < MINIMAL_WIDTH) return MINIMAL_WIDTH
+  return width
+}
+
+function useSidebarWidth() {
+  const configContext = useConfigs()
+
+  // size data flow:
+  //    windowSize.width => width
+  //                        width => config.sideBarWidth
+  //                        width => --gitako-width       // layout effect
+  //        resize event => width
+  //        resize event =>          --gitako-width       // rAF
+  const [width, setWidth] = React.useState(configContext.value.sideBarWidth)
+  const { width: windowWidth } = useWindowSize()
+  React.useEffect(() => {
+    const safeSize = getSafeWidth(width, windowWidth)
+    if (safeSize !== width) setWidth(safeSize)
+  }, [windowWidth, width])
+  useDebounce(() => configContext.onChange({ sideBarWidth: width }), 100, [width])
+
+  React.useLayoutEffect(() => DOMHelper.setGitakoWidthCSSVariable(width), [width])
+
+  // Keep variable when directing from PR to repo home via meta bar
+  useOnPJAXDone(React.useCallback(() => DOMHelper.setGitakoWidthCSSVariable(width), [width]))
+
+  return [width, setWidth] as const
+}
+
+export function SideBarResizeHandler({
+  onResizeStateChange,
+}: Pick<React.ComponentProps<typeof ResizeHandler>, 'onResizeStateChange'>) {
+  const [width, setWidth] = useSidebarWidth()
+  const { width: windowWidth } = useWindowSize()
+  const onResize = React.useMemo(() => {
+    let widthToApply: Size
+    let pending = false
+    return ([width]: Size2D) => {
+      // do NOT merge this with the above similar effect
+      widthToApply = width
+
+      if (!pending) {
+        pending = true
+        // Update size using useEffect would cause delay
+        requestAnimationFrame(() => {
+          pending = false
+          widthToApply = getSafeWidth(widthToApply, windowWidth)
+          DOMHelper.setGitakoWidthCSSVariable(widthToApply)
+          setWidth(widthToApply)
+        })
+      }
+    }
+  }, [windowWidth, setWidth])
+
+  const onResetSize = React.useCallback(
+    () => setWidth(getDefaultConfigs().sideBarWidth),
+    [setWidth],
+  )
+
+  const dummySize: Size2D = React.useMemo(() => [width, 0], [width])
+
+  return (
+    <ResizeHandler
+      onResize={onResize}
+      onResetSize={onResetSize}
+      onResizeStateChange={onResizeStateChange}
+      size={dummySize}
+    />
+  )
+}
diff --git a/src/components/Size.tsx b/src/components/Size.tsx
new file mode 100644
index 0000000..deba4a8
--- /dev/null
+++ b/src/components/Size.tsx
@@ -0,0 +1,2 @@
+export type Size = number;
+export type Size2D = [Size, Size];
diff --git a/src/components/ToggleShowButton.tsx b/src/components/ToggleShowButton.tsx
index 180477f..5e23d19 100644
--- a/src/components/ToggleShowButton.tsx
+++ b/src/components/ToggleShowButton.tsx
@@ -41,7 +41,7 @@ export function ToggleShowButton({ error, className, onClick, onHover }: Props)
   )
 
   // reposition on window height change, but ignores distance change
-  React.useEffect(() => {
+  React.useLayoutEffect(() => {
     if (ref.current) {
       ref.current.style.top = distance + 'px'
     }
diff --git a/src/styles/index.scss b/src/styles/index.scss
index beafa12..337ec9a 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -467,7 +467,7 @@ html[data-with-gitako-spacing='true'] {
           }
         }
 
-        .close-side-bar-button-position {
+        .side-bar-position-controls {
           float: right;
           z-index: 1; // prevent being covered by following elements
         }
diff --git a/src/utils/DOMHelper.ts b/src/utils/DOMHelper.ts
index 409a629..625fb3d 100644
--- a/src/utils/DOMHelper.ts
+++ b/src/utils/DOMHelper.ts
@@ -166,6 +166,10 @@ export function setCSSVariable(name: string, value: string | undefined, element:
   else element.style.setProperty(name, value)
 }
 
+export const setGitakoWidthCSSVariable = (size: number) => {
+  setCSSVariable('--gitako-width', `${size}px`, gitakoDescriptionTarget)
+}
+
 export function formatID(id: string) {
   return `#${id}`
 }
diff --git a/src/utils/hooks/useCSSVariable.ts b/src/utils/hooks/useCSSVariable.ts
index 889a774..ae86814 100644
--- a/src/utils/hooks/useCSSVariable.ts
+++ b/src/utils/hooks/useCSSVariable.ts
@@ -1,4 +1,5 @@
 import { useLayoutEffect } from 'react'
+import { setCSSVariable } from 'utils/DOMHelper'
 
 export function useCSSVariable(
   name: string,
@@ -6,6 +7,6 @@ export function useCSSVariable(
   element: HTMLElement = document.documentElement,
 ) {
   useLayoutEffect(() => {
-    element.style.setProperty(name, value)
+    setCSSVariable(name, value, element)
   }, [name, value, element])
 }
diff --git a/src/utils/hooks/useElementSize.ts b/src/utils/hooks/useElementSize.ts
index ef87f22..10d3d90 100644
--- a/src/utils/hooks/useElementSize.ts
+++ b/src/utils/hooks/useElementSize.ts
@@ -1,6 +1,6 @@
 import * as React from 'react'
 import * as features from 'utils/features'
-import { Size2D } from '../../components/SideBarBodyWrapper'
+import { Size2D } from "../../components/Size"
 
 export function useElementSize<E extends HTMLElement>() {
   const ref = React.useRef<E | null>(null)
diff --git a/src/utils/hooks/useResizeHandler.ts b/src/utils/hooks/useResizeHandler.ts
index 9c937d4..c123bfd 100644
--- a/src/utils/hooks/useResizeHandler.ts
+++ b/src/utils/hooks/useResizeHandler.ts
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { Size2D } from '../../components/SideBarBodyWrapper'
+import { Size2D } from "../../components/Size"
 
 export type ResizeState = 'idle' | 'resizing'
 

From 3ca6c2bf07c8896ffc8db6839e5b1dfbbe430f30 Mon Sep 17 00:00:00 2001
From: EnixCoda <enixcoda@gmail.com>
Date: Sat, 16 Jul 2022 00:35:22 +0800
Subject: [PATCH 85/93] chore: format & lint code

---
 .husky/pre-commit                             |   4 +
 .prettierignore                               |   1 +
 __tests__/cases/non-parallel/pjax.general.ts  |   2 +-
 __tests__/cases/non-parallel/pjax.internal.ts |   2 +-
 .../cases/non-parallel/project-page.gitako.ts |   6 +-
 __tests__/cases/parallel/expand-to-target.ts  |   7 +-
 __tests__/utils.ts                            |   6 +-
 package.json                                  |  31 +-
 scripts/fix-deps/index.js                     |   7 +-
 scripts/fix-deps/pjax-api.js                  |   2 +-
 scripts/fix-deps/styled-components.js         |   4 +-
 src/analytics.ts                              |   2 +-
 src/components/FileExplorer/DiffStatGraph.tsx |   2 +-
 src/components/FileExplorer/index.tsx         |   2 +-
 .../FileExplorer/useLatestValueRef.tsx        |  17 +-
 src/components/Highlight.tsx                  |   2 +-
 src/components/HighlightOnIndexes.tsx         |   2 +-
 src/components/Icon.tsx                       |   2 +-
 src/components/IconButton.tsx                 |   2 +-
 src/components/Inputs/Checkbox.tsx            |  17 +-
 src/components/Inputs/SelectInput.tsx         |  13 +-
 src/components/ResizeHandler.tsx              |   2 +-
 src/components/Size.tsx                       |   4 +-
 .../SimpleConfigField/SelectInput.tsx         |   5 +-
 .../GitHub/getPullRequestTreeData.ts          |   6 +-
 src/platforms/GitHub/utils.ts                 |   3 +-
 src/platforms/dummyPlatformForTypeSafety.ts   |   3 +-
 src/react-override.d.ts                       |  11 +-
 src/utils/VisibleNodesGenerator/prepare.ts    |   2 +-
 src/utils/general.ts                          |   1 +
 src/utils/hooks/useElementSize.ts             |   2 +-
 src/utils/hooks/useResizeHandler.ts           |   2 +-
 yarn.lock                                     | 311 +++++++++++++++++-
 33 files changed, 409 insertions(+), 76 deletions(-)
 create mode 100755 .husky/pre-commit

diff --git a/.husky/pre-commit b/.husky/pre-commit
new file mode 100755
index 0000000..9bfbc3a
--- /dev/null
+++ b/.husky/pre-commit
@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+yarn lint-staged --quiet
diff --git a/.prettierignore b/.prettierignore
index 330d9b6..9722c5b 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -1,3 +1,4 @@
 *-profile/
 dist/
 vscode-icons/
+Safari
diff --git a/__tests__/cases/non-parallel/pjax.general.ts b/__tests__/cases/non-parallel/pjax.general.ts
index 76657f4..993d3d8 100644
--- a/__tests__/cases/non-parallel/pjax.general.ts
+++ b/__tests__/cases/non-parallel/pjax.general.ts
@@ -4,7 +4,7 @@ import {
   patientClick,
   selectFileTreeItem,
   sleep,
-  waitForLegacyPJAXRedirect
+  waitForLegacyPJAXRedirect,
 } from '../../utils'
 
 describe(`in Gitako project page`, () => {
diff --git a/__tests__/cases/non-parallel/pjax.internal.ts b/__tests__/cases/non-parallel/pjax.internal.ts
index 4b57bec..63f6988 100644
--- a/__tests__/cases/non-parallel/pjax.internal.ts
+++ b/__tests__/cases/non-parallel/pjax.internal.ts
@@ -5,7 +5,7 @@ import {
   patientClick,
   selectFileTreeItem,
   sleep,
-  waitForLegacyPJAXRedirect
+  waitForLegacyPJAXRedirect,
 } from '../../utils'
 
 describe(`in Gitako project page`, () => {
diff --git a/__tests__/cases/non-parallel/project-page.gitako.ts b/__tests__/cases/non-parallel/project-page.gitako.ts
index 8182fda..d00769a 100644
--- a/__tests__/cases/non-parallel/project-page.gitako.ts
+++ b/__tests__/cases/non-parallel/project-page.gitako.ts
@@ -3,11 +3,13 @@ import {
   expectToFind,
   expectToNotFind,
   scroll,
-  selectFileTreeItem
+  selectFileTreeItem,
 } from '../../utils'
 
 describe(`in Gitako project page`, () => {
-  beforeAll(() => page.goto('https://github.com/EnixCoda/Gitako/tree/test/200-changed-files-200-lines-each'))
+  beforeAll(() =>
+    page.goto('https://github.com/EnixCoda/Gitako/tree/test/200-changed-files-200-lines-each'),
+  )
 
   it('should render Gitako', async () => {
     await expectToFind('.gitako-side-bar .gitako-side-bar-body-wrapper')
diff --git a/__tests__/cases/parallel/expand-to-target.ts b/__tests__/cases/parallel/expand-to-target.ts
index 4be5dc0..519addd 100644
--- a/__tests__/cases/parallel/expand-to-target.ts
+++ b/__tests__/cases/parallel/expand-to-target.ts
@@ -1,9 +1,4 @@
-import {
-  expectToFind,
-  selectFileTreeItem,
-  sleep,
-  waitForLegacyPJAXRedirect
-} from '../../utils'
+import { expectToFind, selectFileTreeItem, sleep, waitForLegacyPJAXRedirect } from '../../utils'
 
 describe(`in Gitako project page`, () => {
   beforeAll(() => page.goto('https://github.com/EnixCoda/Gitako/tree/develop/src'))
diff --git a/__tests__/utils.ts b/__tests__/utils.ts
index 88d5238..4910897 100644
--- a/__tests__/utils.ts
+++ b/__tests__/utils.ts
@@ -40,7 +40,7 @@ export async function listenTo<Args extends any[] = any[]>(
     (event, target, callbackName, oneTime) => {
       const t = target === 'document' ? document : window
       const onEvent = (...args: any[]): void => {
-        ;((window[callbackName as any] as any) as (...args: any[]) => void)(...args)
+        ;(window[callbackName as any] as any as (...args: any[]) => void)(...args)
         if (oneTime) t.removeEventListener(event, onEvent)
       }
       t.addEventListener(event, onEvent)
@@ -81,7 +81,9 @@ export async function patientClick(selector: string) {
 }
 
 export async function expandFloatModeSidebar() {
-  const rect = await (await page.$('.gitako-toggle-show-button'))?.evaluate(button => {
+  const rect = await (
+    await page.$('.gitako-toggle-show-button')
+  )?.evaluate(button => {
     const { x, y, width, height } = button.getBoundingClientRect()
     // pass required properties to avoid serialization issues
     return { x, y, width, height }
diff --git a/package.json b/package.json
index 1a90d18..1752fac 100644
--- a/package.json
+++ b/package.json
@@ -8,6 +8,7 @@
   "private": true,
   "homepage": "https://github.com/EnixCoda/Gitako",
   "scripts": {
+    "prepare": "husky install",
     "dev": "VERSION=dev-v$(node scripts/get-version.js) webpack --watch",
     "dev-safari": "TARGET=safari yarn run dev",
     "debug-firefox": "web-ext run --source-dir=dist --firefox-profile=firefox-profile --profile-create-if-missing --keep-profile-changes --start-url github.com/EnixCoda/Gitako",
@@ -17,8 +18,7 @@
     "roll": "make release",
     "test": "yarn run test:parallel && yarn run test:non-parallel",
     "test:parallel": "NODE_ENV=test jest --config __tests__/jest.parallel.config.js",
-    "test:non-parallel": "NODE_ENV=test jest --config __tests__/jest.non-parallel.config.js",
-    "format": "prettier --write '**/*.{js,jsx,ts,tsx}'"
+    "test:non-parallel": "NODE_ENV=test jest --config __tests__/jest.non-parallel.config.js"
   },
   "dependencies": {
     "@primer/css": "^20.2.2",
@@ -70,13 +70,16 @@
     "dotenv": "^6.2.0",
     "dotenv-webpack": "^1.7.0",
     "eslint": "^8.15.0",
+    "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-react": "^7.29.4",
     "eslint-plugin-react-hooks": "^4.5.0",
     "file-loader": "^3.0.1",
     "fork-ts-checker-webpack-plugin": "^6.5.0",
+    "husky": "^8.0.1",
     "jest": "^27.0.6",
     "jest-puppeteer": "^6.1.0",
     "json-loader": "^0.5.7",
+    "lint-staged": "^13.0.3",
     "mini-css-extract-plugin": "^0.9.0",
     "prettier": "^2.7.1",
     "puppeteer": "^10.1.0",
@@ -111,18 +114,38 @@
       "eslint:recommended",
       "plugin:@typescript-eslint/recommended",
       "plugin:react/recommended",
-      "plugin:react-hooks/recommended"
+      "plugin:react-hooks/recommended",
+      "prettier"
     ],
+    "settings": {
+      "react": {
+        "version": "detect"
+      }
+    },
     "ignorePatterns": [
       "webpack.config.js",
       "*jest*",
-      "scripts"
+      "scripts",
+      "dist",
+      "*-profile",
+      "Safari",
+      "vscode-icons",
+      "__tests__"
     ],
     "rules": {
       "@typescript-eslint/ban-types": "off",
       "react-hooks/rules-of-hooks": "off"
     }
   },
+  "lint-staged": {
+    "*.scss": [
+      "yarn prettier --list-different --write"
+    ],
+    "*.{js,ts,tsx}": [
+      "yarn prettier --list-different --write",
+      "yarn eslint --max-warnings=0 --fix"
+    ]
+  },
   "resolutions": {
     "@types/react": "^18.0.9",
     "@types/react-dom": "^18.0.3",
diff --git a/scripts/fix-deps/index.js b/scripts/fix-deps/index.js
index ec1cc9c..bbb9d0b 100644
--- a/scripts/fix-deps/index.js
+++ b/scripts/fix-deps/index.js
@@ -27,15 +27,12 @@ const nodeModulesPath = path.resolve(__dirname, '../../', `node_modules`)
 exports.fixDep = async function fixDep(targetFilePath, pairs) {
   const filePath = path.resolve(nodeModulesPath, targetFilePath)
   const source = await fs.readFile(filePath, 'utf-8')
-  const modified = modify(source, pairs,)
+  const modified = modify(source, pairs)
   await fs.writeFile(filePath, modified, 'utf-8')
 }
 
 async function fixDeps() {
-  for (const fix of [
-    require('./pjax-api').fix,
-    require('./styled-components').fix,
-  ]) {
+  for (const fix of [require('./pjax-api').fix, require('./styled-components').fix]) {
     await fix()
   }
 }
diff --git a/scripts/fix-deps/pjax-api.js b/scripts/fix-deps/pjax-api.js
index e2f1582..34564c8 100644
--- a/scripts/fix-deps/pjax-api.js
+++ b/scripts/fix-deps/pjax-api.js
@@ -1,6 +1,6 @@
 const { fixDep } = require('.')
 
-const targetFilePath = `pjax-api/dist/pjax-api.js`;
+const targetFilePath = `pjax-api/dist/pjax-api.js`
 const pairs = [
   // Firefox
   [
diff --git a/scripts/fix-deps/styled-components.js b/scripts/fix-deps/styled-components.js
index b3022cf..e0c89a3 100644
--- a/scripts/fix-deps/styled-components.js
+++ b/scripts/fix-deps/styled-components.js
@@ -1,11 +1,11 @@
 const { fixDep } = require('.')
 
-const targetFilePath = `styled-components/dist/styled-components.browser.esm.js`;
+const targetFilePath = `styled-components/dist/styled-components.browser.esm.js`
 const pairs = [
   // Firefox
   // disable production check in `checkDynamicCreation`
   [
-    `function(e,t){if("production"!==process.env.NODE_ENV)`,
+    `function(e,t){if("production"!==process.env.NODE_ENV)`, // prettier-ignore
     `function(e,t){if(false)`,
   ],
 ]
diff --git a/src/analytics.ts b/src/analytics.ts
index c3dbfe9..4cecf7a 100644
--- a/src/analytics.ts
+++ b/src/analytics.ts
@@ -91,7 +91,7 @@ const hasTheErrorBeenReported = atomicAsyncFunction(async function hasTheErrorBe
 export async function raiseError(
   error: Error,
   extra?: {
-    [key: string]: any
+    [key: string]: any // eslint-disable-line @typescript-eslint/no-explicit-any
   },
 ) {
   if (await hasTheErrorBeenReported(error)) return
diff --git a/src/components/FileExplorer/DiffStatGraph.tsx b/src/components/FileExplorer/DiffStatGraph.tsx
index 9d055fa..f5a9426 100644
--- a/src/components/FileExplorer/DiffStatGraph.tsx
+++ b/src/components/FileExplorer/DiffStatGraph.tsx
@@ -3,7 +3,7 @@ import {
   DiffIgnoredIcon,
   DiffModifiedIcon,
   DiffRemovedIcon,
-  DiffRenamedIcon
+  DiffRenamedIcon,
 } from '@primer/octicons-react'
 import * as React from 'react'
 import { resolveDiffGraphMeta } from 'utils/general'
diff --git a/src/components/FileExplorer/index.tsx b/src/components/FileExplorer/index.tsx
index 05ba77b..7c106b3 100644
--- a/src/components/FileExplorer/index.tsx
+++ b/src/components/FileExplorer/index.tsx
@@ -23,7 +23,7 @@ import {
   useRenderFileCommentAmounts,
   useRenderFileStatus,
   useRenderFindInFolderButton,
-  useRenderGoToButton
+  useRenderGoToButton,
 } from './hooks/useNodeRenderers'
 import { useHandleNodeClick } from './hooks/useOnNodeClick'
 import { useOnSearch } from './hooks/useOnSearch'
diff --git a/src/components/FileExplorer/useLatestValueRef.tsx b/src/components/FileExplorer/useLatestValueRef.tsx
index dd3738f..8325e36 100644
--- a/src/components/FileExplorer/useLatestValueRef.tsx
+++ b/src/components/FileExplorer/useLatestValueRef.tsx
@@ -1,14 +1,15 @@
-import * as React from 'react';
+import * as React from 'react'
 
 function useLatestValueRef<T>(value: T) {
-  const ref = React.useRef(value);
+  const ref = React.useRef(value)
   React.useEffect(() => {
-    ref.current = value;
-  });
-  return ref;
+    ref.current = value
+  })
+  return ref
 }
 export function useCallbackRef<Args extends AnyArray, R>(
-  callback: (...args: Args) => R): (...args: Args) => R {
-  const ref = useLatestValueRef(callback);
-  return React.useCallback((...args: Args) => ref.current(...args), [ref]);
+  callback: (...args: Args) => R,
+): (...args: Args) => R {
+  const ref = useLatestValueRef(callback)
+  return React.useCallback((...args: Args) => ref.current(...args), [ref])
 }
diff --git a/src/components/Highlight.tsx b/src/components/Highlight.tsx
index 0102ef7..b43317d 100644
--- a/src/components/Highlight.tsx
+++ b/src/components/Highlight.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import * as React from 'react'
 
 export const Highlight = React.memo(function Highlight(props: { text: string; match?: RegExp }) {
   const { text, match } = props
diff --git a/src/components/HighlightOnIndexes.tsx b/src/components/HighlightOnIndexes.tsx
index c31ac2b..f9748c5 100644
--- a/src/components/HighlightOnIndexes.tsx
+++ b/src/components/HighlightOnIndexes.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import * as React from 'react'
 
 export function HighlightOnIndexes({ text, indexes = [] }: { text: string; indexes?: number[] }) {
   return (
diff --git a/src/components/Icon.tsx b/src/components/Icon.tsx
index 2da8150..111651f 100644
--- a/src/components/Icon.tsx
+++ b/src/components/Icon.tsx
@@ -23,7 +23,7 @@ import {
   ReplyIcon as Reply,
   SearchIcon as Search,
   TabIcon as Tab,
-  XIcon as X
+  XIcon as X,
 } from '@primer/octicons-react'
 import * as React from 'react'
 import { cx } from 'utils/cx'
diff --git a/src/components/IconButton.tsx b/src/components/IconButton.tsx
index 8f22a3a..86838d5 100644
--- a/src/components/IconButton.tsx
+++ b/src/components/IconButton.tsx
@@ -3,7 +3,7 @@ import { Box, merge, SxProp, useTheme } from '@primer/react'
 import { getBaseStyles, getSizeStyles, getVariantStyles } from '@primer/react/lib/Button/styles'
 import {
   IconButtonProps as PrimerIconButtonProps,
-  StyledButton
+  StyledButton,
 } from '@primer/react/lib/Button/types'
 import React from 'react'
 import { is } from 'utils/is'
diff --git a/src/components/Inputs/Checkbox.tsx b/src/components/Inputs/Checkbox.tsx
index ab336bf..de60e2c 100644
--- a/src/components/Inputs/Checkbox.tsx
+++ b/src/components/Inputs/Checkbox.tsx
@@ -1,9 +1,13 @@
-import { Checkbox as PrimerCheckbox, CheckboxProps, FormControl } from '@primer/react';
-import * as React from 'react';
+import { Checkbox as PrimerCheckbox, CheckboxProps, FormControl } from '@primer/react'
+import * as React from 'react'
 
 export function Checkbox({
-  label, value, onChange, checked = value, ...rest
-}: Override<CheckboxProps, { label: React.ReactNode; } & IO<boolean>>) {
+  label,
+  value,
+  onChange,
+  checked = value,
+  ...rest
+}: Override<CheckboxProps, { label: React.ReactNode } & IO<boolean>>) {
   return (
     <FormControl>
       <PrimerCheckbox
@@ -12,8 +16,9 @@ export function Checkbox({
         }}
         checked={checked}
         onChange={e => onChange(e.target.checked)}
-        {...rest} />
+        {...rest}
+      />
       <FormControl.Label>{label}</FormControl.Label>
     </FormControl>
-  );
+  )
 }
diff --git a/src/components/Inputs/SelectInput.tsx b/src/components/Inputs/SelectInput.tsx
index b2aee5f..ed9a35e 100644
--- a/src/components/Inputs/SelectInput.tsx
+++ b/src/components/Inputs/SelectInput.tsx
@@ -7,10 +7,13 @@ export type Option<T> = {
   value: T
 }
 
-export type SelectInputProps<T> = Override<SelectProps, IO<T> & {
-  label: React.ReactNode
-  options: Option<T>[]
-}>
+export type SelectInputProps<T> = Override<
+  SelectProps,
+  IO<T> & {
+    label: React.ReactNode
+    options: Option<T>[]
+  }
+>
 
 export function SelectInput<T>({
   value,
@@ -33,7 +36,7 @@ export function SelectInput<T>({
             },
           },
         },
-        mb: 1
+        mb: 1,
       }}
     >
       <FormControl.Label>{label}</FormControl.Label>
diff --git a/src/components/ResizeHandler.tsx b/src/components/ResizeHandler.tsx
index 790949c..76be3b6 100644
--- a/src/components/ResizeHandler.tsx
+++ b/src/components/ResizeHandler.tsx
@@ -2,7 +2,7 @@ import { GrabberIcon } from '@primer/octicons-react'
 import { Icon } from 'components/Icon'
 import * as React from 'react'
 import { ResizeState, useResizeHandler } from '../utils/hooks/useResizeHandler'
-import { Size2D } from "./Size"
+import { Size2D } from './Size'
 
 type Props = {
   size: Size2D
diff --git a/src/components/Size.tsx b/src/components/Size.tsx
index deba4a8..46a125d 100644
--- a/src/components/Size.tsx
+++ b/src/components/Size.tsx
@@ -1,2 +1,2 @@
-export type Size = number;
-export type Size2D = [Size, Size];
+export type Size = number
+export type Size2D = [Size, Size]
diff --git a/src/components/settings/SimpleConfigField/SelectInput.tsx b/src/components/settings/SimpleConfigField/SelectInput.tsx
index 5e185f0..1d9563f 100644
--- a/src/components/settings/SimpleConfigField/SelectInput.tsx
+++ b/src/components/settings/SimpleConfigField/SelectInput.tsx
@@ -1,10 +1,7 @@
 import { SelectInput, SelectInputProps } from 'components/Inputs/SelectInput'
 import * as React from 'react'
 import { Config, ConfigKeys } from 'utils/config/helper'
-import {
-  SimpleConfigFieldProps,
-  useSimpleConfigFieldIO
-} from '.'
+import { SimpleConfigFieldProps, useSimpleConfigFieldIO } from '.'
 import { FieldLabel } from './FieldLabel'
 
 export function SimpleConfigFieldSelect<Key extends ConfigKeys>({
diff --git a/src/platforms/GitHub/getPullRequestTreeData.ts b/src/platforms/GitHub/getPullRequestTreeData.ts
index f87ee50..15f289c 100644
--- a/src/platforms/GitHub/getPullRequestTreeData.ts
+++ b/src/platforms/GitHub/getPullRequestTreeData.ts
@@ -40,9 +40,9 @@ export async function getPullRequestTreeData(
   // query all elements at once to make getFileElementHash run faster
   const elementsHavePath = docs.map(doc => doc.querySelectorAll(`[data-path]`))
   const map = new Map<string, string>()
-    for (const group of elementsHavePath) {
-      for (let i = 0; i < group.length; i++) {
-        const element = group[i]
+  for (const group of elementsHavePath) {
+    for (let i = 0; i < group.length; i++) {
+      const element = group[i]
       const id = element.parentElement?.id
       if (id) {
         const path = element.getAttribute('data-path')
diff --git a/src/platforms/GitHub/utils.ts b/src/platforms/GitHub/utils.ts
index f6702ce..7c1a153 100644
--- a/src/platforms/GitHub/utils.ts
+++ b/src/platforms/GitHub/utils.ts
@@ -89,7 +89,8 @@ export async function continuousLoadPages(doc: Document, onReceivePage?: (doc: D
    */
   const fragmentSelector = 'include-fragment[data-targets="diff-file-filter.progressiveLoaders"]'
   const documents: Document[] = [doc]
-  while (true) { // eslint-disable-line no-constant-condition
+  // eslint-disable-next-line no-constant-condition
+  while (true) {
     const fragment = doc.querySelector(fragmentSelector) as HTMLElement
     if (!fragment) break
     const src = fragment.getAttribute('src')
diff --git a/src/platforms/dummyPlatformForTypeSafety.ts b/src/platforms/dummyPlatformForTypeSafety.ts
index e147cde..b02ea46 100644
--- a/src/platforms/dummyPlatformForTypeSafety.ts
+++ b/src/platforms/dummyPlatformForTypeSafety.ts
@@ -16,6 +16,7 @@ export const dummyPlatformForTypeSafety: Platform = {
   getOAuthLink: dummyPlatformMethod,
 }
 
-function dummyPlatformMethod(): any { // eslint-disable-line @typescript-eslint/no-explicit-any
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function dummyPlatformMethod(): any {
   throw new Error(`Do not call dummy platform methods`)
 }
diff --git a/src/react-override.d.ts b/src/react-override.d.ts
index f9fc488..2a95754 100644
--- a/src/react-override.d.ts
+++ b/src/react-override.d.ts
@@ -1,10 +1,11 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 // Patch the removed `children` prop
 declare namespace React {
   interface FunctionComponent<P = {}> {
-    (props: PropsWithChildren<P>, context?: any): ReactElement<any, any> | null;
-    propTypes?: WeakValidationMap<P> | undefined;
-    contextTypes?: ValidationMap<any> | undefined;
-    defaultProps?: Partial<P> | undefined;
-    displayName?: string | undefined;
+    (props: PropsWithChildren<P>, context?: any): ReactElement<any, any> | null
+    propTypes?: WeakValidationMap<P> | undefined
+    contextTypes?: ValidationMap<any> | undefined
+    defaultProps?: Partial<P> | undefined
+    displayName?: string | undefined
   }
 }
diff --git a/src/utils/VisibleNodesGenerator/prepare.ts b/src/utils/VisibleNodesGenerator/prepare.ts
index cce967b..5104cbe 100644
--- a/src/utils/VisibleNodesGenerator/prepare.ts
+++ b/src/utils/VisibleNodesGenerator/prepare.ts
@@ -35,7 +35,7 @@ function recursiveMarkDiff(
     const [path] = node
     markDiff(path, state)
   } else {
-    const [/* name */, children] = node
+    const [, children] = node
     for (const child of children) {
       recursiveMarkDiff(child, state, markDiff)
     }
diff --git a/src/utils/general.ts b/src/utils/general.ts
index 53f3189..84645d7 100644
--- a/src/utils/general.ts
+++ b/src/utils/general.ts
@@ -218,6 +218,7 @@ export function forOf<T, R>(target: T, callback: <K extends keyof T>(key: K, val
 // eslint-disable-next-line @typescript-eslint/no-empty-function
 export function noop() {}
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 export function atomicAsyncFunction<Args extends any[], R>(fn: (...args: Args) => Promise<R>) {
   let last: Promise<R> | undefined
   return async (...args: Args) => {
diff --git a/src/utils/hooks/useElementSize.ts b/src/utils/hooks/useElementSize.ts
index 10d3d90..168147c 100644
--- a/src/utils/hooks/useElementSize.ts
+++ b/src/utils/hooks/useElementSize.ts
@@ -1,6 +1,6 @@
 import * as React from 'react'
 import * as features from 'utils/features'
-import { Size2D } from "../../components/Size"
+import { Size2D } from '../../components/Size'
 
 export function useElementSize<E extends HTMLElement>() {
   const ref = React.useRef<E | null>(null)
diff --git a/src/utils/hooks/useResizeHandler.ts b/src/utils/hooks/useResizeHandler.ts
index c123bfd..678a19e 100644
--- a/src/utils/hooks/useResizeHandler.ts
+++ b/src/utils/hooks/useResizeHandler.ts
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { Size2D } from "../../components/Size"
+import { Size2D } from '../../components/Size'
 
 export type ResizeState = 'idle' | 'resizing'
 
diff --git a/yarn.lock b/yarn.lock
index 7e18d84..3155516 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2959,6 +2959,14 @@ agent-base@6:
   dependencies:
     debug "4"
 
+aggregate-error@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/aggregate-error/-/aggregate-error-3.1.0.tgz#92670ff50f5359bdb7a3e0d40d0ec30c5737687a"
+  integrity sha512-4I7Td01quW/RpocfNayFdFVk1qSuoh0E7JrbRJ16nH01HhKFQ88INq9Sd+nd72zqRySlr9BmDA8xlEJ6vJMrYA==
+  dependencies:
+    clean-stack "^2.0.0"
+    indent-string "^4.0.0"
+
 ajv-errors@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/ajv-errors/-/ajv-errors-1.0.1.tgz#f35986aceb91afadec4102fbd85014950cefa64d"
@@ -3014,7 +3022,7 @@ ansi-colors@^3.0.0:
   resolved "https://registry.yarnpkg.com/ansi-colors/-/ansi-colors-3.2.4.tgz#e3a3da4bfbae6c86a9c285625de124a234026fbf"
   integrity sha512-hHUXGagefjN2iRrID63xckIvotOXOojhQKWIPUZ4mNUZ9nLZW+7FMNoE1lOkEhNWYsx/7ysGIuJYCiMAA9FnrA==
 
-ansi-escapes@^4.2.1:
+ansi-escapes@^4.2.1, ansi-escapes@^4.3.0:
   version "4.3.2"
   resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-4.3.2.tgz#6b2291d1db7d98b6521d5f1efa42d0f3a9feb65e"
   integrity sha512-gKXj5ALrKWQLsYG9jlTRmR/xKluxHV+Z9QEwNIgCfM1/uwPMCuzVVnh5mwTd+OuBZcwSIMbqssNWRm1lE51QaQ==
@@ -3046,6 +3054,11 @@ ansi-regex@^5.0.1:
   resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-5.0.1.tgz#082cb2c89c9fe8659a311a53bd6a4dc5301db304"
   integrity sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==
 
+ansi-regex@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-6.0.1.tgz#3183e38fae9a65d7cb5e53945cd5897d0260a06a"
+  integrity sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==
+
 ansi-styles@^2.2.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-2.2.1.tgz#b432dd3358b634cf75e1e4664368240533c1ddbe"
@@ -3071,6 +3084,11 @@ ansi-styles@^5.0.0:
   resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-5.2.0.tgz#07449690ad45777d1924ac2abb2fc8895dba836b"
   integrity sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==
 
+ansi-styles@^6.0.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-6.1.0.tgz#87313c102b8118abd57371afab34618bf7350ed3"
+  integrity sha512-VbqNsoz55SYGczauuup0MFUyXNQviSpFTj1RQtFzmQLk18qbVSpTFFGMT293rmDaQuKCT6InmbuEyUne4mTuxQ==
+
 any-promise@^1.0.0, any-promise@^1.1.0, any-promise@~1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/any-promise/-/any-promise-1.3.0.tgz#abc6afeedcea52e809cdc0376aed3ce39635d17f"
@@ -3237,6 +3255,11 @@ assign-symbols@^1.0.0:
   resolved "https://registry.yarnpkg.com/assign-symbols/-/assign-symbols-1.0.0.tgz#59667f41fadd4f20ccbc2bb96b8d4f7f78ec0367"
   integrity sha1-WWZ/QfrdTyDMvCu5a41Pf3jsA2c=
 
+astral-regex@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/astral-regex/-/astral-regex-2.0.0.tgz#483143c567aeed4785759c0865786dc77d7d2e31"
+  integrity sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ==
+
 async-each@^1.0.1:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/async-each/-/async-each-1.0.3.tgz#b727dbf87d7651602f06f4d4ac387f47d91b0cbf"
@@ -3633,7 +3656,7 @@ braces@^2.3.1, braces@^2.3.2:
     split-string "^3.0.2"
     to-regex "^3.0.1"
 
-braces@^3.0.1, braces@~3.0.2:
+braces@^3.0.1, braces@^3.0.2, braces@~3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.2.tgz#3454e1a462ee8d599e236df336cd9ea4f8afe107"
   integrity sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==
@@ -4067,11 +4090,39 @@ classnames@2.3.1:
   resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.1.tgz#dfcfa3891e306ec1dad105d0e88f4417b8535e8e"
   integrity sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA==
 
+clean-stack@^2.0.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/clean-stack/-/clean-stack-2.2.0.tgz#ee8472dbb129e727b31e8a10a427dee9dfe4008b"
+  integrity sha512-4diC9HaTE+KRAMWhDhrGOECgWZxoevMc5TlkObMqNSsVU62PYzXZ/SMTjzyGAFF1YusgxGcSWTEXBhp0CPwQ1A==
+
 cli-boxes@^2.2.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/cli-boxes/-/cli-boxes-2.2.1.tgz#ddd5035d25094fce220e9cab40a45840a440318f"
   integrity sha512-y4coMcylgSCdVinjiDBuR8PCC2bLjyGTwEmPb9NHR/QaNU6EUOXcTY/s6VjGMD6ENSEaeQYHCY0GNGS5jfMwPw==
 
+cli-cursor@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/cli-cursor/-/cli-cursor-3.1.0.tgz#264305a7ae490d1d03bf0c9ba7c925d1753af307"
+  integrity sha512-I/zHAwsKf9FqGoXM4WWRACob9+SNukZTd94DWF57E4toouRulbCxcUh6RKUEOQlYTHJnzkPMySvPNaaSLNfLZw==
+  dependencies:
+    restore-cursor "^3.1.0"
+
+cli-truncate@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/cli-truncate/-/cli-truncate-2.1.0.tgz#c39e28bf05edcde5be3b98992a22deed5a2b93c7"
+  integrity sha512-n8fOixwDD6b/ObinzTrp1ZKFzbgvKZvuz/TvejnLn1aQfC6r52XEx85FmuC+3HI+JM7coBRXUvNqEU2PHVrHpg==
+  dependencies:
+    slice-ansi "^3.0.0"
+    string-width "^4.2.0"
+
+cli-truncate@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/cli-truncate/-/cli-truncate-3.1.0.tgz#3f23ab12535e3d73e839bb43e73c9de487db1389"
+  integrity sha512-wfOBkjXteqSnI59oPcJkcPl/ZmwvMMOj340qUIY1SKZCv0B9Cf4D4fAucRkIKQmsIuYK3x1rrgU7MeGRruiuiA==
+  dependencies:
+    slice-ansi "^5.0.0"
+    string-width "^5.0.0"
+
 cliui@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/cliui/-/cliui-5.0.0.tgz#deefcfdb2e800784aa34f46fa08e06851c7bbbc5"
@@ -4174,6 +4225,11 @@ color2k@1.2.4:
   resolved "https://registry.yarnpkg.com/color2k/-/color2k-1.2.4.tgz#af34950ac58e23cf224a01cb8dd0c9911a79605e"
   integrity sha512-DiwdBwc0BryPFFXoCrW8XQGXl2rEtMToODybxZjKnN5IJXt/tV/FsN02pCK/b7KcWvJEioz3c74lQSmayFvS4Q==
 
+colorette@^2.0.16, colorette@^2.0.17:
+  version "2.0.19"
+  resolved "https://registry.yarnpkg.com/colorette/-/colorette-2.0.19.tgz#cdf044f47ad41a0f4b56b3a0d5b4e6e1a2d5a798"
+  integrity sha512-3tlv/dIP7FWvj3BsbHrGLJ6l/oKh1O3TcgBqMn+yyCagOxc23fyzDS6HypQbgxWbkpDnf52p1LuR4eWDQ/K9WQ==
+
 columnify@1.6.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/columnify/-/columnify-1.6.0.tgz#6989531713c9008bb29735e61e37acf5bd553cf3"
@@ -4216,6 +4272,11 @@ commander@^5.1.0:
   resolved "https://registry.yarnpkg.com/commander/-/commander-5.1.0.tgz#46abbd1652f8e059bddaef99bbdcb2ad9cf179ae"
   integrity sha512-P0CysNDQ7rtVw4QIQtm+MRxV66vKFSvlsQvGYXZWR3qFU0jlMKHZZZgw8e+8DSah4UDKMqnknRDQz+xuQXQ/Zg==
 
+commander@^9.3.0:
+  version "9.4.0"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-9.4.0.tgz#bc4a40918fefe52e22450c111ecd6b7acce6f11c"
+  integrity sha512-sRPT+umqkz90UA8M1yqYfnHlZA7fF6nSphDtxeywPZ49ysjxDQybzk13CL+mXekDRG92skbcqCLVovuCusNmFw==
+
 common-tags@1.8.2:
   version "1.8.2"
   resolved "https://registry.yarnpkg.com/common-tags/-/common-tags-1.8.2.tgz#94ebb3c076d26032745fd54face7f688ef5ac9c6"
@@ -4636,7 +4697,7 @@ debug@^3.2.6:
   dependencies:
     ms "^2.1.1"
 
-debug@^4.3.2:
+debug@^4.3.2, debug@^4.3.4:
   version "4.3.4"
   resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.4.tgz#1319f6579357f2338d3337d2cdd4914bb5dcc865"
   integrity sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==
@@ -4973,6 +5034,11 @@ duplexify@^4.1.2:
     readable-stream "^3.1.1"
     stream-shift "^1.0.0"
 
+eastasianwidth@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/eastasianwidth/-/eastasianwidth-0.2.0.tgz#696ce2ec0aa0e6ea93a397ffcf24aa7840c827cb"
+  integrity sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==
+
 ecc-jsbn@~0.1.1:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/ecc-jsbn/-/ecc-jsbn-0.1.2.tgz#3a83a904e54353287874c564b7549386849a98c9"
@@ -5031,6 +5097,11 @@ emoji-regex@^8.0.0:
   resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-8.0.0.tgz#e818fd69ce5ccfcb404594f842963bf53164cc37"
   integrity sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==
 
+emoji-regex@^9.2.2:
+  version "9.2.2"
+  resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-9.2.2.tgz#840c8803b0d8047f4ff0cf963176b32d4ef3ed72"
+  integrity sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==
+
 emojis-list@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-2.1.0.tgz#4daa4d9db00f9819880c79fa457ae5b09a1fd389"
@@ -5192,6 +5263,11 @@ escodegen@^2.0.0:
   optionalDependencies:
     source-map "~0.6.1"
 
+eslint-config-prettier@^8.5.0:
+  version "8.5.0"
+  resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-8.5.0.tgz#5a81680ec934beca02c7b1a61cf8ca34b66feab1"
+  integrity sha512-obmWKLUNCnhtQRKc+tmnYuQl0pFU1ibYJQ5BGhTVB08bHe9wC8qUeG7c08dj9XX+AuPj1YSGSQIHl1pnDHZR0Q==
+
 eslint-plugin-no-unsanitized@4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/eslint-plugin-no-unsanitized/-/eslint-plugin-no-unsanitized-4.0.1.tgz#e2343265467ba2270ade478cbe07bbafeaea412d"
@@ -5470,6 +5546,21 @@ execa@^5.0.0:
     signal-exit "^3.0.3"
     strip-final-newline "^2.0.0"
 
+execa@^6.1.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/execa/-/execa-6.1.0.tgz#cea16dee211ff011246556388effa0818394fb20"
+  integrity sha512-QVWlX2e50heYJcCPG0iWtf8r0xjEYfz/OYLGDYH+IyjWezzPNxz63qNFOu0l4YftGWuizFVZHHs8PrLU5p2IDA==
+  dependencies:
+    cross-spawn "^7.0.3"
+    get-stream "^6.0.1"
+    human-signals "^3.0.1"
+    is-stream "^3.0.0"
+    merge-stream "^2.0.0"
+    npm-run-path "^5.1.0"
+    onetime "^6.0.0"
+    signal-exit "^3.0.7"
+    strip-final-newline "^3.0.0"
+
 exit@^0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/exit/-/exit-0.1.2.tgz#0632638f8d877cc82107d30a0fff1a17cba1cd0c"
@@ -6121,7 +6212,7 @@ get-stream@^5.0.0, get-stream@^5.1.0:
   dependencies:
     pump "^3.0.0"
 
-get-stream@^6.0.0:
+get-stream@^6.0.0, get-stream@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-6.0.1.tgz#a262d8eef67aced57c2852ad6167526a43cbf7b7"
   integrity sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==
@@ -6644,6 +6735,16 @@ human-signals@^2.1.0:
   resolved "https://registry.yarnpkg.com/human-signals/-/human-signals-2.1.0.tgz#dc91fcba42e4d06e4abaed33b3e7a3c02f514ea0"
   integrity sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==
 
+human-signals@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/human-signals/-/human-signals-3.0.1.tgz#c740920859dafa50e5a3222da9d3bf4bb0e5eef5"
+  integrity sha512-rQLskxnM/5OCldHo+wNXbpVgDn5A17CUoKX+7Sokwaknlq7CdSnphy0W39GU8dw59XiCXmFXDg4fRuckQRKewQ==
+
+husky@^8.0.1:
+  version "8.0.1"
+  resolved "https://registry.yarnpkg.com/husky/-/husky-8.0.1.tgz#511cb3e57de3e3190514ae49ed50f6bc3f50b3e9"
+  integrity sha512-xs7/chUH/CKdOCs7Zy0Aev9e/dKOMZf3K1Az1nar3tzlv0jfqnYtu235bstsWTmXOR0EfINrPa97yy4Lz6RiKw==
+
 hyphenate-style-name@^1.0.2:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/hyphenate-style-name/-/hyphenate-style-name-1.0.3.tgz#097bb7fa0b8f1a9cf0bd5c734cf95899981a9b48"
@@ -6754,6 +6855,11 @@ imurmurhash@^0.1.4:
   resolved "https://registry.yarnpkg.com/imurmurhash/-/imurmurhash-0.1.4.tgz#9218b9b2b928a238b13dc4fb6b6d576f231453ea"
   integrity sha1-khi5srkoojixPcT7a21XbyMUU+o=
 
+indent-string@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/indent-string/-/indent-string-4.0.0.tgz#624f8f4497d619b2d9768531d58f4122854d7251"
+  integrity sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==
+
 indexes-of@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/indexes-of/-/indexes-of-1.0.1.tgz#f30f716c8e2bd346c7b67d3df3915566a7c05607"
@@ -7019,6 +7125,11 @@ is-fullwidth-code-point@^3.0.0:
   resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz#f116f8064fe90b3f7844a38997c0b75051269f1d"
   integrity sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==
 
+is-fullwidth-code-point@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-4.0.0.tgz#fae3167c729e7463f8461ce512b080a49268aa88"
+  integrity sha512-O4L094N2/dZ7xqVdrXhh9r1KODPJpFms8B5sGdJLPy664AgvXsreZUyCQQNItZRDlYug4xStLjNp/sz3HvBowQ==
+
 is-generator-fn@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/is-generator-fn/-/is-generator-fn-2.1.0.tgz#7d140adc389aaf3011a8f2a2a4cfa6faadffb118"
@@ -7151,6 +7262,11 @@ is-stream@^2.0.0:
   resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-2.0.0.tgz#bde9c32680d6fae04129d6ac9d921ce7815f78e3"
   integrity sha512-XCoy+WlUr7d1+Z8GgSuXmpuUFC9fOhRXglJMx+dwLKTkL44Cjd4W1Z5P+BQZpr+cR93aGP4S/s7Ftw6Nd/kiEw==
 
+is-stream@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-3.0.0.tgz#e6bfd7aa6bef69f4f472ce9bb681e3e57b4319ac"
+  integrity sha512-LnQR4bZ9IADDRSkvpqMGvt/tEJWclzklNgSw48V5EAaAeDd6qGvN8ei6k5p0tvxSR171VmGyHuTiAOfxAbr8kA==
+
 is-string@^1.0.5, is-string@^1.0.7:
   version "1.0.7"
   resolved "https://registry.yarnpkg.com/is-string/-/is-string-1.0.7.tgz#0dd12bf2006f255bb58f695110eff7491eebc0fd"
@@ -8135,11 +8251,49 @@ lighthouse-logger@^1.0.0:
     debug "^2.6.8"
     marky "^1.2.0"
 
+lilconfig@2.0.5:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/lilconfig/-/lilconfig-2.0.5.tgz#19e57fd06ccc3848fd1891655b5a447092225b25"
+  integrity sha512-xaYmXZtTHPAw5m+xLN8ab9C+3a8YmV3asNSPOATITbtwrfbwaLJj8h66H1WMIpALCkqsIzK3h7oQ+PdX+LQ9Eg==
+
 lines-and-columns@^1.1.6:
   version "1.1.6"
   resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.1.6.tgz#1c00c743b433cd0a4e80758f7b64a57440d9ff00"
   integrity sha1-HADHQ7QzzQpOgHWPe2SldEDZ/wA=
 
+lint-staged@^13.0.3:
+  version "13.0.3"
+  resolved "https://registry.yarnpkg.com/lint-staged/-/lint-staged-13.0.3.tgz#d7cdf03a3830b327a2b63c6aec953d71d9dc48c6"
+  integrity sha512-9hmrwSCFroTSYLjflGI8Uk+GWAwMB4OlpU4bMJEAT5d/llQwtYKoim4bLOyLCuWFAhWEupE0vkIFqtw/WIsPug==
+  dependencies:
+    cli-truncate "^3.1.0"
+    colorette "^2.0.17"
+    commander "^9.3.0"
+    debug "^4.3.4"
+    execa "^6.1.0"
+    lilconfig "2.0.5"
+    listr2 "^4.0.5"
+    micromatch "^4.0.5"
+    normalize-path "^3.0.0"
+    object-inspect "^1.12.2"
+    pidtree "^0.6.0"
+    string-argv "^0.3.1"
+    yaml "^2.1.1"
+
+listr2@^4.0.5:
+  version "4.0.5"
+  resolved "https://registry.yarnpkg.com/listr2/-/listr2-4.0.5.tgz#9dcc50221583e8b4c71c43f9c7dfd0ef546b75d5"
+  integrity sha512-juGHV1doQdpNT3GSTs9IUN43QJb7KHdF9uqg7Vufs/tG9VTzpFphqF4pm/ICdAABGQxsyNn9CiYA3StkI6jpwA==
+  dependencies:
+    cli-truncate "^2.1.0"
+    colorette "^2.0.16"
+    log-update "^4.0.0"
+    p-map "^4.0.0"
+    rfdc "^1.3.0"
+    rxjs "^7.5.5"
+    through "^2.3.8"
+    wrap-ansi "^7.0.0"
+
 loader-runner@^2.4.0:
   version "2.4.0"
   resolved "https://registry.yarnpkg.com/loader-runner/-/loader-runner-2.4.0.tgz#ed47066bfe534d7e84c4c7b9998c2a75607d9357"
@@ -8228,6 +8382,16 @@ lodash@^4.17.11, lodash@^4.17.13, lodash@^4.17.15, lodash@^4.17.21, lodash@^4.17
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
 
+log-update@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/log-update/-/log-update-4.0.0.tgz#589ecd352471f2a1c0c570287543a64dfd20e0a1"
+  integrity sha512-9fkkDevMefjg0mmzWFBW8YkFP91OrizzkW3diF7CpG+S2EYdy4+TVfGwz1zeF8x7hCx1ovSPTOE9Ngib74qqUg==
+  dependencies:
+    ansi-escapes "^4.3.0"
+    cli-cursor "^3.1.0"
+    slice-ansi "^4.0.0"
+    wrap-ansi "^6.2.0"
+
 loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
@@ -8433,6 +8597,14 @@ micromatch@^4.0.4:
     braces "^3.0.1"
     picomatch "^2.2.3"
 
+micromatch@^4.0.5:
+  version "4.0.5"
+  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.5.tgz#bc8999a7cbbf77cdc89f132f6e467051b49090c6"
+  integrity sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==
+  dependencies:
+    braces "^3.0.2"
+    picomatch "^2.3.1"
+
 miller-rabin@^4.0.0:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/miller-rabin/-/miller-rabin-4.0.1.tgz#f080351c865b0dc562a8462966daa53543c78a4d"
@@ -8468,6 +8640,11 @@ mimic-fn@^2.0.0, mimic-fn@^2.1.0:
   resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-2.1.0.tgz#7ed2c2ccccaf84d3ffcb7a69b57711fc2083401b"
   integrity sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==
 
+mimic-fn@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-4.0.0.tgz#60a90550d5cb0b239cca65d893b1a53b29871ecc"
+  integrity sha512-vqiC06CuhBTUdZH+RYl8sFrL096vA45Ok5ISO6sE/Mr1jRbGH4Csnhi8f3wKVl7x8mO4Au7Ir9D3Oyv1VYMFJw==
+
 mimic-response@^1.0.0, mimic-response@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/mimic-response/-/mimic-response-1.0.1.tgz#4923538878eef42063cb8a3e3b0798781487ab1b"
@@ -8861,6 +9038,13 @@ npm-run-path@^4.0.0, npm-run-path@^4.0.1:
   dependencies:
     path-key "^3.0.0"
 
+npm-run-path@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/npm-run-path/-/npm-run-path-5.1.0.tgz#bc62f7f3f6952d9894bd08944ba011a6ee7b7e00"
+  integrity sha512-sJOdmRGrY2sjNTRMbSvluQqg+8X7ZK61yvzBEIDhz4f8z1TZFYABsqjjCBd/0PUNE9M6QDgHJXQkGUEm7Q+l9Q==
+  dependencies:
+    path-key "^4.0.0"
+
 npmlog@^4.0.2, npmlog@^4.1.2:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/npmlog/-/npmlog-4.1.2.tgz#08a7f2a8bf734604779a9efa4ad5cc717abb954b"
@@ -8917,6 +9101,11 @@ object-inspect@^1.12.0, object-inspect@^1.9.0:
   resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.12.0.tgz#6e2c120e868fd1fd18cb4f18c31741d0d6e776f0"
   integrity sha512-Ho2z80bVIvJloH+YzRmpZVQe87+qASmBUKZDWgx9cu+KDrX2ZDH/3tMy+gXbZETVGs2M8YdxObOh7XAtim9Y0g==
 
+object-inspect@^1.12.2:
+  version "1.12.2"
+  resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.12.2.tgz#c0641f26394532f28ab8d796ab954e43c009a8ea"
+  integrity sha512-z+cPxW0QGUp0mcqcsgQyLVRDoXFQbXOwBaqyF7VIgI4TWNQsDHrBpUQslRmIfAoYWdYzs6UlKJtB2XJpTaNSpQ==
+
 object-is@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/object-is/-/object-is-1.0.1.tgz#0aa60ec9989a0b3ed795cf4d06f62cf1ad6539b6"
@@ -9029,6 +9218,13 @@ onetime@^5.1.2:
   dependencies:
     mimic-fn "^2.1.0"
 
+onetime@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/onetime/-/onetime-6.0.0.tgz#7c24c18ed1fd2e9bca4bd26806a33613c77d34b4"
+  integrity sha512-1FlR+gjXK7X+AsAHso35MnyN5KqGwJRi/31ft6x0M194ht7S+rWAvd7PHss9xSKMzE0asv1pyIHaJYq+BbacAQ==
+  dependencies:
+    mimic-fn "^4.0.0"
+
 open@7.4.2:
   version "7.4.2"
   resolved "https://registry.yarnpkg.com/open/-/open-7.4.2.tgz#b8147e26dcf3e426316c730089fd71edd29c2321"
@@ -9158,6 +9354,13 @@ p-locate@^4.1.0:
   dependencies:
     p-limit "^2.2.0"
 
+p-map@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/p-map/-/p-map-4.0.0.tgz#bb2f95a5eda2ec168ec9274e06a747c3e2904d2b"
+  integrity sha512-/bjOqmgETBYB5BoEeGVea8dmvHb2m9GLy1E9W43yeyfP6QQCZGFNa+XRceJEuDB6zqr+gKpIAmlLebMpykw/MQ==
+  dependencies:
+    aggregate-error "^3.0.0"
+
 p-try@^2.0.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/p-try/-/p-try-2.2.0.tgz#cb2868540e313d61de58fafbe35ce9004d5540e6"
@@ -9278,6 +9481,11 @@ path-key@^3.0.0, path-key@^3.1.0:
   resolved "https://registry.yarnpkg.com/path-key/-/path-key-3.1.1.tgz#581f6ade658cbba65a0d3380de7753295054f375"
   integrity sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==
 
+path-key@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/path-key/-/path-key-4.0.0.tgz#295588dc3aee64154f877adb9d780b81c554bf18"
+  integrity sha512-haREypq7xkM7ErfgIyA0z+Bj4AGKlMSdlQE2jvJo6huWD1EdkKYV+G/T4nq0YEF2vgTT8kqMFKo1uHn950r4SQ==
+
 path-parse@^1.0.6, path-parse@^1.0.7:
   version "1.0.7"
   resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.7.tgz#fbc114b60ca42b30d9daf5858e4bd68bbedb6735"
@@ -9336,7 +9544,7 @@ picomatch@^2.0.4, picomatch@^2.0.7:
   resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.2.1.tgz#21bac888b6ed8601f831ce7816e335bc779f0a4a"
   integrity sha512-ISBaA8xQNmwELC7eOjqFKMESB2VIqt4PPDD0nsS95b/9dZXvVKOlz9keMSnoGGKcOHXfTvDD6WMaRoSc9UuhRA==
 
-picomatch@^2.2.1, picomatch@^2.3.0:
+picomatch@^2.2.1, picomatch@^2.3.0, picomatch@^2.3.1:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42"
   integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==
@@ -9346,6 +9554,11 @@ picomatch@^2.2.3:
   resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.0.tgz#f1f061de8f6a4bf022892e2d128234fb98302972"
   integrity sha512-lY1Q/PiJGC2zOv/z391WOTD+Z02bCgsFfvxoXXf6h7kv9o+WmsmzYqrAwY63sNgOxE4xEdq0WyUnXfKeBrSvYw==
 
+pidtree@^0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/pidtree/-/pidtree-0.6.0.tgz#90ad7b6d42d5841e69e0a2419ef38f8883aa057c"
+  integrity sha512-eG2dWTVw5bzqGRztnHExczNxt5VGsE6OwTeCG3fdUf9KBsZzO3R5OIIIzWR+iZA0NtZ+RDVdaoE2dK1cn6jH4g==
+
 pify@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/pify/-/pify-3.0.0.tgz#e5a4acd2c101fdf3d9a4d07f0dbc4db49dd28176"
@@ -10211,6 +10424,14 @@ responselike@^1.0.2:
   dependencies:
     lowercase-keys "^1.0.0"
 
+restore-cursor@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/restore-cursor/-/restore-cursor-3.1.0.tgz#39f67c54b3a7a58cea5236d95cf0034239631f7e"
+  integrity sha512-l+sSefzHpj5qimhFSE5a8nufZYAM3sBSVMAPtYkmC+4EH2anSGaEMXSD0izRQbu9nfyQ9y5JrVmp7E8oZrUjvA==
+  dependencies:
+    onetime "^5.1.0"
+    signal-exit "^3.0.2"
+
 ret@~0.1.10:
   version "0.1.15"
   resolved "https://registry.yarnpkg.com/ret/-/ret-0.1.15.tgz#b8a4825d5bdb1fc3f6f53c2bc33f81388681c7bc"
@@ -10221,6 +10442,11 @@ reusify@^1.0.4:
   resolved "https://registry.yarnpkg.com/reusify/-/reusify-1.0.4.tgz#90da382b1e126efc02146e90845a88db12925d76"
   integrity sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==
 
+rfdc@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/rfdc/-/rfdc-1.3.0.tgz#d0b7c441ab2720d05dc4cf26e01c89631d9da08b"
+  integrity sha512-V2hovdzFbOi77/WajaSMXk2OLm+xNIeQdMMuB7icj7bk6zi2F8GGAxigcnDFpJHbNyNcgyJDiP+8nOrY5cZGrA==
+
 rimraf@3.0.2, rimraf@^3.0.0, rimraf@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-3.0.2.tgz#f1a5402ba6220ad52cc1282bac1ae3aa49fd061a"
@@ -10278,6 +10504,13 @@ rxjs@^7.5.4:
   dependencies:
     tslib "^2.1.0"
 
+rxjs@^7.5.5:
+  version "7.5.6"
+  resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-7.5.6.tgz#0446577557862afd6903517ce7cae79ecb9662bc"
+  integrity sha512-dnyv2/YsXhnm461G+R/Pe5bWP41Nm6LBXEYWI6eiFP4fiwx6WRI/CD0zbdVAudd9xwLEF2IDcKXLHit0FYjUzw==
+  dependencies:
+    tslib "^2.1.0"
+
 safe-buffer@5.1.2, safe-buffer@~5.1.0, safe-buffer@~5.1.1:
   version "5.1.2"
   resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.2.tgz#991ec69d296e0313747d59bdfd2b745c35f8828d"
@@ -10599,7 +10832,7 @@ signal-exit@^3.0.3:
   resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.3.tgz#a1410c2edd8f077b08b4e253c8eacfcaf057461c"
   integrity sha512-VUJ49FC8U1OxwZLxIbTTrDvLnf/6TDgxZcK8wxR8zs13xpx7xbG60ndBlhNrFi2EMuFRoeDoJO7wthSLq42EjA==
 
-signal-exit@^3.0.6:
+signal-exit@^3.0.6, signal-exit@^3.0.7:
   version "3.0.7"
   resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.7.tgz#a9a1767f8af84155114eaabd73f99273c8f59ad9"
   integrity sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==
@@ -10624,6 +10857,32 @@ slash@^3.0.0:
   resolved "https://registry.yarnpkg.com/slash/-/slash-3.0.0.tgz#6539be870c165adbd5240220dbe361f1bc4d4634"
   integrity sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==
 
+slice-ansi@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/slice-ansi/-/slice-ansi-3.0.0.tgz#31ddc10930a1b7e0b67b08c96c2f49b77a789787"
+  integrity sha512-pSyv7bSTC7ig9Dcgbw9AuRNUb5k5V6oDudjZoMBSr13qpLBG7tB+zgCkARjq7xIUgdz5P1Qe8u+rSGdouOOIyQ==
+  dependencies:
+    ansi-styles "^4.0.0"
+    astral-regex "^2.0.0"
+    is-fullwidth-code-point "^3.0.0"
+
+slice-ansi@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/slice-ansi/-/slice-ansi-4.0.0.tgz#500e8dd0fd55b05815086255b3195adf2a45fe6b"
+  integrity sha512-qMCMfhY040cVHT43K9BFygqYbUPFZKHOg7K73mtTWJRb8pyP3fzf4Ixd5SzdEJQ6MRUg/WBnOLxghZtKKurENQ==
+  dependencies:
+    ansi-styles "^4.0.0"
+    astral-regex "^2.0.0"
+    is-fullwidth-code-point "^3.0.0"
+
+slice-ansi@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/slice-ansi/-/slice-ansi-5.0.0.tgz#b73063c57aa96f9cd881654b15294d95d285c42a"
+  integrity sha512-FC+lgizVPfie0kkhqUScwRu1O/lF6NOgJmlCgK+/LYxDCTk8sGelYaHDhFcDN+Sn3Cv+3VSa4Byeo+IMCzpMgQ==
+  dependencies:
+    ansi-styles "^6.0.0"
+    is-fullwidth-code-point "^4.0.0"
+
 snapdragon-node@^2.0.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/snapdragon-node/-/snapdragon-node-2.1.1.tgz#6c175f86ff14bdb0724563e8f3c1b021a286853b"
@@ -10916,6 +11175,11 @@ strict-uri-encode@^1.0.0:
   resolved "https://registry.yarnpkg.com/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz#279b225df1d582b1f54e65addd4352e18faa0713"
   integrity sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM=
 
+string-argv@^0.3.1:
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/string-argv/-/string-argv-0.3.1.tgz#95e2fbec0427ae19184935f816d74aaa4c5c19da"
+  integrity sha512-a1uQGz7IyVy9YwhqjZIZu1c8JO8dNIe20xBmSS6qu9kv++k3JGzCVmprbNN5Kn+BgzD5E7YYwg1CcjuJMRNsvg==
+
 string-length@^4.0.1:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/string-length/-/string-length-4.0.2.tgz#a8a8dc7bd5c1a82b9b3c8b87e125f66871b6e57a"
@@ -10968,6 +11232,15 @@ string-width@^4.2.2, string-width@^4.2.3:
     is-fullwidth-code-point "^3.0.0"
     strip-ansi "^6.0.1"
 
+string-width@^5.0.0:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-5.1.2.tgz#14f8daec6d81e7221d2a357e668cab73bdbca794"
+  integrity sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==
+  dependencies:
+    eastasianwidth "^0.2.0"
+    emoji-regex "^9.2.2"
+    strip-ansi "^7.0.1"
+
 string.prototype.matchall@^4.0.6:
   version "4.0.7"
   resolved "https://registry.yarnpkg.com/string.prototype.matchall/-/string.prototype.matchall-4.0.7.tgz#8e6ecb0d8a1fb1fda470d81acecb2dba057a481d"
@@ -11049,6 +11322,13 @@ strip-ansi@^6.0.1:
   dependencies:
     ansi-regex "^5.0.1"
 
+strip-ansi@^7.0.1:
+  version "7.0.1"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-7.0.1.tgz#61740a08ce36b61e50e65653f07060d000975fb2"
+  integrity sha512-cXNxvT8dFNRVfhVME3JAe98mkXDYN2O1l7jmcwMnOslDeESg1rF/OZMtK0nRAhiari1unG5cD4jG3rapUAkLbw==
+  dependencies:
+    ansi-regex "^6.0.1"
+
 strip-bom-buf@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/strip-bom-buf/-/strip-bom-buf-2.0.0.tgz#ff9c223937f8e7154b77e9de9bde094186885c15"
@@ -11079,6 +11359,11 @@ strip-final-newline@^2.0.0:
   resolved "https://registry.yarnpkg.com/strip-final-newline/-/strip-final-newline-2.0.0.tgz#89b852fb2fcbe936f6f4b3187afb0a12c1ab58ad"
   integrity sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==
 
+strip-final-newline@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/strip-final-newline/-/strip-final-newline-3.0.0.tgz#52894c313fbff318835280aed60ff71ebf12b8fd"
+  integrity sha512-dOESqjYr96iWYylGObzd39EuNTa5VJxyvVAEm5Jnh7KGo75V43Hk1odPQkNDyXNmUR6k+gEiDVXnjB8HJ3crXw==
+
 strip-json-comments@3.1.1, strip-json-comments@^3.1.0, strip-json-comments@^3.1.1:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.1.1.tgz#31f1281b3832630434831c310c01cccda8cbe006"
@@ -12152,6 +12437,15 @@ wrap-ansi@^5.1.0:
     string-width "^3.0.0"
     strip-ansi "^5.0.0"
 
+wrap-ansi@^6.2.0:
+  version "6.2.0"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-6.2.0.tgz#e9393ba07102e6c91a3b221478f0257cd2856e53"
+  integrity sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==
+  dependencies:
+    ansi-styles "^4.0.0"
+    string-width "^4.1.0"
+    strip-ansi "^6.0.0"
+
 wrap-ansi@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
@@ -12251,6 +12545,11 @@ yaml@^1.7.2:
   resolved "https://registry.yarnpkg.com/yaml/-/yaml-1.10.2.tgz#2301c5ffbf12b467de8da2333a459e29e7920e4b"
   integrity sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==
 
+yaml@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/yaml/-/yaml-2.1.1.tgz#1e06fb4ca46e60d9da07e4f786ea370ed3c3cfec"
+  integrity sha512-o96x3OPo8GjWeSLF+wOAbrPfhFOGY0W00GNaxCDv+9hkcDJEnev1yh8S7pgHF0ik6zc8sQLuL8hjHjJULZp8bw==
+
 yargs-parser@^13.1.0:
   version "13.1.2"
   resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-13.1.2.tgz#130f09702ebaeef2650d54ce6e3e5706f7a4fb38"

From 6fde8c1092f5c1ea16cac5490232ef17e5ced7af Mon Sep 17 00:00:00 2001
From: EnixCoda <enixcoda@gmail.com>
Date: Sat, 16 Jul 2022 01:54:26 +0800
Subject: [PATCH 86/93] fix: show tooltip of search mode

---
 src/components/FileExplorer/index.tsx | 3 ++-
 src/styles/index.scss                 | 1 -
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/FileExplorer/index.tsx b/src/components/FileExplorer/index.tsx
index 7c106b3..d5f3e10 100644
--- a/src/components/FileExplorer/index.tsx
+++ b/src/components/FileExplorer/index.tsx
@@ -23,7 +23,7 @@ import {
   useRenderFileCommentAmounts,
   useRenderFileStatus,
   useRenderFindInFolderButton,
-  useRenderGoToButton,
+  useRenderGoToButton
 } from './hooks/useNodeRenderers'
 import { useHandleNodeClick } from './hooks/useOnNodeClick'
 import { useOnSearch } from './hooks/useOnSearch'
@@ -202,6 +202,7 @@ function LoadedFileExplorer({
             height,
             width: '100%',
             overflow: 'auto',
+            position: 'absolute', // This allows reducing `height` on viewport height reduce
           }}
           ref={scrollElementRef}
           onScroll={onScroll}
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 337ec9a..54648bc 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -503,7 +503,6 @@ html[data-with-gitako-spacing='true'] {
         display: inline-flex;
         flex: 1;
         flex-direction: column;
-        overflow: hidden; // essential for shrinking `.files` when viewport height reduce
 
         .search-input {
           padding-left: 0;

From 9435e9cd528fa4383762b544c09c677de8a9a5a2 Mon Sep 17 00:00:00 2001
From: EnixCoda <enixcoda@gmail.com>
Date: Sat, 16 Jul 2022 23:54:27 +0800
Subject: [PATCH 87/93] refactor: sanitize URL usages

---
 package.json                                  |    4 +-
 src/platforms/GitHub/API.ts                   |   24 +-
 .../GitHub/getPullRequestTreeData.ts          |   35 +-
 src/platforms/GitHub/index.ts                 |    8 +-
 src/platforms/Gitea/API.ts                    |    9 +-
 src/platforms/Gitea/index.ts                  |   10 +-
 src/platforms/Gitee/API.ts                    |    5 +-
 src/platforms/Gitee/index.ts                  |   15 +-
 src/utils/general.ts                          |    5 -
 src/utils/gitSubmodule.ts                     |    2 +-
 src/utils/networkService.ts                   |    1 +
 yarn.lock                                     | 1536 +++++++++--------
 12 files changed, 909 insertions(+), 745 deletions(-)
 create mode 100644 src/utils/networkService.ts

diff --git a/package.json b/package.json
index 1752fac..ab54ea9 100644
--- a/package.json
+++ b/package.json
@@ -11,7 +11,7 @@
     "prepare": "husky install",
     "dev": "VERSION=dev-v$(node scripts/get-version.js) webpack --watch",
     "dev-safari": "TARGET=safari yarn run dev",
-    "debug-firefox": "web-ext run --source-dir=dist --firefox-profile=firefox-profile --profile-create-if-missing --keep-profile-changes --start-url github.com/EnixCoda/Gitako",
+    "debug-firefox": "web-ext run --source-dir=dist --firefox-profile=firefox-profile --profile-create-if-missing --keep-profile-changes --start-url https://github.com/EnixCoda/Gitako",
     "analyse-bundle": "ANALYSE= NODE_ENV=production webpack",
     "postinstall": "node scripts/fix-deps",
     "build": "VERSION=v$(node scripts/get-version.js) NODE_ENV=production webpack",
@@ -89,7 +89,7 @@
     "typescript": "^4.7.2",
     "uglifyjs-webpack-plugin": "^2.1.2",
     "url-loader": "^1.1.2",
-    "web-ext": "^6.8.0",
+    "web-ext": "^7.1.1",
     "webpack": "^4.29.6",
     "webpack-bundle-analyzer": "^3.6.0",
     "webpack-cli": "^3.1.2"
diff --git a/src/platforms/GitHub/API.ts b/src/platforms/GitHub/API.ts
index e9df774..073e264 100644
--- a/src/platforms/GitHub/API.ts
+++ b/src/platforms/GitHub/API.ts
@@ -1,6 +1,7 @@
 import { errors } from 'platforms'
 import { isEnterprise } from '.'
 import { is } from '../../utils/is'
+import { gitakoServiceHost } from '../../utils/networkService'
 import { continuousLoadPages, getDOM, resolveHeaderLink } from './utils'
 
 function isAPIRateLimitExceeded(content: JSONValue) {
@@ -71,14 +72,14 @@ async function request<T>(
   throw new Error(`Unknown message content "${message}"`)
 }
 
-const API_ENDPOINT = isEnterprise() ? `${window.location.host}/api/v3` : 'api.github.com'
+const API_ENDPOINT = isEnterprise() ? `${window.location.origin}/api/v3` : 'https://api.github.com'
 
 export async function getRepoMeta(
   userName: string,
   repoName: string,
   accessToken?: string,
 ): Promise<GitHubAPI.MetaData> {
-  const url = `https://${API_ENDPOINT}/repos/${userName}/${repoName}`
+  const url = `${API_ENDPOINT}/repos/${userName}/${repoName}`
   return await request(url, { accessToken })
 }
 
@@ -91,8 +92,7 @@ export async function getTreeData(
 ): Promise<GitHubAPI.TreeData> {
   const search = new URLSearchParams()
   if (recursive) search.set('recursive', '1')
-  const url =
-    `https://${API_ENDPOINT}/repos/${userName}/${repoName}/git/trees/${branchName}?` + search
+  const url = `${API_ENDPOINT}/repos/${userName}/${repoName}/git/trees/${branchName}?${search}`
   return await request(url, { accessToken })
 }
 
@@ -102,7 +102,7 @@ export async function getPullRequest(
   pullId: string,
   accessToken?: string,
 ): Promise<GitHubAPI.PullData> {
-  const url = `https://${API_ENDPOINT}/repos/${userName}/${repoName}/pulls/${pullId}`
+  const url = `${API_ENDPOINT}/repos/${userName}/${repoName}/pulls/${pullId}`
   return await request(url, { accessToken })
 }
 
@@ -115,7 +115,7 @@ export async function requestPullTreeData(
   accessToken?: string,
 ) {
   const search = new URLSearchParams({ page: page.toString(), per_page: `${pageSize}` })
-  const url = `https://${API_ENDPOINT}/repos/${userName}/${repoName}/pulls/${pullId}/files?${search}`
+  const url = `${API_ENDPOINT}/repos/${userName}/${repoName}/pulls/${pullId}/files?${search}`
   return await request(url, { accessToken }, responseBodyResolvers.asIs)
 }
 
@@ -136,7 +136,7 @@ export async function getPullComments(
   pullId: string,
   accessToken?: string,
 ): Promise<GitHubAPI.PullComments> {
-  const url = `https://${API_ENDPOINT}/repos/${userName}/${repoName}/pulls/${pullId}/comments`
+  const url = `${API_ENDPOINT}/repos/${userName}/${repoName}/pulls/${pullId}/comments`
   return await request(url, { accessToken })
 }
 
@@ -150,7 +150,7 @@ export async function getPullPageDocuments(
   return continuousLoadPages(
     document ||
       (await getDOM(
-        `https://${window.location.host}/${userName}/${repoName}/pull/${pullId}/files?_pjax=%23js-repo-pjax-container`,
+        `${window.location.origin}/${userName}/${repoName}/pull/${pullId}/files?_pjax=%23js-repo-pjax-container`,
       )),
   )
 }
@@ -169,14 +169,14 @@ export async function getBlobData(
   sha: string,
   accessToken?: string,
 ): Promise<GitHubAPI.BlobData> {
-  const url = `https://${API_ENDPOINT}/repos/${userName}/${repoName}/git/blobs/${sha}`
+  const url = `${API_ENDPOINT}/repos/${userName}/${repoName}/git/blobs/${sha}`
   return await request(url, { accessToken })
 }
 
 export async function OAuth(code: string): Promise<string | null> {
   try {
-    const endpoint = `https://gitako.enix.one/oauth/github?`
-    const res = await fetch(endpoint + new URLSearchParams({ code }).toString(), {
+    const endpoint = `https://${gitakoServiceHost}/oauth/github?${new URLSearchParams({ code })}`
+    const res = await fetch(endpoint, {
       method: 'post',
     })
     if (res.ok) {
@@ -201,7 +201,7 @@ export async function requestCommitTreeData(
     per_page: '100',
     page: `${page}`,
   })
-  const url = `https://${API_ENDPOINT}/repos/${userName}/${repoName}/commits/${sha}?` + search
+  const url = `${API_ENDPOINT}/repos/${userName}/${repoName}/commits/${sha}?${search}`
   return await request(url, { accessToken }, responseBodyResolvers.asIs)
 }
 
diff --git a/src/platforms/GitHub/getPullRequestTreeData.ts b/src/platforms/GitHub/getPullRequestTreeData.ts
index 15f289c..cd4821e 100644
--- a/src/platforms/GitHub/getPullRequestTreeData.ts
+++ b/src/platforms/GitHub/getPullRequestTreeData.ts
@@ -1,4 +1,3 @@
-import { formatHash } from 'utils/general'
 import * as API from './API'
 import { getPRDiffTotalStat, getPullRequestFilesCount, isInPullFilesPage } from './DOMHelper'
 import { processTree } from './index'
@@ -51,23 +50,27 @@ export async function getPullRequestTreeData(
     }
   }
 
-  const urlMainPart = `https://${window.location.host}/${userName}/${repoName}/pull/${pullId}/files${window.location.search}`
+  const url = new URL(window.location.href)
+  url.pathname = `/${userName}/${repoName}/pull/${pullId}/files`
   const commentsMap = getCommentsMap(commentData)
   const nodes: TreeNode[] = treeData.map(
-    ({ filename, sha, additions, deletions, changes, status }) => ({
-      path: filename || '',
-      type: 'blob',
-      name: filename?.split('/').pop() || '',
-      url: `${urlMainPart}${formatHash(map.get(filename))}`,
-      sha: sha,
-      comments: commentsMap.get(filename),
-      diff: {
-        status,
-        additions,
-        deletions,
-        changes,
-      },
-    }),
+    ({ filename, sha, additions, deletions, changes, status }) => {
+      url.hash = map.get(filename) || ''
+      return {
+        path: filename || '',
+        type: 'blob',
+        name: filename?.split('/').pop() || '',
+        url: `${url}`,
+        sha,
+        comments: commentsMap.get(filename),
+        diff: {
+          status,
+          additions,
+          deletions,
+          changes,
+        },
+      }
+    },
   )
 
   const root = processTree(nodes)
diff --git a/src/platforms/GitHub/index.ts b/src/platforms/GitHub/index.ts
index f4096a0..335dd7c 100644
--- a/src/platforms/GitHub/index.ts
+++ b/src/platforms/GitHub/index.ts
@@ -76,7 +76,7 @@ function getUrlForRedirect(
   // Modern browsers have great support for handling unsafe URL,
   // It may be possible to sanitize path with
   // `path => path.includes('#') ? path.replace(/#/g, '%23') : '...'
-  return `https://${window.location.host}/${userName}/${repoName}/${type}/${branchName}/${path
+  return `${window.location.origin}/${userName}/${repoName}/${type}/${branchName}/${path
     .split('/')
     .map(encodeURIComponent)
     .join('/')}`
@@ -144,8 +144,8 @@ export const GitHub: Platform = {
     return (await API.getRepoMeta(userName, repoName, accessToken)).default_branch
   },
   resolveUrlFromMetaData({ userName, repoName, branchName }) {
-    const repoUrl = `https://${window.location.host}/${userName}/${repoName}`
-    const userUrl = `https://${window.location.host}/${userName}`
+    const repoUrl = `${window.location.origin}/${userName}/${repoName}`
+    const userUrl = `${window.location.origin}/${userName}`
     const pullId = URLHelper.isInPullPage()
     const commitId = URLHelper.isInCommitPage()
     const branchUrl = pullId
@@ -200,7 +200,7 @@ export const GitHub: Platform = {
       scope: 'repo',
       redirect_uri: window.location.href,
     })
-    return `https://github.com/login/oauth/authorize?` + params.toString()
+    return `https://github.com/login/oauth/authorize?${params}`
   },
   usePlatformHooks() {
     const { copyFileButton, copySnippetButton, codeFolding } = useConfigs().value
diff --git a/src/platforms/Gitea/API.ts b/src/platforms/Gitea/API.ts
index cca5304..8494a27 100644
--- a/src/platforms/Gitea/API.ts
+++ b/src/platforms/Gitea/API.ts
@@ -1,6 +1,7 @@
 import { raiseError } from 'analytics'
 import { errors } from 'platforms'
 import { is } from 'utils/is'
+import { gitakoServiceHost } from 'utils/networkService'
 
 function isEmptyProject(content: JSONValue) {
   return is.JSON.object(content) && content?.['message'] === 'Git Repository is empty.'
@@ -58,7 +59,7 @@ async function request(
   }
 }
 
-export const API_ENDPOINT = `${window.location.protocol}//${window.location.host}/api/v1`
+export const API_ENDPOINT = `${window.location.origin}/api/v1`
 
 export async function getRepoMeta(
   userName: string,
@@ -78,7 +79,7 @@ export async function getTreeData(
 ): Promise<GiteaAPI.TreeData> {
   const search = new URLSearchParams()
   if (recursive) search.set('recursive', '1')
-  const url = `${API_ENDPOINT}/repos/${userName}/${repoName}/git/trees/${branchName}?` + search
+  const url = `${API_ENDPOINT}/repos/${userName}/${repoName}/git/trees/${branchName}?${search}`
   return await request(url, { accessToken })
 }
 
@@ -93,8 +94,8 @@ export async function getBlobData(
 }
 
 export async function OAuth(code: string): Promise<string | null> {
-  const endpoint = `https://gitako.enix.one/oauth/gitea?`
-  const res = await fetch(endpoint + new URLSearchParams({ code }).toString(), {
+  const endpoint = `https://${gitakoServiceHost}/oauth/gitea?${new URLSearchParams({ code })}`
+  const res = await fetch(endpoint, {
     method: 'post',
   })
 
diff --git a/src/platforms/Gitea/index.ts b/src/platforms/Gitea/index.ts
index c1b64e8..5b80c41 100644
--- a/src/platforms/Gitea/index.ts
+++ b/src/platforms/Gitea/index.ts
@@ -67,9 +67,7 @@ function getUrlForRedirect(
   // Modern browsers have great support for handling unsafe URL,
   // It may be possible to sanitize path with
   // `path => path.includes('#') ? path.replace(/#/g, '%23') : '...'
-  return `${window.location.protocol}//${
-    window.location.host
-  }/${userName}/${repoName}/src/branch/${branchName}/${path
+  return `${window.location.origin}/${userName}/${repoName}/src/branch/${branchName}/${path
     .split('/')
     .map(encodeURIComponent)
     .join('/')}`
@@ -108,8 +106,8 @@ export const Gitea: Platform = {
     return data.default_branch
   },
   resolveUrlFromMetaData({ userName, repoName, branchName }) {
-    const repoUrl = `${window.location.protocol}//${window.location.host}/${userName}/${repoName}`
-    const userUrl = `${window.location.protocol}//${window.location.host}/${userName}`
+    const repoUrl = `${window.location.origin}/${userName}/${repoName}`
+    const userUrl = `${window.location.origin}/${userName}`
     const branchUrl = `${repoUrl}/src/branch/${branchName}`
     return {
       repoUrl,
@@ -169,7 +167,7 @@ export const Gitea: Platform = {
     return API.OAuth(code)
   },
   getOAuthLink() {
-    return `${window.location.protocol}//${window.location.host}/api/v1/user/applications/oauth2`
+    return `${window.location.origin}/api/v1/user/applications/oauth2`
   },
   usePlatformHooks() {
     useProgressBar()
diff --git a/src/platforms/Gitee/API.ts b/src/platforms/Gitee/API.ts
index 1948501..1af4841 100644
--- a/src/platforms/Gitee/API.ts
+++ b/src/platforms/Gitee/API.ts
@@ -1,6 +1,7 @@
 import { raiseError } from 'analytics'
 import { errors } from 'platforms'
 import { is } from 'utils/is'
+import { gitakoServiceHost } from 'utils/networkService'
 
 function isEmptyProject(content: JSONValue) {
   return is.JSON.object(content) && content?.['message'] === 'Git Repository is empty.'
@@ -90,8 +91,8 @@ export async function getBlobData(
 }
 
 export async function OAuth(code: string): Promise<string | null> {
-  const endpoint = 'https://gitako.enix.one/oauth/gitee?'
-  const res = await fetch(endpoint + new URLSearchParams({ code }).toString(), {
+  const endpoint = `https://${gitakoServiceHost}/oauth/gitee?${new URLSearchParams({ code })}`
+  const res = await fetch(endpoint, {
     method: 'post',
   })
 
diff --git a/src/platforms/Gitee/index.ts b/src/platforms/Gitee/index.ts
index 9f226b4..ef2ac64 100644
--- a/src/platforms/Gitee/index.ts
+++ b/src/platforms/Gitee/index.ts
@@ -5,6 +5,7 @@ import * as React from 'react'
 import { resolveGitModules } from 'utils/gitSubmodule'
 import { useOnPJAXDone } from 'utils/hooks/usePJAX'
 import { useProgressBar } from 'utils/hooks/useProgressBar'
+import { gitakoServiceHost } from 'utils/networkService'
 import { sortFoldersToFront } from 'utils/treeParser'
 import * as API from './API'
 import * as DOMHelper from './DOMHelper'
@@ -68,7 +69,7 @@ function getUrlForRedirect(
   type = 'blob',
   path = '',
 ) {
-  return `https://gitee.com/${userName}/${repoName}/${type}/${branchName}/${path}`
+  return `${window.location.origin}/${userName}/${repoName}/${type}/${branchName}/${path}`
 }
 
 export const Gitee: Platform = {
@@ -105,8 +106,8 @@ export const Gitee: Platform = {
     return data.default_branch
   },
   resolveUrlFromMetaData({ userName, repoName, branchName }) {
-    const repoUrl = `https://${window.location.host}/${userName}/${repoName}`
-    const userUrl = `https://${window.location.host}/${userName}`
+    const repoUrl = `${window.location.origin}/${userName}/${repoName}`
+    const userUrl = `${window.location.origin}/${userName}`
     const branchUrl = `${repoUrl}/tree/${branchName}`
     return {
       repoUrl,
@@ -167,11 +168,11 @@ export const Gitee: Platform = {
       client_id: GITEE_OAUTH.clientId,
       scope: 'projects',
       response_type: 'code',
-      redirect_uri:
-        'https://gitako.enix.one/redirect/?' +
-        new URLSearchParams({ redirect: window.location.href }).toString(),
+      redirect_uri: `https://${gitakoServiceHost}/redirect/?${new URLSearchParams({
+        redirect: window.location.href,
+      })}`,
     })
-    return `https://gitee.com/oauth/authorize?` + params.toString()
+    return `https://gitee.com/oauth/authorize?${params}`
   },
   setOAuth(code) {
     return API.OAuth(code)
diff --git a/src/utils/general.ts b/src/utils/general.ts
index 84645d7..d309e87 100644
--- a/src/utils/general.ts
+++ b/src/utils/general.ts
@@ -202,11 +202,6 @@ export function resolveDiffGraphMeta(additions: number, deletions: number, chang
   return { g, r, w }
 }
 
-export function formatHash(hash?: string) {
-  if (hash) return '#' + hash
-  return ''
-}
-
 export function forOf<T, R>(target: T, callback: <K extends keyof T>(key: K, value: T[K]) => R) {
   for (const key of Object.keys(target)) {
     const $key = key as keyof typeof target
diff --git a/src/utils/gitSubmodule.ts b/src/utils/gitSubmodule.ts
index 35a82f7..eeb1d17 100644
--- a/src/utils/gitSubmodule.ts
+++ b/src/utils/gitSubmodule.ts
@@ -11,7 +11,7 @@ function transformModuleGitURL(node: TreeNode, URL: string) {
   const matched = URL.match(subModuleURLRegex.git)
   if (!matched) return
   const [, userName, repoName] = matched
-  return appendCommitPath(`https://${window.location.host}/${userName}/${repoName}`, node)
+  return appendCommitPath(`${window.location.origin}/${userName}/${repoName}`, node)
 }
 
 function cutDotGit(URL: string) {
diff --git a/src/utils/networkService.ts b/src/utils/networkService.ts
new file mode 100644
index 0000000..caf347e
--- /dev/null
+++ b/src/utils/networkService.ts
@@ -0,0 +1 @@
+export const gitakoServiceHost = 'gitako.enix.one'
diff --git a/yarn.lock b/yarn.lock
index 3155516..cb28fd8 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -55,6 +55,13 @@
   dependencies:
     "@babel/highlight" "^7.14.5"
 
+"@babel/code-frame@^7.16.0":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.18.6.tgz#3b25d38c89600baa2dcc219edfa88a74eb2c427a"
+  integrity sha512-TDCmlK5eOvH+eH7cdAFlNXeVJqWIQ7gW9tY1GJIpUtFb6CmjVyq2VM3u71bOyR8CRihcCgMUYoDNyLXao3+70Q==
+  dependencies:
+    "@babel/highlight" "^7.18.6"
+
 "@babel/compat-data@^7.13.11", "@babel/compat-data@^7.16.8", "@babel/compat-data@^7.17.0", "@babel/compat-data@^7.17.7":
   version "7.17.7"
   resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.17.7.tgz#078d8b833fbbcc95286613be8c716cef2b519fa2"
@@ -574,6 +581,11 @@
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.16.7.tgz#e8c602438c4a8195751243da9031d1607d247cad"
   integrity sha512-hsEnFemeiW4D08A5gUAZxLBTXpZ39P+a+DGDsHw1yxqyQ/jzFEnxf5uTEGp+3bzAbNOxU1paTgYS4ECU/IgfDw==
 
+"@babel/helper-validator-identifier@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.18.6.tgz#9c97e30d31b2b8c72a1d08984f2ca9b574d7a076"
+  integrity sha512-MmetCkz9ej86nJQV+sFCxoGGrUbU3q02kgLciwkrt9QqEB7cP39oKEY0PakknEO0Gu20SskMRi+AYZ3b1TpN9g==
+
 "@babel/helper-validator-option@^7.14.5":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.14.5.tgz#6e72a1fff18d5dfcb878e1e62f1a021c4b72d5a3"
@@ -657,6 +669,15 @@
     chalk "^2.0.0"
     js-tokens "^4.0.0"
 
+"@babel/highlight@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.18.6.tgz#81158601e93e2563795adcbfbdf5d64be3f2ecdf"
+  integrity sha512-u7stbOuYjaPezCuLj29hNW1v64M2Md2qupEKP1fHc7WdOA3DgLh37suiSrZYY7haUB7iBeQZ9P1uiRF359do3g==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.18.6"
+    chalk "^2.0.0"
+    js-tokens "^4.0.0"
+
 "@babel/parser@^7.1.0", "@babel/parser@^7.10.3":
   version "7.10.3"
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.10.3.tgz#7e71d892b0d6e7d04a1af4c3c79d72c1f10f5315"
@@ -1381,10 +1402,10 @@
     "@babel/helper-validator-option" "^7.16.7"
     "@babel/plugin-transform-typescript" "^7.16.7"
 
-"@babel/runtime@7.13.9":
-  version "7.13.9"
-  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.13.9.tgz#97dbe2116e2630c489f22e0656decd60aaa1fcee"
-  integrity sha512-aY2kU+xgJ3dJ1eU6FMB9EH8dIe8dmusF1xEku52joLvw6eAFN0AI+WxCLDnpev2LEejWBAy2sBvBOBAjI3zmvA==
+"@babel/runtime@7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.18.6.tgz#6a1ef59f838debd670421f8c7f2cbb8da9751580"
+  integrity sha512-t9wi7/AW6XtKahAe20Yw0/mMljKq0B1r2fPdvaAdV/KPDZewFXdaaa6K7lxmZBZ8FBNpCiAT6iHPmd6QO9bKfQ==
   dependencies:
     regenerator-runtime "^0.13.4"
 
@@ -1583,30 +1604,28 @@
   resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
   integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==
 
-"@devicefarmer/adbkit-logcat@^1.1.0":
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/@devicefarmer/adbkit-logcat/-/adbkit-logcat-1.1.0.tgz#866d3406dc9f3791446adfe3ae622ffc48607db4"
-  integrity sha512-K90P5gUXM/w+yzLvJIRQ+tJooNU6ipUPPQkljtPJ0laR66TGtpt4Gqsjm0n9dPHK1W5KGgU1R5wnCd6RTSlPNA==
+"@devicefarmer/adbkit-logcat@^2.1.2":
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/@devicefarmer/adbkit-logcat/-/adbkit-logcat-2.1.2.tgz#4db1eee8046ad8b296ca8ab757862d6172411a05"
+  integrity sha512-G4grpEa5s9s9wCRs8YB9LjFSnz0Os3g3RYIwZSxH3JFfV3aejL5xlu4hHMH4JY+d4oCCwImcEZJcFPY9BEP21w==
 
-"@devicefarmer/adbkit-monkey@~1.0.1":
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/@devicefarmer/adbkit-monkey/-/adbkit-monkey-1.0.1.tgz#7d225e5fdbdad8d6772453390ecab3f1b0eb72b1"
-  integrity sha512-HilPrVrCosYWqSyjfpDtaaN1kJwdlBpS+IAflP3z+e7nsEgk3JGJf1Vg0NgHJooTf5HDfXSyZqMVg+5jvXCK0g==
-  dependencies:
-    async "~0.2.9"
+"@devicefarmer/adbkit-monkey@~1.2.0":
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/@devicefarmer/adbkit-monkey/-/adbkit-monkey-1.2.1.tgz#28cd6a121c5d572588081dd1c53454c604eef241"
+  integrity sha512-ZzZY/b66W2Jd6NHbAhLyDWOEIBWC11VizGFk7Wx7M61JZRz7HR9Cq5P+65RKWUU7u6wgsE8Lmh9nE4Mz+U2eTg==
 
-"@devicefarmer/adbkit@2.11.3":
-  version "2.11.3"
-  resolved "https://registry.yarnpkg.com/@devicefarmer/adbkit/-/adbkit-2.11.3.tgz#0ad981a20aada3e4eff4871218f633c85cf7f2db"
-  integrity sha512-rsgWREAvSRQjdP9/3GoAV6Tq+o97haywgbTfCgt5yUqiDpaaq3hlH9FTo9XsdG8x+Jd0VQ9nTC2IXsDu8JGRSA==
+"@devicefarmer/adbkit@3.2.3":
+  version "3.2.3"
+  resolved "https://registry.yarnpkg.com/@devicefarmer/adbkit/-/adbkit-3.2.3.tgz#7e66b4b2b435e4447df9563a05e70b0fe327b717"
+  integrity sha512-wK9rVrabs4QU0oK8Jnwi+HRBEm+s1x/o63kgthUe0y7K1bfcYmgLuQf41/adsj/5enddlSxzkJavl2EwOu+r1g==
   dependencies:
-    "@devicefarmer/adbkit-logcat" "^1.1.0"
-    "@devicefarmer/adbkit-monkey" "~1.0.1"
-    bluebird "~2.9.24"
-    commander "^2.3.0"
-    debug "~2.6.3"
-    node-forge "^0.10.0"
-    split "~0.3.3"
+    "@devicefarmer/adbkit-logcat" "^2.1.2"
+    "@devicefarmer/adbkit-monkey" "~1.2.0"
+    bluebird "~3.7"
+    commander "^9.1.0"
+    debug "~4.3.1"
+    node-forge "^1.3.1"
+    split "~1.0.1"
 
 "@emotion/is-prop-valid@^1.1.0":
   version "1.1.2"
@@ -1630,21 +1649,6 @@
   resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.5.tgz#77211291c1900a700b8a78cfafda3160d76949ed"
   integrity sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==
 
-"@eslint/eslintrc@^1.2.1":
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-1.2.1.tgz#8b5e1c49f4077235516bc9ec7d41378c0f69b8c6"
-  integrity sha512-bxvbYnBPN1Gibwyp6NrpnFzA3YtRL3BBAyEAFVIpNTm2Rn4Vy87GA5M4aSn3InRrlsbX5N0GW7XIx+U4SAEKdQ==
-  dependencies:
-    ajv "^6.12.4"
-    debug "^4.3.2"
-    espree "^9.3.1"
-    globals "^13.9.0"
-    ignore "^5.2.0"
-    import-fresh "^3.2.1"
-    js-yaml "^4.1.0"
-    minimatch "^3.0.4"
-    strip-json-comments "^3.1.1"
-
 "@eslint/eslintrc@^1.2.3":
   version "1.2.3"
   resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-1.2.3.tgz#fcaa2bcef39e13d6e9e7f6271f4cc7cae1174886"
@@ -1660,6 +1664,21 @@
     minimatch "^3.1.2"
     strip-json-comments "^3.1.1"
 
+"@eslint/eslintrc@^1.3.0":
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-1.3.0.tgz#29f92c30bb3e771e4a2048c95fa6855392dfac4f"
+  integrity sha512-UWW0TMTmk2d7hLcWD1/e2g5HDM/HQ3csaLSqXCfqwh4uNDuNqlaKWXmEsL4Cs41Z0KnILNvwbHAah3C2yt06kw==
+  dependencies:
+    ajv "^6.12.4"
+    debug "^4.3.2"
+    espree "^9.3.2"
+    globals "^13.15.0"
+    ignore "^5.2.0"
+    import-fresh "^3.2.1"
+    js-yaml "^4.1.0"
+    minimatch "^3.1.2"
+    strip-json-comments "^3.1.1"
+
 "@hapi/hoek@^9.0.0":
   version "9.2.0"
   resolved "https://registry.yarnpkg.com/@hapi/hoek/-/hoek-9.2.0.tgz#f3933a44e365864f4dad5db94158106d511e8131"
@@ -1946,10 +1965,10 @@
     "@jridgewell/resolve-uri" "^3.0.3"
     "@jridgewell/sourcemap-codec" "^1.4.10"
 
-"@mdn/browser-compat-data@4.1.12":
-  version "4.1.12"
-  resolved "https://registry.yarnpkg.com/@mdn/browser-compat-data/-/browser-compat-data-4.1.12.tgz#d266138c24295440619ea562ce3f4ec22600e897"
-  integrity sha512-y3Ntio6hb5+m6asxcA3nnIN6URjAFMji2EZZVYGd2Ag5On4mmvPhMnXdiIScCMXgHjFX+5qXuKaojLLhJHZPAg==
+"@mdn/browser-compat-data@5.1.2":
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/@mdn/browser-compat-data/-/browser-compat-data-5.1.2.tgz#f6d1c669f442208564b384e04ca8451e205645ff"
+  integrity sha512-X7lnoos6vF+llTjMDhP8HQJy2nL4RNf1LRejfNKOJLKrZ55A4p2z1WdhPY/NCieqiLH6gwlzDSVpmPYSPLd+bg==
 
 "@nicolo-ribaudo/chokidar-2@2.1.8-no-fsevents.3":
   version "2.1.8-no-fsevents.3"
@@ -1977,6 +1996,21 @@
     "@nodelib/fs.scandir" "2.1.5"
     fastq "^1.6.0"
 
+"@pnpm/network.ca-file@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@pnpm/network.ca-file/-/network.ca-file-1.0.1.tgz#16f88d057c68cd5419c1ef3dfa281296ea80b047"
+  integrity sha512-gkINruT2KUhZLTaiHxwCOh1O4NVnFT0wLjWFBHmTz9vpKag/C/noIMJXBxFe4F0mYpUVX2puLwAieLYFg2NvoA==
+  dependencies:
+    graceful-fs "4.2.10"
+
+"@pnpm/npm-conf@^1.0.4":
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/@pnpm/npm-conf/-/npm-conf-1.0.4.tgz#e2c927a933f55e9211e12ef6cc4885ce915211ce"
+  integrity sha512-o5YFq/+ksEJMbSzzkaQDHlp00aonLDU5xNPVTRL12hTWBbVSSeWXxPukq75h+mvXnoOWT95vV2u1HSTw2C4XOw==
+  dependencies:
+    "@pnpm/network.ca-file" "^1.0.1"
+    config-chain "^1.1.11"
+
 "@primer/behaviors@1.1.1":
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/@primer/behaviors/-/behaviors-1.1.1.tgz#51e2f02ebfe297c4c05f503cdc52ae8b4ce5794c"
@@ -2121,10 +2155,10 @@
   resolved "https://registry.yarnpkg.com/@sideway/pinpoint/-/pinpoint-2.0.0.tgz#cff8ffadc372ad29fd3f78277aeb29e632cc70df"
   integrity sha512-RNiOoTPkptFtSVzQevY/yWtZwf/RxyVnPy/OcA9HBM3MlGDnBEYL5B41H0MTn0Uec8Hi+2qUtTfG2WWZBmMejQ==
 
-"@sindresorhus/is@^0.14.0":
-  version "0.14.0"
-  resolved "https://registry.yarnpkg.com/@sindresorhus/is/-/is-0.14.0.tgz#9fb3a3cf3132328151f353de4632e01e52102bea"
-  integrity sha512-9NET910DNaIPngYnLLPeg+Ogzqsi9uM4mSboU5y6p8S5DzMTVEsJZrawi+BoDNUVBa2DhJqQYUFvMDfgU062LQ==
+"@sindresorhus/is@^4.6.0":
+  version "4.6.0"
+  resolved "https://registry.yarnpkg.com/@sindresorhus/is/-/is-4.6.0.tgz#3c7c9c46e678feefe7a2e5bb609d3dbd665ffb3f"
+  integrity sha512-t09vSN3MdfsyCHoFcTRCH/iUtG7OJ0CsjzB8cjAmKc/va/kIgeDI/TxsigdncE/4be734m0cvIYwNaV4i2XqAw==
 
 "@sinonjs/commons@^1.7.0":
   version "1.8.3"
@@ -2251,12 +2285,12 @@
     "@styled-system/core" "^5.1.2"
     "@styled-system/css" "^5.1.5"
 
-"@szmarczak/http-timer@^1.1.2":
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/@szmarczak/http-timer/-/http-timer-1.1.2.tgz#b1665e2c461a2cd92f4c1bbf50d5454de0d4b421"
-  integrity sha512-XIB2XbzHTN6ieIjfIMV9hlVcfPU26s2vafYWQcZHWXHOxiaRZYEDKEwdl129Zyg50+foYV2jCgtrqSA6qNuNSA==
+"@szmarczak/http-timer@^5.0.1":
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/@szmarczak/http-timer/-/http-timer-5.0.1.tgz#c7c1bf1141cdd4751b0399c8fc7b8b664cd5be3a"
+  integrity sha512-+PmQX0PiAYPMeVYe237LJAYvOMYW1j2rH5YROyS3b4CTVJum34HfRvKvAzozHAQG0TnHNdUfY9nCeUyRAs//cw==
   dependencies:
-    defer-to-connect "^1.0.1"
+    defer-to-connect "^2.0.1"
 
 "@testing-library/dom@^8.5.0":
   version "8.13.0"
@@ -2331,6 +2365,16 @@
   dependencies:
     "@babel/types" "^7.3.0"
 
+"@types/cacheable-request@^6.0.2":
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/@types/cacheable-request/-/cacheable-request-6.0.2.tgz#c324da0197de0a98a2312156536ae262429ff6b9"
+  integrity sha512-B3xVo+dlKM6nnKTcmm5ZtY/OL8bOAOd2Olee9M1zft65ox50OzjEHW91sDiU9j6cvW8Ejg1/Qkf4xd2kugApUA==
+  dependencies:
+    "@types/http-cache-semantics" "*"
+    "@types/keyv" "*"
+    "@types/node" "*"
+    "@types/responselike" "*"
+
 "@types/chrome@0.0.86":
   version "0.0.86"
   resolved "https://registry.yarnpkg.com/@types/chrome/-/chrome-0.0.86.tgz#1026ef8e76db4fde1859cae858d73236fe670d69"
@@ -2387,6 +2431,11 @@
     "@types/react" "*"
     hoist-non-react-statics "^3.3.0"
 
+"@types/http-cache-semantics@*":
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/@types/http-cache-semantics/-/http-cache-semantics-4.0.1.tgz#0ea7b61496902b95890dc4c3a116b60cb8dae812"
+  integrity sha512-SZs7ekbP8CN0txVG2xVRH6EgKmEm31BOxA07vkFaETzZz1xh+cbt8BcI0slpymvwhx5dlFnQG2rTlPVQn+iRPQ==
+
 "@types/ini@^1.3.31":
   version "1.3.31"
   resolved "https://registry.yarnpkg.com/@types/ini/-/ini-1.3.31.tgz#c78541a187bd88d5c73e990711c9d85214800d1b"
@@ -2436,15 +2485,27 @@
   resolved "https://registry.yarnpkg.com/@types/js-cookie/-/js-cookie-2.2.7.tgz#226a9e31680835a6188e887f3988e60c04d3f6a3"
   integrity sha512-aLkWa0C0vO5b4Sr798E26QgOkss68Un0bLjs7u9qxzPT5CG+8DuNTffWES58YzJs3hrVAOs1wonycqEBqNJubA==
 
+"@types/json-buffer@~3.0.0":
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/@types/json-buffer/-/json-buffer-3.0.0.tgz#85c1ff0f0948fc159810d4b5be35bf8c20875f64"
+  integrity sha512-3YP80IxxFJB4b5tYC2SUPwkg0XQLiu0nWvhRgEatgjf+29IcWO9X1k8xRv5DGssJ/lCrjYTjQPcobJr2yWIVuQ==
+
 "@types/json-schema@^7.0.4", "@types/json-schema@^7.0.5", "@types/json-schema@^7.0.9":
   version "7.0.11"
   resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.11.tgz#d421b6c527a3037f7c84433fd2c4229e016863d3"
   integrity sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ==
 
-"@types/minimatch@^3.0.3":
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/@types/minimatch/-/minimatch-3.0.3.tgz#3dca0e3f33b200fc7d1139c0cd96c1268cadfd9d"
-  integrity sha512-tHq6qdbT9U1IRSGf14CL0pUlULksvY9OZ+5eEgl1N7t+OA3tGvNpxJCzuKQlsNgCVwbAs670L1vcVQi8j9HjnA==
+"@types/keyv@*":
+  version "3.1.4"
+  resolved "https://registry.yarnpkg.com/@types/keyv/-/keyv-3.1.4.tgz#3ccdb1c6751b0c7e52300bcdacd5bcbf8faa75b6"
+  integrity sha512-BQ5aZNSCpj7D6K2ksrRCTmKRLEpnPvWDiLPfoGyhZ++8YtiK9d/3DBKPJgry359X/P1PfruyYwvnvwFjuEiEIg==
+  dependencies:
+    "@types/node" "*"
+
+"@types/minimatch@^3.0.5":
+  version "3.0.5"
+  resolved "https://registry.yarnpkg.com/@types/minimatch/-/minimatch-3.0.5.tgz#1001cc5e6a3704b83c236027e77f2f58ea010f40"
+  integrity sha512-Klz949h02Gz2uZCMGwDUSDS1YBlTdDDgbWHi+81l29tQALUtvz4rAYi5uoVhE5Lagoq6DeqAUlbrHvW/mXDgdQ==
 
 "@types/node@*":
   version "12.12.5"
@@ -2506,6 +2567,13 @@
     "@types/scheduler" "*"
     csstype "^3.0.2"
 
+"@types/responselike@*", "@types/responselike@^1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@types/responselike/-/responselike-1.0.0.tgz#251f4fe7d154d2bad125abe1b429b23afd262e29"
+  integrity sha512-85Y2BjiufFzaMIlvJDvTTB8Fxl2xfLo4HgmHzVBz08w4wDePCTjYw66PdrolO0kzli3yam/YCgRufyo1DdQVTA==
+  dependencies:
+    "@types/node" "*"
+
 "@types/scheduler@*":
   version "0.16.2"
   resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.2.tgz#1a62f89525723dde24ba1b01b092bf5df8ad4d39"
@@ -2572,10 +2640,10 @@
   dependencies:
     "@types/yargs-parser" "*"
 
-"@types/yauzl@2.9.2":
-  version "2.9.2"
-  resolved "https://registry.yarnpkg.com/@types/yauzl/-/yauzl-2.9.2.tgz#c48e5d56aff1444409e39fa164b0b4d4552a7b7a"
-  integrity sha512-8uALY5LTvSuHgloDVUvWP3pIauILm+8/0pDMokuDYIoNsOkSwd5AiHBTSEJjKTDcZr5z8UpgOWZkxBF4iJftoA==
+"@types/yauzl@2.10.0":
+  version "2.10.0"
+  resolved "https://registry.yarnpkg.com/@types/yauzl/-/yauzl-2.10.0.tgz#b3248295276cf8c6f153ebe6a9aba0c988cb2599"
+  integrity sha512-Cn6WYCm0tXv8p6k+A8PvbDG763EDpBoTzHdA+Q/MF6H3sapGjCm9NzoaJncJS9tUKSuCoDs9XHxYYsQDgxR6kw==
   dependencies:
     "@types/node" "*"
 
@@ -2837,6 +2905,13 @@ abbrev@1:
   resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.1.1.tgz#f8f2c887ad10bf67f634f005b6987fed3179aac8"
   integrity sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==
 
+abort-controller@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/abort-controller/-/abort-controller-3.0.0.tgz#eaf54d53b62bae4138e809ca225c8439a6efb392"
+  integrity sha512-h8lQ8tacZYnR3vNQTgibj+tODHI5/+l06Au2Pcriv/Gmet0eaj4TwWH41sO9wnHDiQsEj19q0drzdWdeAHtweg==
+  dependencies:
+    event-target-shim "^5.0.0"
+
 accepts@~1.3.7:
   version "1.3.7"
   resolved "https://registry.yarnpkg.com/accepts/-/accepts-1.3.7.tgz#531bc726517a3b2b41f850021c6cc15eaab507cd"
@@ -2853,7 +2928,7 @@ acorn-globals@^6.0.0:
     acorn "^7.1.1"
     acorn-walk "^7.1.1"
 
-acorn-jsx@^5.3.1, acorn-jsx@^5.3.2:
+acorn-jsx@^5.3.2:
   version "5.3.2"
   resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-5.3.2.tgz#7ed5bb55908b3b2f1bc55c6af1653bada7f07937"
   integrity sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==
@@ -2883,51 +2958,46 @@ acorn@^8.2.4:
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.4.1.tgz#56c36251fc7cabc7096adc18f05afe814321a28c"
   integrity sha512-asabaBSkEKosYKMITunzX177CXxQ4Q8BSSzMTKD+FefUhipQC70gfW5SiUDhYQ3vk8G+81HqQk7Fv9OXwwn9KA==
 
-acorn@^8.7.0:
-  version "8.7.0"
-  resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.7.0.tgz#90951fde0f8f09df93549481e5fc141445b791cf"
-  integrity sha512-V/LGr1APy+PXIwKebEWrkZPwoeoF+w1jiOBUmuxuiUIaOHtob8Qc9BTrYo7VuI5fR8tqsy+buA2WFooR5olqvQ==
-
 acorn@^8.7.1:
   version "8.7.1"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.7.1.tgz#0197122c843d1bf6d0a5e83220a788f278f63c30"
   integrity sha512-Xx54uLJQZ19lKygFXOWsscKUbsBZW0CPykPhVQdhIeIwrbPmJzqeASDInc8nKBnp/JT6igTs82qPXz069H8I/A==
 
-addons-linter@4.14.0:
-  version "4.14.0"
-  resolved "https://registry.yarnpkg.com/addons-linter/-/addons-linter-4.14.0.tgz#e8a5b99665a7e7df3fda2da42d73593fea8db3f9"
-  integrity sha512-TH3/PMS4Dd0Jf3kXW7DLXseHZcD7ZbnfnQAztkrP4YC0HQKQVZJ+lGOuDOGUtVQDMwC/eEdvHvZoRnHDer5qkg==
+addons-linter@5.10.0:
+  version "5.10.0"
+  resolved "https://registry.yarnpkg.com/addons-linter/-/addons-linter-5.10.0.tgz#2184feab680ea250307ebb98d90fd3cfee97009a"
+  integrity sha512-RiW9A0Z5HOzghN+BxmModDZ1V6B+1NFWZ+aU/vXefUtrNrJF6oWUnmeCLl1QzDaRcYVGDNDX9DheLfb23/Dzdg==
   dependencies:
-    "@mdn/browser-compat-data" "4.1.12"
+    "@mdn/browser-compat-data" "5.1.2"
     addons-moz-compare "1.2.0"
-    addons-scanner-utils "6.3.0"
-    ajv "6.12.6"
-    ajv-merge-patch "4.1.0"
+    addons-scanner-utils "7.1.0"
+    ajv "8.11.0"
+    ajv-merge-patch "5.0.1"
     chalk "4.1.2"
-    cheerio "1.0.0-rc.10"
+    cheerio "1.0.0-rc.12"
     columnify "1.6.0"
     common-tags "1.8.2"
     deepmerge "4.2.2"
-    eslint "8.11.0"
+    eslint "8.18.0"
     eslint-plugin-no-unsanitized "4.0.1"
     eslint-visitor-keys "3.3.0"
-    espree "9.3.1"
+    espree "9.3.2"
     esprima "4.0.1"
     fluent-syntax "0.13.0"
-    glob "7.2.0"
+    glob "8.0.3"
     image-size "1.0.1"
     is-mergeable-object "1.1.1"
     jed "1.1.1"
     os-locale "5.0.0"
-    pino "7.9.1"
-    postcss "8.4.12"
+    pino "8.1.0"
+    postcss "8.4.14"
     relaxed-json "1.0.3"
-    semver "7.3.5"
+    semver "7.3.7"
     sha.js "2.4.11"
     source-map-support "0.5.21"
     tosource "1.0.0"
     upath "2.0.1"
-    yargs "17.4.0"
+    yargs "17.5.1"
     yauzl "2.10.0"
 
 addons-moz-compare@1.2.0:
@@ -2935,12 +3005,12 @@ addons-moz-compare@1.2.0:
   resolved "https://registry.yarnpkg.com/addons-moz-compare/-/addons-moz-compare-1.2.0.tgz#d6246cbae224ab629cb7da397b2b9602938ea085"
   integrity sha512-COG8qk2/dubPqabfcoJW4E7pm2EQDI43iMrHnhlobvq/uRMEzx/PYJ1KaUZ97Vgg44R3QdRG5CvDsTRbMUHcDw==
 
-addons-scanner-utils@6.3.0:
-  version "6.3.0"
-  resolved "https://registry.yarnpkg.com/addons-scanner-utils/-/addons-scanner-utils-6.3.0.tgz#99596585a1e5d50f543e4f765cb3549bcf9d48db"
-  integrity sha512-sD4U7TX/NFDUYVheydrcpHH9xG3E0eVBFDn1RuUkGpqRyay3SsOU75Pl2lWAbCmeE0Mh9inU1Fwl7Mm1VRWkZw==
+addons-scanner-utils@7.1.0:
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/addons-scanner-utils/-/addons-scanner-utils-7.1.0.tgz#cd51b706c4513207aa3cd56c09650feeff5438f3"
+  integrity sha512-I6uQtJg3sbNtbGOsR2GmTtegCegYTXFRTnnvukEcX0jWidI4enyENyCV1MNkoLSw5xbgKIM/bFuSm4IPFlDYrg==
   dependencies:
-    "@types/yauzl" "2.9.2"
+    "@types/yauzl" "2.10.0"
     common-tags "1.8.2"
     first-chunk-stream "3.0.0"
     strip-bom-stream "4.0.0"
@@ -2982,22 +3052,22 @@ ajv-keywords@^3.5.2:
   resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-3.5.2.tgz#31f29da5ab6e00d1c2d329acf7b5929614d5014d"
   integrity sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==
 
-ajv-merge-patch@4.1.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/ajv-merge-patch/-/ajv-merge-patch-4.1.0.tgz#cd580e5860ac53431d6aa901fa3d5e2eb2b74a6c"
-  integrity sha512-0mAYXMSauA8RZ7r+B4+EAOYcZEcO9OK5EiQCR7W7Cv4E44pJj56ZnkKLJ9/PAcOc0dT+LlV9fdDcq2TxVJfOYw==
+ajv-merge-patch@5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/ajv-merge-patch/-/ajv-merge-patch-5.0.1.tgz#0aba921a2ea8632813478aa3d039d8134b58f876"
+  integrity sha512-0UP3aJCzfzBOkmLR+EinJDCfg6DNtprj3bVPo7JJNgUpZMKt097t9xxQOWFGRoB4JvKKIHE2qe0HkVaS/HyrjQ==
   dependencies:
     fast-json-patch "^2.0.6"
-    json-merge-patch "^0.2.3"
+    json-merge-patch "^1.0.2"
 
-ajv@6.12.6, ajv@^6.10.0, ajv@^6.12.2, ajv@^6.12.3, ajv@^6.12.4:
-  version "6.12.6"
-  resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.12.6.tgz#baf5a62e802b07d977034586f8c3baf5adf26df4"
-  integrity sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==
+ajv@8.11.0:
+  version "8.11.0"
+  resolved "https://registry.yarnpkg.com/ajv/-/ajv-8.11.0.tgz#977e91dd96ca669f54a11e23e378e33b884a565f"
+  integrity sha512-wGgprdCvMalC0BztXvitD2hC04YffAvtsUn93JbGXYLAtCUO4xd17mCCZQxUOItiBwZvJScWo8NIvQMQ71rdpg==
   dependencies:
     fast-deep-equal "^3.1.1"
-    fast-json-stable-stringify "^2.0.0"
-    json-schema-traverse "^0.4.1"
+    json-schema-traverse "^1.0.0"
+    require-from-string "^2.0.2"
     uri-js "^4.2.2"
 
 ajv@^6.1.0, ajv@^6.10.2:
@@ -3010,12 +3080,22 @@ ajv@^6.1.0, ajv@^6.10.2:
     json-schema-traverse "^0.4.1"
     uri-js "^4.2.2"
 
-ansi-align@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/ansi-align/-/ansi-align-3.0.0.tgz#b536b371cf687caaef236c18d3e21fe3797467cb"
-  integrity sha512-ZpClVKqXN3RGBmKibdfWzqCY4lnjEuoNzU5T0oEFpfd/z5qJHVarukridD4juLO2FXMiwUQxr9WqQtaYa8XRYw==
+ajv@^6.10.0, ajv@^6.12.2, ajv@^6.12.3, ajv@^6.12.4:
+  version "6.12.6"
+  resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.12.6.tgz#baf5a62e802b07d977034586f8c3baf5adf26df4"
+  integrity sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==
   dependencies:
-    string-width "^3.0.0"
+    fast-deep-equal "^3.1.1"
+    fast-json-stable-stringify "^2.0.0"
+    json-schema-traverse "^0.4.1"
+    uri-js "^4.2.2"
+
+ansi-align@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/ansi-align/-/ansi-align-3.0.1.tgz#0cdf12e111ace773a86e9a1fad1225c43cb19a59"
+  integrity sha512-IOfwwBF5iczOjp/WeY4YxyjqAFMQoZufdQWDd19SEExbVLNXqvpzSJ/M7Za4/sCPmQ0+GRquoA7bGcINcxew6w==
+  dependencies:
+    string-width "^4.1.0"
 
 ansi-colors@^3.0.0:
   version "3.2.4"
@@ -3084,7 +3164,7 @@ ansi-styles@^5.0.0:
   resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-5.2.0.tgz#07449690ad45777d1924ac2abb2fc8895dba836b"
   integrity sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==
 
-ansi-styles@^6.0.0:
+ansi-styles@^6.0.0, ansi-styles@^6.1.0:
   version "6.1.0"
   resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-6.1.0.tgz#87313c102b8118abd57371afab34618bf7350ed3"
   integrity sha512-VbqNsoz55SYGczauuup0MFUyXNQviSpFTj1RQtFzmQLk18qbVSpTFFGMT293rmDaQuKCT6InmbuEyUne4mTuxQ==
@@ -3163,10 +3243,10 @@ arr-union@^3.1.0:
   resolved "https://registry.yarnpkg.com/arr-union/-/arr-union-3.1.0.tgz#e39b09aea9def866a8f206e288af63919bae39c4"
   integrity sha1-45sJrqne+Gao8gbiiK9jkZuuOcQ=
 
-array-differ@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/array-differ/-/array-differ-3.0.0.tgz#3cbb3d0f316810eafcc47624734237d6aee4ae6b"
-  integrity sha512-THtfYS6KtME/yIAhKjZ2ul7XI96lQGHRputJQHO80LAWQnuGP4iCIN8vdMRboGbIEYBwU33q8Tch1os2+X0kMg==
+array-differ@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/array-differ/-/array-differ-4.0.0.tgz#aa3c891c653523290c880022f45b06a42051b026"
+  integrity sha512-Q6VPTLMsmXZ47ENG3V+wQyZS1ZxXMxFyYzA+Z/GMrJ6yIutAIEf9wTyroTzmGjNfox9/h3GdGBCVh43GVFx4Uw==
 
 array-flatten@1.1.1:
   version "1.1.1"
@@ -3196,6 +3276,11 @@ array-union@^2.1.0:
   resolved "https://registry.yarnpkg.com/array-union/-/array-union-2.1.0.tgz#b798420adbeb1de828d84acd8a2e23d3efe85e8d"
   integrity sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==
 
+array-union@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/array-union/-/array-union-3.0.1.tgz#da52630d327f8b88cfbfb57728e2af5cd9b6b975"
+  integrity sha512-1OvF9IbWwaeiM9VhzYXVQacMibxpXOMYVNIvMtKRyX9SImBXpKcFr8XvFDeEslCyuH/t6KRt7HEO94AlP8Iatw==
+
 array-uniq@^1.0.1:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/array-uniq/-/array-uniq-1.0.3.tgz#af6ac877a25cc7f74e058894753858dfdb24fdb6"
@@ -3216,11 +3301,6 @@ array.prototype.flatmap@^1.2.5:
     es-abstract "^1.19.2"
     es-shim-unscopables "^1.0.0"
 
-arrify@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/arrify/-/arrify-2.0.1.tgz#c9655e9331e0abcd588d2a7cad7e9956f66701fa"
-  integrity sha512-3duEwti880xqi4eAMN8AyR4a0ByT90zoYdLlevfrvU43vb0YZwZVfxOgxWrLXXXpyugL0hNZc9G6BiB5B3nUug==
-
 asn1.js@^4.0.0:
   version "4.10.1"
   resolved "https://registry.yarnpkg.com/asn1.js/-/asn1.js-4.10.1.tgz#b9c2bf5805f1e64aadeed6df3a2bfafb5a73f5a0"
@@ -3275,11 +3355,6 @@ async@^3.2.0:
   resolved "https://registry.yarnpkg.com/async/-/async-3.2.3.tgz#ac53dafd3f4720ee9e8a160628f18ea91df196c9"
   integrity sha512-spZRyzKL5l5BZQrr/6m/SqFdBN0q3OCI0f9rjfBzCMBIP4p75P620rR3gTmaksNOhmzgdxcaxdNfMy6anrbM0g==
 
-async@~0.2.9:
-  version "0.2.10"
-  resolved "https://registry.yarnpkg.com/async/-/async-0.2.10.tgz#b6bbe0b0674b9d719708ca38de8c237cb526c3d1"
-  integrity sha1-trvgsGdLnXGXCMo43owjfLUmw9E=
-
 asynckit@^0.4.0:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
@@ -3587,10 +3662,10 @@ bluebird@^3.5.5:
   resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.5.5.tgz#a8d0afd73251effbbd5fe384a77d73003c17a71f"
   integrity sha512-5am6HnnfN+urzt4yfg7IgTbotDjIT/u8AJpEt0sIU9FtXfVeezXAPKswrG+xKUCOYAINpSdgZVDU6QFh+cuH3w==
 
-bluebird@~2.9.24:
-  version "2.9.34"
-  resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-2.9.34.tgz#2f7b4ec80216328a9fddebdf69c8d4942feff7d8"
-  integrity sha1-L3tOyAIWMoqf3evfacjUlC/v99g=
+bluebird@~3.7:
+  version "3.7.2"
+  resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.7.2.tgz#9f229c15be272454ffa973ace0dbee79a1b0c36f"
+  integrity sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==
 
 bn.js@^4.0.0, bn.js@^4.1.0, bn.js@^4.1.1, bn.js@^4.11.9:
   version "4.12.0"
@@ -3618,19 +3693,19 @@ boolbase@^1.0.0:
   resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
   integrity sha1-aN/1++YMUes3cl6p4+0xDcwed24=
 
-boxen@^5.0.0:
-  version "5.1.2"
-  resolved "https://registry.yarnpkg.com/boxen/-/boxen-5.1.2.tgz#788cb686fc83c1f486dfa8a40c68fc2b831d2b50"
-  integrity sha512-9gYgQKXx+1nP8mP7CzFyaUARhg7D3n1dF/FnErWmu9l6JvGpNUN278h0aSb+QjoiKSWG+iZ3uHrcqk0qrY9RQQ==
+boxen@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/boxen/-/boxen-7.0.0.tgz#9e5f8c26e716793fc96edcf7cf754cdf5e3fbf32"
+  integrity sha512-j//dBVuyacJbvW+tvZ9HuH03fZ46QcaKvvhZickZqtB271DxJ7SNRSNxrV/dZX0085m7hISRZWbzWlJvx/rHSg==
   dependencies:
-    ansi-align "^3.0.0"
-    camelcase "^6.2.0"
-    chalk "^4.1.0"
-    cli-boxes "^2.2.1"
-    string-width "^4.2.2"
-    type-fest "^0.20.2"
-    widest-line "^3.1.0"
-    wrap-ansi "^7.0.0"
+    ansi-align "^3.0.1"
+    camelcase "^7.0.0"
+    chalk "^5.0.1"
+    cli-boxes "^3.0.0"
+    string-width "^5.1.2"
+    type-fest "^2.13.0"
+    widest-line "^4.0.1"
+    wrap-ansi "^8.0.1"
 
 brace-expansion@^1.1.7:
   version "1.1.11"
@@ -3640,6 +3715,13 @@ brace-expansion@^1.1.7:
     balanced-match "^1.0.0"
     concat-map "0.0.1"
 
+brace-expansion@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-2.0.1.tgz#1edc459e0f0c548486ecf9fc99f2221364b9a0ae"
+  integrity sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==
+  dependencies:
+    balanced-match "^1.0.0"
+
 braces@^2.3.1, braces@^2.3.2:
   version "2.3.2"
   resolved "https://registry.yarnpkg.com/braces/-/braces-2.3.2.tgz#5979fd3f14cd531565e5fa2df1abfff1dfaee729"
@@ -3863,18 +3945,23 @@ cache-base@^1.0.1:
     union-value "^1.0.0"
     unset-value "^1.0.0"
 
-cacheable-request@^6.0.0:
-  version "6.1.0"
-  resolved "https://registry.yarnpkg.com/cacheable-request/-/cacheable-request-6.1.0.tgz#20ffb8bd162ba4be11e9567d823db651052ca912"
-  integrity sha512-Oj3cAGPCqOZX7Rz64Uny2GYAZNliQSqfbePrgAQ1wKAihYmCUnraBtJtKcGR4xz7wF+LoJC+ssFZvv5BgF9Igg==
+cacheable-lookup@^6.0.4:
+  version "6.0.4"
+  resolved "https://registry.yarnpkg.com/cacheable-lookup/-/cacheable-lookup-6.0.4.tgz#65c0e51721bb7f9f2cb513aed6da4a1b93ad7dc8"
+  integrity sha512-mbcDEZCkv2CZF4G01kr8eBd/5agkt9oCqz75tJMSIsquvRZ2sL6Hi5zGVKi/0OSC9oO1GHfJ2AV0ZIOY9vye0A==
+
+cacheable-request@^7.0.2:
+  version "7.0.2"
+  resolved "https://registry.yarnpkg.com/cacheable-request/-/cacheable-request-7.0.2.tgz#ea0d0b889364a25854757301ca12b2da77f91d27"
+  integrity sha512-pouW8/FmiPQbuGpkXQ9BAPv/Mo5xDGANgSNXzTzJ8DrKGuXOssM4wIQRjfanNRh3Yu5cfYPvcorqbhg2KIJtew==
   dependencies:
     clone-response "^1.0.2"
     get-stream "^5.1.0"
     http-cache-semantics "^4.0.0"
-    keyv "^3.0.0"
+    keyv "^4.0.0"
     lowercase-keys "^2.0.0"
-    normalize-url "^4.1.0"
-    responselike "^1.0.2"
+    normalize-url "^6.0.1"
+    responselike "^2.0.0"
 
 call-bind@^1.0.0, call-bind@^1.0.2:
   version "1.0.2"
@@ -3889,16 +3976,21 @@ callsites@^3.0.0:
   resolved "https://registry.yarnpkg.com/callsites/-/callsites-3.1.0.tgz#b3630abd8943432f54b3f0519238e33cd7df2f73"
   integrity sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==
 
-camelcase@6.2.0, camelcase@^6.2.0:
-  version "6.2.0"
-  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-6.2.0.tgz#924af881c9d525ac9d87f40d964e5cea982a1809"
-  integrity sha512-c7wVvbw3f37nuobQNtgsgG9POC9qMbNuMQmTCqZv23b6MIz0fcYpBiOlv9gEN/hdLdnZTDQhg6e9Dq5M1vKvfg==
+camelcase@7.0.0, camelcase@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-7.0.0.tgz#fd112621b212126741f998d614cbc2a8623fd174"
+  integrity sha512-JToIvOmz6nhGsUhAYScbo2d6Py5wojjNfoxoc2mEVLUdJ70gJK2gnd+ABY1Tc3sVMyK7QDPtN0T/XdlCQWITyQ==
 
 camelcase@^5.0.0, camelcase@^5.2.0, camelcase@^5.3.1:
   version "5.3.1"
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-5.3.1.tgz#e3c9b31569e106811df242f715725a1f4c494320"
   integrity sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==
 
+camelcase@^6.2.0:
+  version "6.2.0"
+  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-6.2.0.tgz#924af881c9d525ac9d87f40d964e5cea982a1809"
+  integrity sha512-c7wVvbw3f37nuobQNtgsgG9POC9qMbNuMQmTCqZv23b6MIz0fcYpBiOlv9gEN/hdLdnZTDQhg6e9Dq5M1vKvfg==
+
 camelize@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/camelize/-/camelize-1.0.0.tgz#164a5483e630fa4321e5af07020e531831b2609b"
@@ -3942,6 +4034,11 @@ chalk@^1.1.3:
     strip-ansi "^3.0.0"
     supports-color "^2.0.0"
 
+chalk@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-5.0.1.tgz#ca57d71e82bb534a296df63bbacc4a1c22b2a4b6"
+  integrity sha512-Fo07WOYGqMfCWHOzSXOt2CxDbC6skS/jO9ynEcmpANMoPrD+W1r1K6Vx7iNm+AQmETU1Xr2t+n8nzkV9t6xh3w==
+
 char-regex@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/char-regex/-/char-regex-1.0.2.tgz#d744358226217f981ed58f479b1d6bcc29545dcf"
@@ -3952,29 +4049,30 @@ check-types@^8.0.3:
   resolved "https://registry.yarnpkg.com/check-types/-/check-types-8.0.3.tgz#3356cca19c889544f2d7a95ed49ce508a0ecf552"
   integrity sha512-YpeKZngUmG65rLudJ4taU7VLkOCTMhNl/u4ctNC56LQS/zJTyNH0Lrtwm1tfTsbLlwvlfsA2d1c8vCf/Kh2KwQ==
 
-cheerio-select@^1.5.0:
-  version "1.6.0"
-  resolved "https://registry.yarnpkg.com/cheerio-select/-/cheerio-select-1.6.0.tgz#489f36604112c722afa147dedd0d4609c09e1696"
-  integrity sha512-eq0GdBvxVFbqWgmCm7M3XGs1I8oLy/nExUnh6oLqmBditPO9AqQJrkslDpMun/hZ0yyTs8L0m85OHp4ho6Qm9g==
+cheerio-select@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/cheerio-select/-/cheerio-select-2.1.0.tgz#4d8673286b8126ca2a8e42740d5e3c4884ae21b4"
+  integrity sha512-9v9kG0LvzrlcungtnJtpGNxY+fzECQKhK4EGJX2vByejiMX84MFNQw4UxPJl3bFbTMw+Dfs37XaIkCwTZfLh4g==
   dependencies:
-    css-select "^4.3.0"
-    css-what "^6.0.1"
-    domelementtype "^2.2.0"
-    domhandler "^4.3.1"
-    domutils "^2.8.0"
+    boolbase "^1.0.0"
+    css-select "^5.1.0"
+    css-what "^6.1.0"
+    domelementtype "^2.3.0"
+    domhandler "^5.0.3"
+    domutils "^3.0.1"
 
-cheerio@1.0.0-rc.10:
-  version "1.0.0-rc.10"
-  resolved "https://registry.yarnpkg.com/cheerio/-/cheerio-1.0.0-rc.10.tgz#2ba3dcdfcc26e7956fc1f440e61d51c643379f3e"
-  integrity sha512-g0J0q/O6mW8z5zxQ3A8E8J1hUgp4SMOvEoW/x84OwyHKe/Zccz83PVT4y5Crcr530FV6NgmKI1qvGTKVl9XXVw==
+cheerio@1.0.0-rc.12:
+  version "1.0.0-rc.12"
+  resolved "https://registry.yarnpkg.com/cheerio/-/cheerio-1.0.0-rc.12.tgz#788bf7466506b1c6bf5fae51d24a2c4d62e47683"
+  integrity sha512-VqR8m68vM46BNnuZ5NtnGBKIE/DfN0cRIzg9n40EIq9NOv90ayxLBXA8fXC5gquFRGJSTRqBq25Jt2ECLR431Q==
   dependencies:
-    cheerio-select "^1.5.0"
-    dom-serializer "^1.3.2"
-    domhandler "^4.2.0"
-    htmlparser2 "^6.1.0"
-    parse5 "^6.0.1"
-    parse5-htmlparser2-tree-adapter "^6.0.1"
-    tslib "^2.2.0"
+    cheerio-select "^2.1.0"
+    dom-serializer "^2.0.0"
+    domhandler "^5.0.3"
+    domutils "^3.0.1"
+    htmlparser2 "^8.0.1"
+    parse5 "^7.0.0"
+    parse5-htmlparser2-tree-adapter "^7.0.0"
 
 "chokidar@>=2.0.0 <4.0.0":
   version "3.3.1"
@@ -4030,10 +4128,10 @@ chownr@^1.1.1, chownr@^1.1.4:
   resolved "https://registry.yarnpkg.com/chownr/-/chownr-1.1.4.tgz#6fc9d7b42d32a583596337666e7d08084da2cc6b"
   integrity sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==
 
-chrome-launcher@0.15.0:
-  version "0.15.0"
-  resolved "https://registry.yarnpkg.com/chrome-launcher/-/chrome-launcher-0.15.0.tgz#5144a57aba0cf2f4cbe61dccefdde024fb3ca7fc"
-  integrity sha512-ZQqX5kb9H0+jy1OqLnWampfocrtSZaGl7Ny3F9GRha85o4odbL8x55paUzh51UC7cEmZ5obp3H2Mm70uC2PpRA==
+chrome-launcher@0.15.1:
+  version "0.15.1"
+  resolved "https://registry.yarnpkg.com/chrome-launcher/-/chrome-launcher-0.15.1.tgz#0a0208037063641e2b3613b7e42b0fcb3fa2d399"
+  integrity sha512-UugC8u59/w2AyX5sHLZUHoxBAiSiunUhZa3zZwMH6zPVis0C3dDKiRWyUGIo14tTbZHGVviWxv3PQWZ7taZ4fg==
   dependencies:
     "@types/node" "*"
     escape-string-regexp "^4.0.0"
@@ -4047,11 +4145,6 @@ chrome-trace-event@^1.0.2:
   dependencies:
     tslib "^1.9.0"
 
-ci-info@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-2.0.0.tgz#67a9e964be31a51e15e5010d58e6f12834002f46"
-  integrity sha512-5tK7EtrZ0N+OLFMthtqOj4fI2Jeb88C4CAZPu25LDVUgXJ0A3Js4PMGqrn0JU1W0Mh1/Z8wZzYPxqUrXeBboCQ==
-
 ci-info@^3.1.1:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-3.2.0.tgz#2876cb948a498797b5236f0095bc057d0dca38b6"
@@ -4095,10 +4188,10 @@ clean-stack@^2.0.0:
   resolved "https://registry.yarnpkg.com/clean-stack/-/clean-stack-2.2.0.tgz#ee8472dbb129e727b31e8a10a427dee9dfe4008b"
   integrity sha512-4diC9HaTE+KRAMWhDhrGOECgWZxoevMc5TlkObMqNSsVU62PYzXZ/SMTjzyGAFF1YusgxGcSWTEXBhp0CPwQ1A==
 
-cli-boxes@^2.2.1:
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/cli-boxes/-/cli-boxes-2.2.1.tgz#ddd5035d25094fce220e9cab40a45840a440318f"
-  integrity sha512-y4coMcylgSCdVinjiDBuR8PCC2bLjyGTwEmPb9NHR/QaNU6EUOXcTY/s6VjGMD6ENSEaeQYHCY0GNGS5jfMwPw==
+cli-boxes@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/cli-boxes/-/cli-boxes-3.0.0.tgz#71a10c716feeba005e4504f36329ef0b17cf3145"
+  integrity sha512-/lzGpEWL/8PfI0BmBOPRwp0c/wFNX1RdUML3jK/RcSBA9T8mZDdQpqYBKtCFTOfQbwPqWEOpjqW+Fnayc0969g==
 
 cli-cursor@^3.1.0:
   version "3.1.0"
@@ -4252,7 +4345,7 @@ commander@2.9.0:
   dependencies:
     graceful-readlink ">= 1.0.0"
 
-commander@^2.18.0, commander@^2.3.0, commander@^2.6.0:
+commander@^2.18.0, commander@^2.6.0:
   version "2.20.3"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
   integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==
@@ -4272,7 +4365,7 @@ commander@^5.1.0:
   resolved "https://registry.yarnpkg.com/commander/-/commander-5.1.0.tgz#46abbd1652f8e059bddaef99bbdcb2ad9cf179ae"
   integrity sha512-P0CysNDQ7rtVw4QIQtm+MRxV66vKFSvlsQvGYXZWR3qFU0jlMKHZZZgw8e+8DSah4UDKMqnknRDQz+xuQXQ/Zg==
 
-commander@^9.3.0:
+commander@^9.1.0, commander@^9.3.0:
   version "9.4.0"
   resolved "https://registry.yarnpkg.com/commander/-/commander-9.4.0.tgz#bc4a40918fefe52e22450c111ecd6b7acce6f11c"
   integrity sha512-sRPT+umqkz90UA8M1yqYfnHlZA7fF6nSphDtxeywPZ49ysjxDQybzk13CL+mXekDRG92skbcqCLVovuCusNmFw==
@@ -4292,6 +4385,14 @@ component-emitter@^1.2.1:
   resolved "https://registry.yarnpkg.com/component-emitter/-/component-emitter-1.3.0.tgz#16e4070fba8ae29b679f2215853ee181ab2eabc0"
   integrity sha512-Rd3se6QB+sO1TwqZjscQrurpEPIfO0/yYnSin6Q/rD3mOutHvUrCAhJub3r90uNb+SESBuE0QYoB90YdfatsRg==
 
+compress-brotli@^1.3.8:
+  version "1.3.8"
+  resolved "https://registry.yarnpkg.com/compress-brotli/-/compress-brotli-1.3.8.tgz#0c0a60c97a989145314ec381e84e26682e7b38db"
+  integrity sha512-lVcQsjhxhIXsuupfy9fmZUFtAIdBmXA7EGY6GBdgZ++qkM9zG4YFT8iU7FoBxzryNDMOpD1HIFHUSX4D87oqhQ==
+  dependencies:
+    "@types/json-buffer" "~3.0.0"
+    json-buffer "~3.0.1"
+
 concat-map@0.0.1:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
@@ -4307,17 +4408,24 @@ concat-stream@^1.4.7, concat-stream@^1.5.0:
     readable-stream "^2.2.2"
     typedarray "^0.0.6"
 
-configstore@^5.0.1:
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/configstore/-/configstore-5.0.1.tgz#d365021b5df4b98cdd187d6a3b0e3f6a7cc5ed96"
-  integrity sha512-aMKprgk5YhBNyH25hj8wGt2+D52Sw1DRRIzqBwLp2Ya9mFmY8KPvvtvmna8SxVR9JMZ4kzMD68N22vlaRpkeFA==
+config-chain@^1.1.11:
+  version "1.1.13"
+  resolved "https://registry.yarnpkg.com/config-chain/-/config-chain-1.1.13.tgz#fad0795aa6a6cdaff9ed1b68e9dff94372c232f4"
+  integrity sha512-qj+f8APARXHrM0hraqXYb2/bOVSV4PvJQlNZ/DVj0QrmNM2q2euizkeuVckQ57J+W0mRH6Hvi+k50M4Jul2VRQ==
   dependencies:
-    dot-prop "^5.2.0"
-    graceful-fs "^4.1.2"
-    make-dir "^3.0.0"
-    unique-string "^2.0.0"
-    write-file-atomic "^3.0.0"
-    xdg-basedir "^4.0.0"
+    ini "^1.3.4"
+    proto-list "~1.2.1"
+
+configstore@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/configstore/-/configstore-6.0.0.tgz#49eca2ebc80983f77e09394a1a56e0aca8235566"
+  integrity sha512-cD31W1v3GqUlQvbBCGcXmd2Nj9SvLDOP1oQ0YFuLETufzSPaKp11rYBsSOm7rCsW3OnIRAFM3OxRhceaXNYHkA==
+  dependencies:
+    dot-prop "^6.0.1"
+    graceful-fs "^4.2.6"
+    unique-string "^3.0.0"
+    write-file-atomic "^3.0.3"
+    xdg-basedir "^5.0.1"
 
 console-browserify@^1.1.0:
   version "1.1.0"
@@ -4436,10 +4544,10 @@ core-js-compat@^3.20.2, core-js-compat@^3.21.0:
     browserslist "^4.20.2"
     semver "7.0.0"
 
-core-js@3.21.0:
-  version "3.21.0"
-  resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.21.0.tgz#f479dbfc3dffb035a0827602dd056839a774aa71"
-  integrity sha512-YUdI3fFu4TF/2WykQ2xzSiTQdldLB4KVuL9WeAy5XONZYt5Cun/fpQvctoKbCgvPhmzADeesTk/j2Rdx77AcKQ==
+core-js@3.22.8:
+  version "3.22.8"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.22.8.tgz#23f860b1fe60797cc4f704d76c93fea8a2f60631"
+  integrity sha512-UoGQ/cfzGYIuiq6Z7vWL1HfkE9U9IZ4Ub+0XSiJTCzvbZzgPA69oDF2f+lgJ6dFFLEdjW5O6svvoKzXX23xFkA==
 
 core-js@^2.4.0:
   version "2.6.10"
@@ -4530,10 +4638,12 @@ crypto-browserify@^3.11.0:
     randombytes "^2.0.0"
     randomfill "^1.0.3"
 
-crypto-random-string@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/crypto-random-string/-/crypto-random-string-2.0.0.tgz#ef2a7a966ec11083388369baa02ebead229b30d5"
-  integrity sha512-v1plID3y9r/lPhviJ1wrXpLeyUIGAZ2SHNYTEapm7/8A9nLPoyvVp3RK/EPFqn5kEznyWgYZNsRtYYIWbuG8KA==
+crypto-random-string@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/crypto-random-string/-/crypto-random-string-4.0.0.tgz#5a3cc53d7dd86183df5da0312816ceeeb5bb1fc2"
+  integrity sha512-x8dy3RnvYdlUcPOjkEHqozhiwzKNSq7GcPuXFbnyMOCHxX8V3OgIg/pYuabl2sbUPfIJaeAQB7PMOK8DFIdoRA==
+  dependencies:
+    type-fest "^1.0.1"
 
 css-color-keywords@^1.0.0:
   version "1.0.0"
@@ -4565,15 +4675,15 @@ css-loader@^2.1.0:
     postcss-value-parser "^3.3.0"
     schema-utils "^1.0.0"
 
-css-select@^4.3.0:
-  version "4.3.0"
-  resolved "https://registry.yarnpkg.com/css-select/-/css-select-4.3.0.tgz#db7129b2846662fd8628cfc496abb2b59e41529b"
-  integrity sha512-wPpOYtnsVontu2mODhA19JrqWxNsfdatRKd64kmpRbQgh1KtItko5sTnEpPdpSaJszTOhEMlF/RPz28qj4HqhQ==
+css-select@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/css-select/-/css-select-5.1.0.tgz#b8ebd6554c3637ccc76688804ad3f6a6fdaea8a6"
+  integrity sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg==
   dependencies:
     boolbase "^1.0.0"
-    css-what "^6.0.1"
-    domhandler "^4.3.1"
-    domutils "^2.8.0"
+    css-what "^6.1.0"
+    domhandler "^5.0.2"
+    domutils "^3.0.1"
     nth-check "^2.0.1"
 
 css-to-react-native@^3.0.0:
@@ -4593,10 +4703,10 @@ css-tree@^1.1.2:
     mdn-data "2.0.14"
     source-map "^0.6.1"
 
-css-what@^6.0.1:
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/css-what/-/css-what-6.0.1.tgz#3be33be55b9f302f710ba3a9c3abc1e2a63fc7eb"
-  integrity sha512-z93ZGFLNc6yaoXAmVhqoSIb+BduplteCt1fepvwhBUQK6MNE4g6fgjpuZKJKp0esUe+vXWlIkwZZjNWoOKw0ZA==
+css-what@^6.1.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/css-what/-/css-what-6.1.0.tgz#fb5effcf76f1ddea2c81bdfaa4de44e79bac70f4"
+  integrity sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==
 
 cssesc@^3.0.0:
   version "3.0.0"
@@ -4664,12 +4774,12 @@ date-now@^0.1.4:
   resolved "https://registry.yarnpkg.com/date-now/-/date-now-0.1.4.tgz#eaf439fd4d4848ad74e5cc7dbef200672b9e345b"
   integrity sha1-6vQ5/U1ISK105cx9vvIAZyueNFs=
 
-debounce@1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/debounce/-/debounce-1.2.0.tgz#44a540abc0ea9943018dc0eaa95cce87f65cd131"
-  integrity sha512-mYtLl1xfZLi1m4RtQYlZgJUNQjl4ZxVnHzIR8nLLgi4q1YT8o/WM+MK/f8yfcc9s5Ir5zRaPZyZU6xs1Syoocg==
+debounce@1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/debounce/-/debounce-1.2.1.tgz#38881d8f4166a5c5848020c11827b834bcb3e0a5"
+  integrity sha512-XRRe6Glud4rd/ZGQfiV1ruXSfbvfJedlV9Y6zOlP+2K04vBYiJEte6stfFkCP03aMnY5tsipamumUjL14fofug==
 
-debug@2.6.9, debug@^2.2.0, debug@^2.3.3, debug@^2.6.8, debug@~2.6.3:
+debug@2.6.9, debug@^2.2.0, debug@^2.3.3, debug@^2.6.8:
   version "2.6.9"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
   integrity sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==
@@ -4697,17 +4807,17 @@ debug@^3.2.6:
   dependencies:
     ms "^2.1.1"
 
-debug@^4.3.2, debug@^4.3.4:
+debug@^4.3.2, debug@^4.3.4, debug@~4.3.1:
   version "4.3.4"
   resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.4.tgz#1319f6579357f2338d3337d2cdd4914bb5dcc865"
   integrity sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==
   dependencies:
     ms "2.1.2"
 
-decamelize@5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-5.0.0.tgz#88358157b010ef133febfd27c18994bd80c6215b"
-  integrity sha512-U75DcT5hrio3KNtvdULAWnLiAPbFUC4191ldxMmj4FA/mRuBnmDwU0boNfPyFRhnan+Jm+haLeSn3P0afcBn4w==
+decamelize@6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-6.0.0.tgz#8cad4d916fde5c41a264a43d0ecc56fe3d31749e"
+  integrity sha512-Fv96DCsdOgB6mdGl67MT5JaTNKRzrzill5OH5s8bjYJXVlcXyPYGyPsUkWyGV5p1TXI5esYIYMMeDJL0hEIwaA==
 
 decamelize@^1.2.0:
   version "1.2.0"
@@ -4724,30 +4834,18 @@ decode-uri-component@^0.2.0:
   resolved "https://registry.yarnpkg.com/decode-uri-component/-/decode-uri-component-0.2.0.tgz#eb3913333458775cb84cd1a1fae062106bb87545"
   integrity sha1-6zkTMzRYd1y4TNGh+uBiEGu4dUU=
 
-decompress-response@^3.3.0:
-  version "3.3.0"
-  resolved "https://registry.yarnpkg.com/decompress-response/-/decompress-response-3.3.0.tgz#80a4dd323748384bfa248083622aedec982adff3"
-  integrity sha1-gKTdMjdIOEv6JICDYirt7Jgq3/M=
+decompress-response@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/decompress-response/-/decompress-response-6.0.0.tgz#ca387612ddb7e104bd16d85aab00d5ecf09c66fc"
+  integrity sha512-aW35yZM6Bb/4oJlZncMH2LCoZtJXTRxES17vE3hoRiowU2kWHaJKFkSBDnDR+cm9J+9QhXmREyIfv0pji9ejCQ==
   dependencies:
-    mimic-response "^1.0.0"
+    mimic-response "^3.1.0"
 
 dedent@^0.7.0:
   version "0.7.0"
   resolved "https://registry.yarnpkg.com/dedent/-/dedent-0.7.0.tgz#2495ddbaf6eb874abb0e1be9df22d2e5a544326c"
   integrity sha1-JJXduvbrh0q7Dhvp3yLS5aVEMmw=
 
-deep-equal@^1.0.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-1.1.0.tgz#3103cdf8ab6d32cf4a8df7865458f2b8d33f3745"
-  integrity sha512-ZbfWJq/wN1Z273o7mUSjILYqehAktR2NVoSrOukDkU9kg2v/Uv89yU4Cvz8seJeAmtN5oqiefKq8FPuXOboqLw==
-  dependencies:
-    is-arguments "^1.0.4"
-    is-date-object "^1.0.1"
-    is-regex "^1.0.4"
-    object-is "^1.0.1"
-    object-keys "^1.1.1"
-    regexp.prototype.flags "^1.2.0"
-
 deep-extend@^0.6.0:
   version "0.6.0"
   resolved "https://registry.yarnpkg.com/deep-extend/-/deep-extend-0.6.0.tgz#c4fa7c95404a17a9c3e8ca7e1537312b736330ac"
@@ -4782,10 +4880,15 @@ defaults@^1.0.3:
   dependencies:
     clone "^1.0.2"
 
-defer-to-connect@^1.0.1:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/defer-to-connect/-/defer-to-connect-1.1.0.tgz#b41bd7efa8508cef13f8456975f7a278c72833fd"
-  integrity sha512-WE2sZoctWm/v4smfCAdjYbrfS55JiMRdlY9ZubFhsYbteCK9+BvAx4YV7nPjYM6ZnX5BcoVKwfmyx9sIFTgQMQ==
+defer-to-connect@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/defer-to-connect/-/defer-to-connect-2.0.1.tgz#8016bdb4143e4632b77a3449c6236277de520587"
+  integrity sha512-4tvttepXG1VaYGrRibk5EwJd1t4udunSOVMdLSAL6mId1ix438oPwPZMALY41FCijukO1L0twNcGsdzS7dHgDg==
+
+define-lazy-prop@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/define-lazy-prop/-/define-lazy-prop-2.0.0.tgz#3f7ae421129bcaaac9bc74905c98a0009ec9ee7f"
+  integrity sha512-Ds09qNh8yw3khSjiJjiUInaGX9xlqZDY7JVryGxdxV7NPeuqQfplOpQ66yJFZut3jLa5zOwkXw1g9EI2uKh4Og==
 
 define-properties@^1.1.2:
   version "1.1.3"
@@ -4924,29 +5027,24 @@ dom-accessibility-api@^0.5.9:
   resolved "https://registry.yarnpkg.com/dom-accessibility-api/-/dom-accessibility-api-0.5.14.tgz#56082f71b1dc7aac69d83c4285eef39c15d93f56"
   integrity sha512-NMt+m9zFMPZe0JcY9gN224Qvk6qLIdqex29clBvc/y75ZBX9YA9wNK3frsYvu2DI1xcCIwxwnX+TlsJ2DSOADg==
 
-dom-serializer@^1.0.1, dom-serializer@^1.3.2:
-  version "1.3.2"
-  resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-1.3.2.tgz#6206437d32ceefaec7161803230c7a20bc1b4d91"
-  integrity sha512-5c54Bk5Dw4qAxNOI1pFEizPSjVsx5+bpJKmL2kPn8JhBUq2q09tTCa3mjijun2NfK78NMouDYNMBkOrPZiS+ig==
+dom-serializer@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-2.0.0.tgz#e41b802e1eedf9f6cae183ce5e622d789d7d8e53"
+  integrity sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==
   dependencies:
-    domelementtype "^2.0.1"
-    domhandler "^4.2.0"
-    entities "^2.0.0"
+    domelementtype "^2.3.0"
+    domhandler "^5.0.2"
+    entities "^4.2.0"
 
 domain-browser@^1.1.1:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/domain-browser/-/domain-browser-1.2.0.tgz#3d31f50191a6749dd1375a7f522e823d42e54eda"
   integrity sha512-jnjyiM6eRyZl2H+W8Q/zLMA481hzi0eszAaBUzIVnmYVDBbnLxVNnfu1HgEBvCbL+71FrxMl3E6lpKH7Ge3OXA==
 
-domelementtype@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-2.0.1.tgz#1f8bdfe91f5a78063274e803b4bdcedf6e94f94d"
-  integrity sha512-5HOHUDsYZWV8FGWN0Njbr/Rn7f/eWSQi1v7+HsUVwXgn8nWWlL64zKDkS0n8ZmQ3mlWOMuXOnR+7Nx/5tMO5AQ==
-
-domelementtype@^2.2.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-2.2.0.tgz#9a0b6c2782ed6a1c7323d42267183df9bd8b1d57"
-  integrity sha512-DtBMo82pv1dFtUmHyr48beiuq792Sxohr+8Hm9zoxklYPfa6n0Z3Byjj2IV7bmr2IyqClnqEQhfgHJJ5QF0R5A==
+domelementtype@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-2.3.0.tgz#5c45e8e869952626331d7aab326d01daf65d589d"
+  integrity sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==
 
 domexception@^2.0.1:
   version "2.0.1"
@@ -4955,26 +5053,26 @@ domexception@^2.0.1:
   dependencies:
     webidl-conversions "^5.0.0"
 
-domhandler@^4.0.0, domhandler@^4.2.0, domhandler@^4.3.1:
-  version "4.3.1"
-  resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-4.3.1.tgz#8d792033416f59d68bc03a5aa7b018c1ca89279c"
-  integrity sha512-GrwoxYN+uWlzO8uhUXRl0P+kHE4GtVPfYzVLcUxPL7KNdHKj66vvlhiweIHqYYXWlw+T8iLMp42Lm67ghw4WMQ==
+domhandler@^5.0.1, domhandler@^5.0.2, domhandler@^5.0.3:
+  version "5.0.3"
+  resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-5.0.3.tgz#cc385f7f751f1d1fc650c21374804254538c7d31"
+  integrity sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==
   dependencies:
-    domelementtype "^2.2.0"
+    domelementtype "^2.3.0"
 
-domutils@^2.5.2, domutils@^2.8.0:
-  version "2.8.0"
-  resolved "https://registry.yarnpkg.com/domutils/-/domutils-2.8.0.tgz#4437def5db6e2d1f5d6ee859bd95ca7d02048135"
-  integrity sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A==
+domutils@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/domutils/-/domutils-3.0.1.tgz#696b3875238338cb186b6c0612bd4901c89a4f1c"
+  integrity sha512-z08c1l761iKhDFtfXO04C7kTdPBLi41zwOZl00WS8b5eiaebNpY00HKbztwBq+e3vyqWNwWF3mP9YLUeqIrF+Q==
   dependencies:
-    dom-serializer "^1.0.1"
-    domelementtype "^2.2.0"
-    domhandler "^4.2.0"
+    dom-serializer "^2.0.0"
+    domelementtype "^2.3.0"
+    domhandler "^5.0.1"
 
-dot-prop@^5.2.0:
-  version "5.2.0"
-  resolved "https://registry.yarnpkg.com/dot-prop/-/dot-prop-5.2.0.tgz#c34ecc29556dc45f1f4c22697b6f4904e0cc4fcb"
-  integrity sha512-uEUyaDKoSQ1M4Oq8l45hSE26SnTxL6snNnqvK/VWx5wJhmff5z0FUVJDKDanor/6w3kzE3i7XZOk+7wC0EXr1A==
+dot-prop@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/dot-prop/-/dot-prop-6.0.1.tgz#fc26b3cf142b9e59b74dbd39ed66ce620c681083"
+  integrity sha512-tE7ztYzXHIeyvc7N+hR3oi7FIbf/NIjVP9hmAt3yMXzrQ072/fpjGLx2GxNxGxUl5V73MEqYzioOMoVhGMJ5cA==
   dependencies:
     is-obj "^2.0.0"
 
@@ -5004,11 +5102,6 @@ dtrace-provider@~0.8:
   dependencies:
     nan "^2.14.0"
 
-duplexer3@^0.1.4:
-  version "0.1.4"
-  resolved "https://registry.yarnpkg.com/duplexer3/-/duplexer3-0.1.4.tgz#ee01dd1cac0ed3cbc7fdbea37dc0a8f1ce002ce2"
-  integrity sha1-7gHdHKwO08vH/b6jfcCo8c4ALOI=
-
 duplexer@^0.1.1:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/duplexer/-/duplexer-0.1.1.tgz#ace6ff808c1ce66b57d1ebf97977acb02334cfc1"
@@ -5024,16 +5117,6 @@ duplexify@^3.4.2, duplexify@^3.6.0:
     readable-stream "^2.0.0"
     stream-shift "^1.0.0"
 
-duplexify@^4.1.2:
-  version "4.1.2"
-  resolved "https://registry.yarnpkg.com/duplexify/-/duplexify-4.1.2.tgz#18b4f8d28289132fa0b9573c898d9f903f81c7b0"
-  integrity sha512-fz3OjcNCHmRP12MJoZMPglx8m4rrFP8rovnk4vT8Fs+aonZoCwGg10dSsQsfP/E62eZcPTMSMP6686fu9Qlqtw==
-  dependencies:
-    end-of-stream "^1.4.1"
-    inherits "^2.0.3"
-    readable-stream "^3.1.1"
-    stream-shift "^1.0.0"
-
 eastasianwidth@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/eastasianwidth/-/eastasianwidth-0.2.0.tgz#696ce2ec0aa0e6ea93a397ffcf24aa7840c827cb"
@@ -5140,10 +5223,10 @@ enhanced-resolve@4.1.0, enhanced-resolve@^4.1.0:
     memory-fs "^0.4.0"
     tapable "^1.0.0"
 
-entities@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/entities/-/entities-2.0.0.tgz#68d6084cab1b079767540d80e56a39b423e4abf4"
-  integrity sha512-D9f7V0JSRwIxlRI2mjMqufDrRDnx8p+eEOz7aUM9SuvF8gsBzra0/6tbjl1m8eQHrZlYj6PxqE00hZ1SAIKPLw==
+entities@^4.2.0, entities@^4.3.0:
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/entities/-/entities-4.3.1.tgz#c34062a94c865c322f9d67b4384e4169bcede6a4"
+  integrity sha512-o4q/dYJlmyjP2zfnaWDUC6A3BQFmVTX+tZPezK7k0GLSU9QYCauscf5Y+qcEPzKL+EixVouYDgLQK5H9GrLpkg==
 
 errno@^0.1.3, errno@~0.1.7:
   version "0.1.7"
@@ -5152,7 +5235,7 @@ errno@^0.1.3, errno@~0.1.7:
   dependencies:
     prr "~1.0.1"
 
-error-ex@^1.3.1:
+error-ex@^1.3.1, error-ex@^1.3.2:
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/error-ex/-/error-ex-1.3.2.tgz#b4ac40648107fdcdcfae242f428bea8a14d4f1bf"
   integrity sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==
@@ -5226,10 +5309,10 @@ escalade@^3.1.1:
   resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.1.1.tgz#d8cfdc7000965c5a0174b4a82eaa5c0552742e40"
   integrity sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==
 
-escape-goat@^2.0.0:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/escape-goat/-/escape-goat-2.1.1.tgz#1b2dc77003676c457ec760b2dc68edb648188675"
-  integrity sha512-8/uIhbG12Csjy2JEW7D9pHbreaVaS/OpN3ycnyvElTdwM5n6GY6W6e2IPemfvGZeUMqZ9A/3GqIZMgKnBhAw/Q==
+escape-goat@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/escape-goat/-/escape-goat-4.0.0.tgz#9424820331b510b0666b98f7873fe11ac4aa8081"
+  integrity sha512-2Sd4ShcWxbx6OY1IHyla/CVNwvg7XwZVoXZHcSu9w9SReNP1EzzD5T8NWKIR38fIqEns9kDWKUQTXXAmlDrdPg==
 
 escape-html@~1.0.3:
   version "1.0.3"
@@ -5339,12 +5422,12 @@ eslint-visitor-keys@^2.0.0:
   resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-2.1.0.tgz#f65328259305927392c938ed44eb0a5c9b2bd303"
   integrity sha512-0rSmRBzXgDzIsD6mGdJgevzgezI534Cer5L/vyMX0kHzT/jiB43jRhd9YUlMGYLQy2zprNmoT8qasCGtY+QaKw==
 
-eslint@8.11.0:
-  version "8.11.0"
-  resolved "https://registry.yarnpkg.com/eslint/-/eslint-8.11.0.tgz#88b91cfba1356fc10bb9eb592958457dfe09fb37"
-  integrity sha512-/KRpd9mIRg2raGxHRGwW9ZywYNAClZrHjdueHcrVDuO3a6bj83eoTirCCk0M0yPwOjWYKHwRVRid+xK4F/GHgA==
+eslint@8.18.0:
+  version "8.18.0"
+  resolved "https://registry.yarnpkg.com/eslint/-/eslint-8.18.0.tgz#78d565d16c993d0b73968c523c0446b13da784fd"
+  integrity sha512-As1EfFMVk7Xc6/CvhssHUjsAQSkpfXvUGMFC3ce8JDe6WvqCgRrLOBQbVpsBFr1X1V+RACOadnzVvcUS5ni2bA==
   dependencies:
-    "@eslint/eslintrc" "^1.2.1"
+    "@eslint/eslintrc" "^1.3.0"
     "@humanwhocodes/config-array" "^0.9.2"
     ajv "^6.10.0"
     chalk "^4.0.0"
@@ -5355,14 +5438,14 @@ eslint@8.11.0:
     eslint-scope "^7.1.1"
     eslint-utils "^3.0.0"
     eslint-visitor-keys "^3.3.0"
-    espree "^9.3.1"
+    espree "^9.3.2"
     esquery "^1.4.0"
     esutils "^2.0.2"
     fast-deep-equal "^3.1.3"
     file-entry-cache "^6.0.1"
     functional-red-black-tree "^1.0.1"
     glob-parent "^6.0.1"
-    globals "^13.6.0"
+    globals "^13.15.0"
     ignore "^5.2.0"
     import-fresh "^3.0.0"
     imurmurhash "^0.1.4"
@@ -5371,7 +5454,7 @@ eslint@8.11.0:
     json-stable-stringify-without-jsonify "^1.0.1"
     levn "^0.4.1"
     lodash.merge "^4.6.2"
-    minimatch "^3.0.4"
+    minimatch "^3.1.2"
     natural-compare "^1.4.0"
     optionator "^0.9.1"
     regexpp "^3.2.0"
@@ -5421,16 +5504,7 @@ eslint@^8.15.0:
     text-table "^0.2.0"
     v8-compile-cache "^2.0.3"
 
-espree@9.3.1, espree@^9.3.1:
-  version "9.3.1"
-  resolved "https://registry.yarnpkg.com/espree/-/espree-9.3.1.tgz#8793b4bc27ea4c778c19908e0719e7b8f4115bcd"
-  integrity sha512-bvdyLmJMfwkV3NCRl5ZhJf22zBFo1y8bYh3VYb+bfzqNB4Je68P2sSuXyuFquzWLebHpNd2/d5uv7yoP9ISnGQ==
-  dependencies:
-    acorn "^8.7.0"
-    acorn-jsx "^5.3.1"
-    eslint-visitor-keys "^3.3.0"
-
-espree@^9.3.2:
+espree@9.3.2, espree@^9.3.2:
   version "9.3.2"
   resolved "https://registry.yarnpkg.com/espree/-/espree-9.3.2.tgz#f58f77bd334731182801ced3380a8cc859091596"
   integrity sha512-D211tC7ZwouTIuY5x9XnS0E9sWNChB7IYKX/Xp5eQj3nFXhqmiUDB9q27y76oFl8jTg3pXcQx/bpxMfs3CIZbA==
@@ -5490,6 +5564,11 @@ etag@~1.8.1:
   resolved "https://registry.yarnpkg.com/etag/-/etag-1.8.1.tgz#41ae2eeb65efa62268aebfea83ac7d79299b0887"
   integrity sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc=
 
+event-target-shim@^5.0.0:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/event-target-shim/-/event-target-shim-5.0.1.tgz#5d4d3ebdf9583d63a5333ce2deb7480ab2b05789"
+  integrity sha512-i/2XbnSz/uxRCU6+NdVJgKWDTM427+MqYbkQzD321DuCQJUqOuJKIA0IM2+W2xtYHdKOmZ4dR6fExsd4SXL+WQ==
+
 events@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/events/-/events-3.0.0.tgz#9a0a0dfaf62893d92b875b8f2698ca4114973e88"
@@ -5744,7 +5823,7 @@ fast-levenshtein@^2.0.6, fast-levenshtein@~2.0.6:
   resolved "https://registry.yarnpkg.com/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz#3d8a5c66883a16a30ca8643e851f19baa7797917"
   integrity sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc=
 
-fast-redact@^3.0.0:
+fast-redact@^3.1.1:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/fast-redact/-/fast-redact-3.1.1.tgz#790fcff8f808c2e12fabbfb2be5cb2deda448fa0"
   integrity sha512-odVmjC8x8jNeMZ3C+rPMESzXVSEU8tSWSHv9HFxP2mm89G/1WwqhrerJDQm9Zus8X6aoRgQDThKqptdNA6bt+A==
@@ -5995,6 +6074,11 @@ fork-ts-checker-webpack-plugin@^6.5.0:
     semver "^7.3.2"
     tapable "^1.0.0"
 
+form-data-encoder@1.7.1:
+  version "1.7.1"
+  resolved "https://registry.yarnpkg.com/form-data-encoder/-/form-data-encoder-1.7.1.tgz#ac80660e4f87ee0d3d3c3638b7da8278ddb8ec96"
+  integrity sha512-EFRDrsMm/kyqbTQocNvRXMLjc7Es2Vk+IQFx/YW7hkUH1eBl4J1fqiP34l74Yt0pFLCNpc06fkbVk00008mzjg==
+
 form-data@^3.0.0:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/form-data/-/form-data-3.0.1.tgz#ebd53791b78356a99af9a300d4282c4d5eb9755f"
@@ -6048,7 +6132,16 @@ fs-exists-sync@^0.1.0:
   resolved "https://registry.yarnpkg.com/fs-exists-sync/-/fs-exists-sync-0.1.0.tgz#982d6893af918e72d08dec9e8673ff2b5a8d6add"
   integrity sha1-mC1ok6+RjnLQjeyehnP/K1qNat0=
 
-fs-extra@9.1.0, fs-extra@^9.0.0:
+fs-extra@10.1.0:
+  version "10.1.0"
+  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-10.1.0.tgz#02873cfbc4084dde127eaa5f9905eef2325d1abf"
+  integrity sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==
+  dependencies:
+    graceful-fs "^4.2.0"
+    jsonfile "^6.0.1"
+    universalify "^2.0.0"
+
+fs-extra@^9.0.0:
   version "9.1.0"
   resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-9.1.0.tgz#5954460c764a8da2094ba3554bf839e6b9a7c86d"
   integrity sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==
@@ -6198,7 +6291,7 @@ get-package-type@^0.1.0:
   resolved "https://registry.yarnpkg.com/get-package-type/-/get-package-type-0.1.0.tgz#8de2d803cff44df3bc6c456e6668b36c3926e11a"
   integrity sha512-pjzuKtY64GYfWizNAJ0fr9VqttZkNiK2iS430LtIHzjBEr6bX8Am2zm4sW4Ro5wjWW5cAlRL1qAMTcXbjNAO2Q==
 
-get-stream@^4.0.0, get-stream@^4.1.0:
+get-stream@^4.0.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-4.1.0.tgz#c1b255575f3dc21d59bfc79cd3d2b46b1c3a54b5"
   integrity sha512-GMat4EJ5161kIy2HevLlr4luNjBgvmj413KaQA7jt4V8B4RDsfpHk7WQ9GVqfYyyx8OS/L66Kox+rJRNklLK7w==
@@ -6271,17 +6364,16 @@ glob-to-regexp@^0.4.1:
   resolved "https://registry.yarnpkg.com/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz#c75297087c851b9a578bd217dd59a92f59fe546e"
   integrity sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==
 
-glob@7.2.0, glob@^7.1.6:
-  version "7.2.0"
-  resolved "https://registry.yarnpkg.com/glob/-/glob-7.2.0.tgz#d15535af7732e02e948f4c41628bd910293f6023"
-  integrity sha512-lmLf6gtyrPq8tTjSmrO94wBeQbFR3HbLHbuyD69wuyQkImp2hWqMGB47OX65FBkPffO641IP9jWa1z4ivqG26Q==
+glob@8.0.3:
+  version "8.0.3"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-8.0.3.tgz#415c6eb2deed9e502c68fa44a272e6da6eeca42e"
+  integrity sha512-ull455NHSHI/Y1FqGaaYFaLGkNMMJbavMrEGFXG/PGrg6y7sutWHUHrz6gy6WEBH6akM1M414dWKCNs+IhKdiQ==
   dependencies:
     fs.realpath "^1.0.0"
     inflight "^1.0.4"
     inherits "2"
-    minimatch "^3.0.4"
+    minimatch "^5.0.1"
     once "^1.3.0"
-    path-is-absolute "^1.0.0"
 
 glob@^6.0.1:
   version "6.0.4"
@@ -6318,6 +6410,18 @@ glob@^7.1.1:
     once "^1.3.0"
     path-is-absolute "^1.0.0"
 
+glob@^7.1.6:
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-7.2.0.tgz#d15535af7732e02e948f4c41628bd910293f6023"
+  integrity sha512-lmLf6gtyrPq8tTjSmrO94wBeQbFR3HbLHbuyD69wuyQkImp2hWqMGB47OX65FBkPffO641IP9jWa1z4ivqG26Q==
+  dependencies:
+    fs.realpath "^1.0.0"
+    inflight "^1.0.4"
+    inherits "2"
+    minimatch "^3.0.4"
+    once "^1.3.0"
+    path-is-absolute "^1.0.0"
+
 global-dirs@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/global-dirs/-/global-dirs-3.0.0.tgz#70a76fe84ea315ab37b1f5576cbde7d48ef72686"
@@ -6384,6 +6488,13 @@ globals@^11.1.0:
   resolved "https://registry.yarnpkg.com/globals/-/globals-11.12.0.tgz#ab8795338868a0babd8525758018c2a7eb95c42e"
   integrity sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==
 
+globals@^13.15.0:
+  version "13.16.0"
+  resolved "https://registry.yarnpkg.com/globals/-/globals-13.16.0.tgz#9be4aca28f311aaeb974ea54978ebbb5e35ce46a"
+  integrity sha512-A1lrQfpNF+McdPOnnFqY3kSN0AFTy485bTi1bkLk4mVPODIUEcSfhHgRqA+QdXPksrSTTztYXx37NFV+GpGk3Q==
+  dependencies:
+    type-fest "^0.20.2"
+
 globals@^13.6.0, globals@^13.9.0:
   version "13.13.0"
   resolved "https://registry.yarnpkg.com/globals/-/globals-13.13.0.tgz#ac32261060d8070e2719dd6998406e27d2b5727b"
@@ -6420,22 +6531,29 @@ globby@^7.1.1:
     pify "^3.0.0"
     slash "^1.0.0"
 
-got@^9.6.0:
-  version "9.6.0"
-  resolved "https://registry.yarnpkg.com/got/-/got-9.6.0.tgz#edf45e7d67f99545705de1f7bbeeeb121765ed85"
-  integrity sha512-R7eWptXuGYxwijs0eV+v3o6+XH1IqVK8dJOEecQfTmkncw9AV4dcw/Dhxi8MdlqPthxxpZyizMzyg8RTmEsG+Q==
+got@^12.1.0:
+  version "12.1.0"
+  resolved "https://registry.yarnpkg.com/got/-/got-12.1.0.tgz#099f3815305c682be4fd6b0ee0726d8e4c6b0af4"
+  integrity sha512-hBv2ty9QN2RdbJJMK3hesmSkFTjVIHyIDDbssCKnSmq62edGgImJWD10Eb1k77TiV1bxloxqcFAVK8+9pkhOig==
   dependencies:
-    "@sindresorhus/is" "^0.14.0"
-    "@szmarczak/http-timer" "^1.1.2"
-    cacheable-request "^6.0.0"
-    decompress-response "^3.3.0"
-    duplexer3 "^0.1.4"
-    get-stream "^4.1.0"
-    lowercase-keys "^1.0.1"
-    mimic-response "^1.0.1"
-    p-cancelable "^1.0.0"
-    to-readable-stream "^1.0.0"
-    url-parse-lax "^3.0.0"
+    "@sindresorhus/is" "^4.6.0"
+    "@szmarczak/http-timer" "^5.0.1"
+    "@types/cacheable-request" "^6.0.2"
+    "@types/responselike" "^1.0.0"
+    cacheable-lookup "^6.0.4"
+    cacheable-request "^7.0.2"
+    decompress-response "^6.0.0"
+    form-data-encoder "1.7.1"
+    get-stream "^6.0.1"
+    http2-wrapper "^2.1.10"
+    lowercase-keys "^3.0.0"
+    p-cancelable "^3.0.0"
+    responselike "^2.0.0"
+
+graceful-fs@4.2.10, graceful-fs@^4.2.6, graceful-fs@^4.2.9:
+  version "4.2.10"
+  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.10.tgz#147d3a006da4ca3ce14728c7aefc287c367d7a6c"
+  integrity sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==
 
 graceful-fs@^4.1.11, graceful-fs@^4.1.15, graceful-fs@^4.1.2:
   version "4.2.2"
@@ -6457,11 +6575,6 @@ graceful-fs@^4.2.4:
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.6.tgz#ff040b2b0853b23c3d31027523706f1885d76bee"
   integrity sha512-nTnJ528pbqxYanhpDYsi4Rd8MAeaBA67+RZ10CM1m3bTAVFEDcd5AuA4a6W5YkGZ1iNXHzZz8T6TBKLeBuNriQ==
 
-graceful-fs@^4.2.9:
-  version "4.2.10"
-  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.10.tgz#147d3a006da4ca3ce14728c7aefc287c367d7a6c"
-  integrity sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==
-
 "graceful-readlink@>= 1.0.0":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/graceful-readlink/-/graceful-readlink-1.0.1.tgz#4cafad76bc62f02fa039b2f94e9a3dd3a391a725"
@@ -6575,12 +6688,12 @@ has-values@^1.0.0:
     is-number "^3.0.0"
     kind-of "^4.0.0"
 
-has-yarn@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/has-yarn/-/has-yarn-2.1.0.tgz#137e11354a7b5bf11aa5cb649cf0c6f3ff2b2e77"
-  integrity sha512-UqBRqi4ju7T+TqGNdqAO0PaSVGsDGJUBQvk9eUWNGRY1CFGDzYhLWoM7JQEemnlvVcv/YEmc2wNW8BC24EnUsw==
+has-yarn@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/has-yarn/-/has-yarn-3.0.0.tgz#c3c21e559730d1d3b57e28af1f30d06fac38147d"
+  integrity sha512-IrsVwUHhEULx3R8f/aA8AHuEzAorplsab/v8HBzEiIukwq5i/EC+xmOW+HfP1OaDP+2JkgT1yILHN2O3UFIbcA==
 
-has@^1.0.1, has@^1.0.3:
+has@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/has/-/has-1.0.3.tgz#722d7cbfc1f6aa8241f16dd814e011e1f41e8796"
   integrity sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==
@@ -6657,15 +6770,15 @@ html-escaper@^2.0.0:
   resolved "https://registry.yarnpkg.com/html-escaper/-/html-escaper-2.0.0.tgz#71e87f931de3fe09e56661ab9a29aadec707b491"
   integrity sha512-a4u9BeERWGu/S8JiWEAQcdrg9v4QArtP9keViQjGMdff20fBdd8waotXaNmODqBe6uZ3Nafi7K/ho4gCQHV3Ig==
 
-htmlparser2@^6.1.0:
-  version "6.1.0"
-  resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-6.1.0.tgz#c4d762b6c3371a05dbe65e94ae43a9f845fb8fb7"
-  integrity sha512-gyyPk6rgonLFEDGoeRgQNaEUvdJ4ktTmmUh/h2t7s+M8oPpIPxgNACWa+6ESR57kXstwqPiCut0V8NRpcwgU7A==
+htmlparser2@^8.0.1:
+  version "8.0.1"
+  resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-8.0.1.tgz#abaa985474fcefe269bc761a779b544d7196d010"
+  integrity sha512-4lVbmc1diZC7GUJQtRQ5yBAeUCL1exyMwmForWkRLnwyzWBFxN633SALPMGYaWZvKe9j1pRZJpauvmxENSp/EA==
   dependencies:
-    domelementtype "^2.0.1"
-    domhandler "^4.0.0"
-    domutils "^2.5.2"
-    entities "^2.0.0"
+    domelementtype "^2.3.0"
+    domhandler "^5.0.2"
+    domutils "^3.0.1"
+    entities "^4.3.0"
 
 http-cache-semantics@^4.0.0:
   version "4.0.3"
@@ -6712,6 +6825,14 @@ http-signature@~1.2.0:
     jsprim "^1.2.2"
     sshpk "^1.7.0"
 
+http2-wrapper@^2.1.10:
+  version "2.1.11"
+  resolved "https://registry.yarnpkg.com/http2-wrapper/-/http2-wrapper-2.1.11.tgz#d7c980c7ffb85be3859b6a96c800b2951ae257ef"
+  integrity sha512-aNAk5JzLturWEUiuhAN73Jcbq96R7rTitAoXV54FYMatvihnpD2+6PUgU4ce3D/m5VDbw+F5CsyKSF176ptitQ==
+  dependencies:
+    quick-lru "^5.1.1"
+    resolve-alpn "^1.2.0"
+
 https-browserify@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/https-browserify/-/https-browserify-1.0.0.tgz#ec06c10e0a34c0f2faf199f7fd7fc78fffd03c73"
@@ -6829,10 +6950,10 @@ import-fresh@^3.0.0:
     parent-module "^1.0.0"
     resolve-from "^4.0.0"
 
-import-lazy@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/import-lazy/-/import-lazy-2.1.0.tgz#05698e3d45c88e8d7e9d92cb0584e77f096f3e43"
-  integrity sha1-BWmOPUXIjo1+nZLLBYTnfwlvPkM=
+import-lazy@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/import-lazy/-/import-lazy-4.0.0.tgz#e8eb627483a0a43da3c03f3e35548be5cb0cc153"
+  integrity sha512-rKtvo6a868b5Hu3heneU+L4yEQ4jYKLtjpnPeUdK7h0yzXGmyBTypknlkCvHFBqfX9YlorEiMM6Dnq/5atfHkw==
 
 import-local@2.0.0:
   version "2.0.0"
@@ -6972,11 +7093,6 @@ is-accessor-descriptor@^1.0.0:
   dependencies:
     kind-of "^6.0.0"
 
-is-arguments@^1.0.4:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/is-arguments/-/is-arguments-1.0.4.tgz#3faf966c7cba0ff437fb31f6250082fcf0448cf3"
-  integrity sha512-xPh0Rmt8NE65sNzvyUmWgI1tz3mKq74lGA0mL8LYZcoIzKOzDh6HmrYm3d18k60nHerC8A9Km8kYu87zfSFnLA==
-
 is-arrayish@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d"
@@ -7021,13 +7137,6 @@ is-callable@^1.1.4, is-callable@^1.2.4:
   resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.2.4.tgz#47301d58dd0259407865547853df6d61fe471945"
   integrity sha512-nsuwtxZfMX67Oryl9LCQ+upnC0Z0BgpwntpS89m1H/TLF0zNfzfLMV/9Wa/6MZsj0acpEjAO0KF1xT6ZdLl95w==
 
-is-ci@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/is-ci/-/is-ci-2.0.0.tgz#6bc6334181810e04b5c22b3d589fdca55026404c"
-  integrity sha512-YfJT7rkpQB0updsdHLGWrvhBJfcfzNNawYDNIyQXJz0IViGf75O8EBPKSdvw2rF+LGCsX4FZ8tcr3b19LcZq4w==
-  dependencies:
-    ci-info "^2.0.0"
-
 is-ci@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/is-ci/-/is-ci-3.0.0.tgz#c7e7be3c9d8eef7d0fa144390bd1e4b88dc4c994"
@@ -7035,6 +7144,13 @@ is-ci@^3.0.0:
   dependencies:
     ci-info "^3.1.1"
 
+is-ci@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/is-ci/-/is-ci-3.0.1.tgz#db6ecbed1bd659c43dac0f45661e7674103d1867"
+  integrity sha512-ZYvCgrefwqoQ6yTyYUbQu64HsITZ3NfKX1lzaEYdkTDcfKzzCI/wthRRYKkdjHKFVgNiXKAKm65Zo1pk2as/QQ==
+  dependencies:
+    ci-info "^3.2.0"
+
 is-core-module@^2.2.0:
   version "2.4.0"
   resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.4.0.tgz#8e9fc8e15027b011418026e98f0e6f4d86305cc1"
@@ -7086,7 +7202,7 @@ is-descriptor@^1.0.0, is-descriptor@^1.0.2:
     is-data-descriptor "^1.0.0"
     kind-of "^6.0.2"
 
-is-docker@^2.0.0:
+is-docker@^2.0.0, is-docker@^2.1.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/is-docker/-/is-docker-2.2.1.tgz#33eeabe23cfe86f14bde4408a02c0cfb853acdaa"
   integrity sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==
@@ -7174,10 +7290,10 @@ is-negative-zero@^2.0.2:
   resolved "https://registry.yarnpkg.com/is-negative-zero/-/is-negative-zero-2.0.2.tgz#7bf6f03a28003b8b3965de3ac26f664d765f3150"
   integrity sha512-dqJvarLawXsFbNDeJW7zAz8ItJ9cd28YufuuFzh0G8pNHjJMnY08Dv7sYX2uF5UpQOwieAeOExEYAWWfu7ZZUA==
 
-is-npm@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/is-npm/-/is-npm-5.0.0.tgz#43e8d65cc56e1b67f8d47262cf667099193f45a8"
-  integrity sha512-WW/rQLOazUq+ST/bCAVBp/2oMERWLsR7OrKyt052dNDk4DHcDE0/7QSXITlmi+VBcV13DfIbysG3tZJm5RfdBA==
+is-npm@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/is-npm/-/is-npm-6.0.0.tgz#b59e75e8915543ca5d881ecff864077cba095261"
+  integrity sha512-JEjxbSmtPSt1c8XTkVrlujcXdKV1/tvuQ7GwKcAlyiVLeYFQ2VHat8xfrDJsIkhCdF/tZ7CiIR3sy141c6+gPQ==
 
 is-number-object@^1.0.4:
   version "1.0.7"
@@ -7225,13 +7341,6 @@ is-potential-custom-element-name@^1.0.1:
   resolved "https://registry.yarnpkg.com/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz#171ed6f19e3ac554394edf78caa05784a45bebb5"
   integrity sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==
 
-is-regex@^1.0.4:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/is-regex/-/is-regex-1.0.4.tgz#5517489b547091b0930e095654ced25ee97e9491"
-  integrity sha1-VRdIm1RwkbCTDglWVM7SXul+lJE=
-  dependencies:
-    has "^1.0.1"
-
 is-regex@^1.1.4:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/is-regex/-/is-regex-1.1.4.tgz#eef5663cd59fa4c0ae339505323df6854bb15958"
@@ -7313,11 +7422,6 @@ is-wsl@^1.1.0:
   resolved "https://registry.yarnpkg.com/is-wsl/-/is-wsl-1.1.0.tgz#1f16e4aa22b04d1336b66188a66af3c600c3a66d"
   integrity sha1-HxbkqiKwTRM2tmGIpmrzxgDDpm0=
 
-is-wsl@^2.1.1:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/is-wsl/-/is-wsl-2.1.1.tgz#4a1c152d429df3d441669498e2486d3596ebaf1d"
-  integrity sha512-umZHcSrwlDHo2TGMXv0DZ8dIUGunZ2Iv68YZnrmCiBPkZ4aaOhtv7pXJKeki9k3qJ3RJr0cDyitcl5wEH3AYog==
-
 is-wsl@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/is-wsl/-/is-wsl-2.2.0.tgz#74a4c76e77ca9fd3f932f290c17ea326cd157271"
@@ -7325,10 +7429,10 @@ is-wsl@^2.2.0:
   dependencies:
     is-docker "^2.0.0"
 
-is-yarn-global@^0.3.0:
-  version "0.3.0"
-  resolved "https://registry.yarnpkg.com/is-yarn-global/-/is-yarn-global-0.3.0.tgz#d502d3382590ea3004893746754c89139973e232"
-  integrity sha512-VjSeb/lHmkoyd8ryPVIKvOCn4D1koMqY+vqyjjUfc3xyKtP4dYOxM44sZrnqQSzSds3xyOrUTLTC9LVCVgLngw==
+is-yarn-global@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/is-yarn-global/-/is-yarn-global-0.4.0.tgz#714d94453327db9ea98fbf1a0c5f2b88f59ddd5c"
+  integrity sha512-HneQBCrXGBy15QnaDfcn6OLoU8AQPAa0Qn0IeJR/QCo4E8dNZaGGwxpCwWyEBQC5QvFonP8d6t60iGpAHVAfNA==
 
 isarray@1.0.0, isarray@^1.0.0, isarray@~1.0.0:
   version "1.0.0"
@@ -8005,29 +8109,29 @@ jsesc@~0.5.0:
   resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-0.5.0.tgz#e7dee66e35d6fc16f710fe91d5cf69f70f08911d"
   integrity sha1-597mbjXW/Bb3EP6R1c9p9w8IkR0=
 
-json-buffer@3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/json-buffer/-/json-buffer-3.0.0.tgz#5b1f397afc75d677bde8bcfc0e47e1f9a3d9a898"
-  integrity sha1-Wx85evx11ne96Lz8Dkfh+aPZqJg=
+json-buffer@3.0.1, json-buffer@~3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/json-buffer/-/json-buffer-3.0.1.tgz#9338802a30d3b6605fbe0613e094008ca8c05a13"
+  integrity sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==
 
 json-loader@^0.5.7:
   version "0.5.7"
   resolved "https://registry.yarnpkg.com/json-loader/-/json-loader-0.5.7.tgz#dca14a70235ff82f0ac9a3abeb60d337a365185d"
   integrity sha512-QLPs8Dj7lnf3e3QYS1zkCo+4ZwqOiF9d/nZnYozTISxXWCfNs9yuky5rJw4/W34s7POaNlbZmQGaB5NiXCbP4w==
 
-json-merge-patch@^0.2.3:
-  version "0.2.3"
-  resolved "https://registry.yarnpkg.com/json-merge-patch/-/json-merge-patch-0.2.3.tgz#fa2c6b5af87da77bae2966a589d52e23ed81fe40"
-  integrity sha1-+ixrWvh9p3uuKWalidUuI+2B/kA=
+json-merge-patch@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/json-merge-patch/-/json-merge-patch-1.0.2.tgz#c4626811943b2f362f8607ae8f03d528875465b0"
+  integrity sha512-M6Vp2GN9L7cfuMXiWOmHj9bEFbeC250iVtcKQbqVgEsDVYnIsrNsbU+h/Y/PkbBQCtEa4Bez+Ebv0zfbC8ObLg==
   dependencies:
-    deep-equal "^1.0.0"
+    fast-deep-equal "^3.1.3"
 
 json-parse-better-errors@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz#bb867cfb3450e69107c131d1c514bab3dc8bcaa9"
   integrity sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw==
 
-json-parse-even-better-errors@^2.3.0:
+json-parse-even-better-errors@^2.3.0, json-parse-even-better-errors@^2.3.1:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz#7c47805a94319928e05777405dc12e1f7a4ee02d"
   integrity sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==
@@ -8037,6 +8141,11 @@ json-schema-traverse@^0.4.1:
   resolved "https://registry.yarnpkg.com/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz#69f6a87d9513ab8bb8fe63bdb0979c448e684660"
   integrity sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==
 
+json-schema-traverse@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz#ae7bcb3656ab77a73ba5c49bf654f38e6b6860e2"
+  integrity sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==
+
 json-schema@0.2.3:
   version "0.2.3"
   resolved "https://registry.yarnpkg.com/json-schema/-/json-schema-0.2.3.tgz#b480c892e59a2f05954ce727bd3f2a4e882f9e13"
@@ -8141,12 +8250,13 @@ jws@^3.2.2:
     jwa "^1.4.1"
     safe-buffer "^5.0.1"
 
-keyv@^3.0.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/keyv/-/keyv-3.1.0.tgz#ecc228486f69991e49e9476485a5be1e8fc5c4d9"
-  integrity sha512-9ykJ/46SN/9KPM/sichzQ7OvXyGDYKGTaDlKMGCAlg2UK8KRy4jb0d8sFc+0Tt0YYnThq8X2RZgCg74RPxgcVA==
+keyv@^4.0.0:
+  version "4.3.2"
+  resolved "https://registry.yarnpkg.com/keyv/-/keyv-4.3.2.tgz#e839df676a0c7ee594c8835e7c1c83742558e5c2"
+  integrity sha512-kn8WmodVBe12lmHpA6W8OY7SNh6wVR+Z+wZESF4iF5FCazaVXGWOtnbnvX0tMQ1bO+/TmOD9LziuYMvrIIs0xw==
   dependencies:
-    json-buffer "3.0.0"
+    compress-brotli "^1.3.8"
+    json-buffer "3.0.1"
 
 kind-of@^2.0.1:
   version "2.0.1"
@@ -8184,12 +8294,12 @@ kleur@^3.0.3:
   resolved "https://registry.yarnpkg.com/kleur/-/kleur-3.0.3.tgz#a79c9ecc86ee1ce3fa6206d1216c501f147fc07e"
   integrity sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w==
 
-latest-version@^5.1.0:
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/latest-version/-/latest-version-5.1.0.tgz#119dfe908fe38d15dfa43ecd13fa12ec8832face"
-  integrity sha512-weT+r0kTkRQdCdYCNtkMwWXQTMEswKrFBkm4ckQOMVhhqhIMI1UT2hMj+1iigIhgSZm5gTmrRXBNoGUgaTY1xA==
+latest-version@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/latest-version/-/latest-version-7.0.0.tgz#843201591ea81a4d404932eeb61240fe04e9e5da"
+  integrity sha512-KvNT4XqAMzdcL6ka6Tl3i2lYeFDgXNCuIX+xNx6ZMVR1dFq+idXd9FLKNMOIx0t9mJ9/HudyX4oZWXZQ0UJHeg==
   dependencies:
-    package-json "^6.3.0"
+    package-json "^8.1.0"
 
 lazy-cache@^0.2.3:
   version "0.2.7"
@@ -8261,6 +8371,11 @@ lines-and-columns@^1.1.6:
   resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.1.6.tgz#1c00c743b433cd0a4e80758f7b64a57440d9ff00"
   integrity sha1-HADHQ7QzzQpOgHWPe2SldEDZ/wA=
 
+lines-and-columns@^2.0.2:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-2.0.3.tgz#b2f0badedb556b747020ab8ea7f0373e22efac1b"
+  integrity sha512-cNOjgCnLB+FnvWWtyRTzmB3POJ+cXxTA81LoW7u8JdmhfXzriropYwpjShnz1QLLWsQwY7nIxoDmcPTwphDK9w==
+
 lint-staged@^13.0.3:
   version "13.0.3"
   resolved "https://registry.yarnpkg.com/lint-staged/-/lint-staged-13.0.3.tgz#d7cdf03a3830b327a2b63c6aec953d71d9dc48c6"
@@ -8399,16 +8514,16 @@ loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.4.0:
   dependencies:
     js-tokens "^3.0.0 || ^4.0.0"
 
-lowercase-keys@^1.0.0, lowercase-keys@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/lowercase-keys/-/lowercase-keys-1.0.1.tgz#6f9e30b47084d971a7c820ff15a6c5167b74c26f"
-  integrity sha512-G2Lj61tXDnVFFOi8VZds+SoQjtQC3dgokKdDG2mTm1tx4m50NUHBOZSBwQQHyy0V12A0JTG4icfZQH+xPyh8VA==
-
 lowercase-keys@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/lowercase-keys/-/lowercase-keys-2.0.0.tgz#2603e78b7b4b0006cbca2fbcc8a3202558ac9479"
   integrity sha512-tqNXrS78oMOE73NMxK4EMLQsQowWf8jKooH9g7xPavRT706R6bkQJ6DY2Te7QukaZsulxa30wQ7bk0pm4XiHmA==
 
+lowercase-keys@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/lowercase-keys/-/lowercase-keys-3.0.0.tgz#c5e7d442e37ead247ae9db117a9d0a467c89d4f2"
+  integrity sha512-ozCC6gdQ+glXOQsveKD0YsDy8DSQFjDTz4zyzEHNV5+JP5D62LmfDZ6o1cycFx9ouG940M5dE8C8CTewdj2YWQ==
+
 lru-cache@^5.1.1:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-5.1.1.tgz#1da27e6710271947695daf6848e847f01d84b920"
@@ -8645,11 +8760,16 @@ mimic-fn@^4.0.0:
   resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-4.0.0.tgz#60a90550d5cb0b239cca65d893b1a53b29871ecc"
   integrity sha512-vqiC06CuhBTUdZH+RYl8sFrL096vA45Ok5ISO6sE/Mr1jRbGH4Csnhi8f3wKVl7x8mO4Au7Ir9D3Oyv1VYMFJw==
 
-mimic-response@^1.0.0, mimic-response@^1.0.1:
+mimic-response@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/mimic-response/-/mimic-response-1.0.1.tgz#4923538878eef42063cb8a3e3b0798781487ab1b"
   integrity sha512-j5EctnkH7amfV/q5Hgmoal1g2QHFJRraOtmx0JpIqkxhBhI/lJSl1nMpQ45hVarwNETOoWEimndZ4QK0RHxuxQ==
 
+mimic-response@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/mimic-response/-/mimic-response-3.1.0.tgz#2d1d59af9c1b129815accc2c46a022a5ce1fa3c9"
+  integrity sha512-z0yWI+4FDrrweS8Zmt4Ej5HdJmky15+L2e6Wgn3+iK5fWzb6T3fhNFq2+MeTRb064c6Wr4N/wv0DzQTjNzHNGQ==
+
 mini-css-extract-plugin@^0.9.0:
   version "0.9.0"
   resolved "https://registry.yarnpkg.com/mini-css-extract-plugin/-/mini-css-extract-plugin-0.9.0.tgz#47f2cf07aa165ab35733b1fc97d4c46c0564339e"
@@ -8684,6 +8804,13 @@ minimatch@^3.1.2:
   dependencies:
     brace-expansion "^1.1.7"
 
+minimatch@^5.0.1:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-5.1.0.tgz#1717b464f4971b144f6aabe8f2d0b8e4511e09c7"
+  integrity sha512-9TPBGGak4nHfGZsPBohm9AWg6NoT7QTCehS3BIJABslyZbzxfV78QM2Y6+i741OPZIafFAaiiEMh5OyIrJPgtg==
+  dependencies:
+    brace-expansion "^2.0.1"
+
 minimist@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.0.tgz#a35008b20f41383eec1fb914f4cd5df79a264284"
@@ -8790,15 +8917,14 @@ ms@2.1.2, ms@^2.1.1:
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009"
   integrity sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==
 
-multimatch@5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/multimatch/-/multimatch-5.0.0.tgz#932b800963cea7a31a033328fa1e0c3a1874dbe6"
-  integrity sha512-ypMKuglUrZUD99Tk2bUQ+xNQj43lPEfAeX2o9cTteAmShXy2VHDJpuwu1o0xqoKCt9jLVAvwyFKdLTPXKAfJyA==
+multimatch@6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/multimatch/-/multimatch-6.0.0.tgz#c72a9bddbc94baa4727efd613b5d22a1fe4d6ee3"
+  integrity sha512-I7tSVxHGPlmPN/enE3mS1aOSo6bWBfls+3HmuEeCUBCE7gWnm3cBXCBkpurzFjVRwC6Kld8lLaZ1Iv5vOcjvcQ==
   dependencies:
-    "@types/minimatch" "^3.0.3"
-    array-differ "^3.0.0"
-    array-union "^2.1.0"
-    arrify "^2.0.1"
+    "@types/minimatch" "^3.0.5"
+    array-differ "^4.0.0"
+    array-union "^3.0.1"
     minimatch "^3.0.4"
 
 mv@~2:
@@ -8838,10 +8964,10 @@ nano-css@^5.3.1:
     stacktrace-js "^2.0.2"
     stylis "^4.0.6"
 
-nanoid@^3.3.1:
-  version "3.3.2"
-  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.2.tgz#c89622fafb4381cd221421c69ec58547a1eec557"
-  integrity sha512-CuHBogktKwpm5g2sRgv83jEy2ijFzBwMoYA60orPDR7ynsLijJDqgsi4RDGj3OJpy3Ieb+LYwiRmIOGyytgITA==
+nanoid@^3.3.4:
+  version "3.3.4"
+  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.4.tgz#730b67e3cd09e2deacf03c027c81c9d9dbc5e8ab"
+  integrity sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==
 
 nanomatch@^1.2.9:
   version "1.2.13"
@@ -8899,10 +9025,10 @@ node-fetch@2.6.1, node-fetch@^2.6.0:
   resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.1.tgz#045bd323631f76ed2e2b55573394416b639a0052"
   integrity sha512-V4aYg89jEoVRxRb2fJdAg8FHvI7cEyYdVAh94HH0UIK8oJxUfkjlDQN9RbMx+bEjP7+ggMiFRprSti032Oipxw==
 
-node-forge@^0.10.0:
-  version "0.10.0"
-  resolved "https://registry.yarnpkg.com/node-forge/-/node-forge-0.10.0.tgz#32dea2afb3e9926f02ee5ce8794902691a676bf3"
-  integrity sha512-PPmu8eEeG9saEUvI97fm4OYxXVB6bFvyNTyiUOBichBpFG8A1Ljw3bY62+5oOjDEMHRnd0Y7HQ+x7uzxOzC6JA==
+node-forge@^1.3.1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/node-forge/-/node-forge-1.3.1.tgz#be8da2af243b2417d5f646a770663a92b7e9ded3"
+  integrity sha512-dPEtOeMvF9VMcYV/1Wb8CPoVAXtp6MKMlcbAt4ddqmGqUJ6fQZFXkNZNkNlfevtNkGtaSoXf/vNNNSvgrdXwtA==
 
 node-int64@^0.4.0:
   version "0.4.0"
@@ -8943,16 +9069,16 @@ node-modules-regexp@^1.0.0:
   resolved "https://registry.yarnpkg.com/node-modules-regexp/-/node-modules-regexp-1.0.0.tgz#8d9dbe28964a4ac5712e9131642107c71e90ec40"
   integrity sha1-jZ2+KJZKSsVxLpExZCEHxx6Q7EA=
 
-node-notifier@9.0.0:
-  version "9.0.0"
-  resolved "https://registry.yarnpkg.com/node-notifier/-/node-notifier-9.0.0.tgz#46c5bbecbb796d4a803f646cea5bc91403f2ff38"
-  integrity sha512-SkwNwGnMMlSPrcoeH4CSo9XyWe72acAHEJGDdPdB+CyBVHsIYaTQ4U/1wk3URsyzC75xZLg2vzU2YaALlqDF1Q==
+node-notifier@10.0.1:
+  version "10.0.1"
+  resolved "https://registry.yarnpkg.com/node-notifier/-/node-notifier-10.0.1.tgz#0e82014a15a8456c4cfcdb25858750399ae5f1c7"
+  integrity sha512-YX7TSyDukOZ0g+gmzjB6abKu+hTGvO8+8+gIFDsRCU2t8fLV/P2unmt+LGFaIa4y64aX98Qksa97rgz4vMNeLQ==
   dependencies:
     growly "^1.3.0"
     is-wsl "^2.2.0"
-    semver "^7.3.2"
+    semver "^7.3.5"
     shellwords "^0.1.1"
-    uuid "^8.3.0"
+    uuid "^8.3.2"
     which "^2.0.2"
 
 node-pre-gyp@^0.12.0:
@@ -9006,10 +9132,10 @@ normalize-url@1.9.1:
     query-string "^4.1.0"
     sort-keys "^1.0.0"
 
-normalize-url@^4.1.0:
-  version "4.5.0"
-  resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-4.5.0.tgz#453354087e6ca96957bd8f5baf753f5982142129"
-  integrity sha512-2s47yzUxdexf1OhyRi4Em83iQk0aPvwTddtFz4hnSSw9dCEsLEGf6SwIO8ss/19S9iBb5sJaOuTvTGDeZI00BQ==
+normalize-url@^6.0.1:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-6.1.0.tgz#40d0885b535deffe3f3147bec877d05fe4c5668a"
+  integrity sha512-DlL+XwOy3NxAQ8xuC0okPgK46iuVNAK01YN7RueYBqqFeGsBjV9XmCAzAdgt+667bCl5kPh9EqKKDwnaPG1I7A==
 
 npm-bundled@^1.0.1:
   version "1.0.6"
@@ -9106,11 +9232,6 @@ object-inspect@^1.12.2:
   resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.12.2.tgz#c0641f26394532f28ab8d796ab954e43c009a8ea"
   integrity sha512-z+cPxW0QGUp0mcqcsgQyLVRDoXFQbXOwBaqyF7VIgI4TWNQsDHrBpUQslRmIfAoYWdYzs6UlKJtB2XJpTaNSpQ==
 
-object-is@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/object-is/-/object-is-1.0.1.tgz#0aa60ec9989a0b3ed795cf4d06f62cf1ad6539b6"
-  integrity sha1-CqYOyZiaCz7Xlc9NBvYs8a1lObY=
-
 object-keys@^1.0.11, object-keys@^1.0.12, object-keys@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.1.1.tgz#1c47f272df277f3b1daf061677d9c82e2322c60e"
@@ -9185,10 +9306,10 @@ object.values@^1.1.5:
     define-properties "^1.1.3"
     es-abstract "^1.19.1"
 
-on-exit-leak-free@^0.2.0:
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/on-exit-leak-free/-/on-exit-leak-free-0.2.0.tgz#b39c9e3bf7690d890f4861558b0d7b90a442d209"
-  integrity sha512-dqaz3u44QbRXQooZLTUKU41ZrzYrcvLISVgbrzbyCMxpmSLJvZ3ZamIJIZ29P6OhZIkNIQKosdeM6t1LYbA9hg==
+on-exit-leak-free@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/on-exit-leak-free/-/on-exit-leak-free-2.1.0.tgz#5c703c968f7e7f851885f6459bf8a8a57edc9cc4"
+  integrity sha512-VuCaZZAjReZ3vUwgOB8LxAosIurDiAW0s13rI1YwmaP++jvcxP77AWoQvenZebpCA2m8WC1/EosPYPMjnRAp/w==
 
 on-finished@~2.3.0:
   version "2.3.0"
@@ -9225,13 +9346,14 @@ onetime@^6.0.0:
   dependencies:
     mimic-fn "^4.0.0"
 
-open@7.4.2:
-  version "7.4.2"
-  resolved "https://registry.yarnpkg.com/open/-/open-7.4.2.tgz#b8147e26dcf3e426316c730089fd71edd29c2321"
-  integrity sha512-MVHddDVweXZF3awtlAS+6pgKLlm/JgxZ90+/NBurBoQctVOOB/zDdVjcyPzQ+0laDGbsWgrRkflI65sQeOgT9Q==
+open@8.4.0:
+  version "8.4.0"
+  resolved "https://registry.yarnpkg.com/open/-/open-8.4.0.tgz#345321ae18f8138f82565a910fdc6b39e8c244f8"
+  integrity sha512-XgFPPM+B28FtCCgSb9I+s9szOC1vZRSwgWsRUA5ylIxRTgKozqjOCrVOqGsYABPYK5qnfqClxZTFBa8PKt2v6Q==
   dependencies:
-    is-docker "^2.0.0"
-    is-wsl "^2.1.1"
+    define-lazy-prop "^2.0.0"
+    is-docker "^2.1.1"
+    is-wsl "^2.2.0"
 
 opener@^1.5.1:
   version "1.5.1"
@@ -9308,10 +9430,10 @@ osenv@^0.1.4:
     os-homedir "^1.0.0"
     os-tmpdir "^1.0.0"
 
-p-cancelable@^1.0.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/p-cancelable/-/p-cancelable-1.1.0.tgz#d078d15a3af409220c886f1d9a0ca2e441ab26cc"
-  integrity sha512-s73XxOZ4zpt1edZYZzvhqFa6uvQc1vwUa0K0BdtIZgQMAJj9IbebH+JkgKZc9h+B05PKHLOTl4ajG1BmNrVZlw==
+p-cancelable@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/p-cancelable/-/p-cancelable-3.0.0.tgz#63826694b54d61ca1c20ebcb6d3ecf5e14cd8050"
+  integrity sha512-mlVgR3PGuzlo0MmTdk4cXqXWlwQDLnONTAg6sm62XkMJEiRxN3GL3SffkYvqwonbkJBcrI7Uvv5Zh9yjvn2iUw==
 
 p-defer@^1.0.0:
   version "1.0.0"
@@ -9366,15 +9488,15 @@ p-try@^2.0.0:
   resolved "https://registry.yarnpkg.com/p-try/-/p-try-2.2.0.tgz#cb2868540e313d61de58fafbe35ce9004d5540e6"
   integrity sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==
 
-package-json@^6.3.0:
-  version "6.5.0"
-  resolved "https://registry.yarnpkg.com/package-json/-/package-json-6.5.0.tgz#6feedaca35e75725876d0b0e64974697fed145b0"
-  integrity sha512-k3bdm2n25tkyxcjSKzB5x8kfVxlMdgsbPr0GkZcwHsLpba6cBjqCt1KlcChKEvxHIcTB1FVMuwoijZ26xex5MQ==
+package-json@^8.1.0:
+  version "8.1.0"
+  resolved "https://registry.yarnpkg.com/package-json/-/package-json-8.1.0.tgz#2a22806f1ed7c786c8e6ff26cfe20003bf4c6850"
+  integrity sha512-hySwcV8RAWeAfPsXb9/HGSPn8lwDnv6fabH+obUZKX169QknRkRhPxd1yMubpKDskLFATkl3jHpNtVtDPFA0Wg==
   dependencies:
-    got "^9.6.0"
-    registry-auth-token "^4.0.0"
-    registry-url "^5.0.0"
-    semver "^6.2.0"
+    got "^12.1.0"
+    registry-auth-token "^5.0.1"
+    registry-url "^6.0.0"
+    semver "^7.3.7"
 
 pako@~1.0.2, pako@~1.0.5:
   version "1.0.10"
@@ -9409,7 +9531,17 @@ parse-asn1@^5.0.0:
     pbkdf2 "^3.0.3"
     safe-buffer "^5.1.1"
 
-parse-json@5.2.0, parse-json@^5.0.0:
+parse-json@6.0.2:
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/parse-json/-/parse-json-6.0.2.tgz#6bf79c201351cc12d5d66eba48d5a097c13dc200"
+  integrity sha512-SA5aMiaIjXkAiBrW/yPgLgQAQg42f7K3ACO+2l/zOvtQBwX58DMUsFJXelW2fx3yMBmWOVkR6j1MGsdSbCA4UA==
+  dependencies:
+    "@babel/code-frame" "^7.16.0"
+    error-ex "^1.3.2"
+    json-parse-even-better-errors "^2.3.1"
+    lines-and-columns "^2.0.2"
+
+parse-json@^5.0.0:
   version "5.2.0"
   resolved "https://registry.yarnpkg.com/parse-json/-/parse-json-5.2.0.tgz#c76fc66dee54231c962b22bcc8a72cf2f99753cd"
   integrity sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==
@@ -9424,18 +9556,26 @@ parse-passwd@^1.0.0:
   resolved "https://registry.yarnpkg.com/parse-passwd/-/parse-passwd-1.0.0.tgz#6d5b934a456993b23d37f40a382d6f1666a8e5c6"
   integrity sha1-bVuTSkVpk7I9N/QKOC1vFmao5cY=
 
-parse5-htmlparser2-tree-adapter@^6.0.1:
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/parse5-htmlparser2-tree-adapter/-/parse5-htmlparser2-tree-adapter-6.0.1.tgz#2cdf9ad823321140370d4dbf5d3e92c7c8ddc6e6"
-  integrity sha512-qPuWvbLgvDGilKc5BoicRovlT4MtYT6JfJyBOMDsKoiT+GiuP5qyrPCnR9HcPECIJJmZh5jRndyNThnhhb/vlA==
+parse5-htmlparser2-tree-adapter@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/parse5-htmlparser2-tree-adapter/-/parse5-htmlparser2-tree-adapter-7.0.0.tgz#23c2cc233bcf09bb7beba8b8a69d46b08c62c2f1"
+  integrity sha512-B77tOZrqqfUfnVcOrUvfdLbz4pu4RopLD/4vmu3HUPswwTA8OH0EMW9BlWR2B0RCoiZRAHEUu7IxeP1Pd1UU+g==
   dependencies:
-    parse5 "^6.0.1"
+    domhandler "^5.0.2"
+    parse5 "^7.0.0"
 
-parse5@6.0.1, parse5@^6.0.1:
+parse5@6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/parse5/-/parse5-6.0.1.tgz#e1a1c085c569b3dc08321184f19a39cc27f7c30b"
   integrity sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw==
 
+parse5@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/parse5/-/parse5-7.0.0.tgz#51f74a5257f5fcc536389e8c2d0b3802e1bfa91a"
+  integrity sha512-y/t8IXSPWTuRZqXc0ajH/UwDj4mnqLEbSttNbThcFhGrZuOyoyvNBO85PBp2jQa55wY9d07PBNjsK8ZP3K5U6g==
+  dependencies:
+    entities "^4.3.0"
+
 parseurl@~1.3.3:
   version "1.3.3"
   resolved "https://registry.yarnpkg.com/parseurl/-/parseurl-1.3.3.tgz#9da19e7bee8d12dff0513ed5b76957793bc2e8d4"
@@ -9569,34 +9709,35 @@ pify@^4.0.1:
   resolved "https://registry.yarnpkg.com/pify/-/pify-4.0.1.tgz#4b2cd25c50d598735c50292224fd8c6df41e3231"
   integrity sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==
 
-pino-abstract-transport@v0.5.0:
-  version "0.5.0"
-  resolved "https://registry.yarnpkg.com/pino-abstract-transport/-/pino-abstract-transport-0.5.0.tgz#4b54348d8f73713bfd14e3dc44228739aa13d9c0"
-  integrity sha512-+KAgmVeqXYbTtU2FScx1XS3kNyfZ5TrXY07V96QnUSFqo2gAqlvmaxH67Lj7SWazqsMabf+58ctdTcBgnOLUOQ==
+pino-abstract-transport@v1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/pino-abstract-transport/-/pino-abstract-transport-1.0.0.tgz#cc0d6955fffcadb91b7b49ef220a6cc111d48bb3"
+  integrity sha512-c7vo5OpW4wIS42hUVcT5REsL8ZljsUfBjqV/e2sFxmFEFZiq1XLUp5EYLtuDH6PEHq9W1egWqRbnLUP5FuZmOA==
   dependencies:
-    duplexify "^4.1.2"
+    readable-stream "^4.0.0"
     split2 "^4.0.0"
 
-pino-std-serializers@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/pino-std-serializers/-/pino-std-serializers-4.0.0.tgz#1791ccd2539c091ae49ce9993205e2cd5dbba1e2"
-  integrity sha512-cK0pekc1Kjy5w9V2/n+8MkZwusa6EyyxfeQCB799CQRhRt/CqYKiWs5adeu8Shve2ZNffvfC/7J64A2PJo1W/Q==
+pino-std-serializers@^5.0.0:
+  version "5.6.0"
+  resolved "https://registry.yarnpkg.com/pino-std-serializers/-/pino-std-serializers-5.6.0.tgz#31b141155d6520967c5ec72944d08fb45c490fd3"
+  integrity sha512-VdUXCw8gO+xhir7sFuoYSjTnzB+TMDGxhAC/ph3YS3sdHnXNdsK0wMtADNUltfeGkn2KDxEM21fnjF3RwXyC8A==
 
-pino@7.9.1:
-  version "7.9.1"
-  resolved "https://registry.yarnpkg.com/pino/-/pino-7.9.1.tgz#7e6f401cac6e80b4eaee908ab90a05e48455cec2"
-  integrity sha512-28+D7c5orCoScdcWtiPXrCA9tdVosBWrYQgVtPdYTyiuTt6u/+rbEtpJR+dtVG8k1flhv0H2f0XSkgGm+TdjqQ==
+pino@8.1.0:
+  version "8.1.0"
+  resolved "https://registry.yarnpkg.com/pino/-/pino-8.1.0.tgz#6211c5e77d813624f6707ec4750f4fbf778d5621"
+  integrity sha512-53jlxs+02UNTtF1XwVWfa0dHipBiM5GK73XhkHn8M2hUl9y3L94dNwB8BwQhpd5WdHjBkyJiO7v0LRt4SGgsPg==
   dependencies:
-    fast-redact "^3.0.0"
-    on-exit-leak-free "^0.2.0"
-    pino-abstract-transport v0.5.0
-    pino-std-serializers "^4.0.0"
-    process-warning "^1.0.0"
+    atomic-sleep "^1.0.0"
+    fast-redact "^3.1.1"
+    on-exit-leak-free "^2.1.0"
+    pino-abstract-transport v1.0.0
+    pino-std-serializers "^5.0.0"
+    process-warning "^2.0.0"
     quick-format-unescaped "^4.0.3"
     real-require "^0.1.0"
-    safe-stable-stringify "^2.1.0"
-    sonic-boom "^2.2.1"
-    thread-stream "^0.13.0"
+    safe-stable-stringify "^2.3.1"
+    sonic-boom "^3.0.0"
+    thread-stream "^1.0.0"
 
 pirates@^4.0.1:
   version "4.0.1"
@@ -9680,12 +9821,12 @@ postcss-value-parser@^4.0.2:
   resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514"
   integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==
 
-postcss@8.4.12:
-  version "8.4.12"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.12.tgz#1e7de78733b28970fa4743f7da6f3763648b1905"
-  integrity sha512-lg6eITwYe9v6Hr5CncVbK70SoioNQIq81nsaG86ev5hAidQvmOeETBqs7jm43K2F5/Ley3ytDtriImV6TpNiSg==
+postcss@8.4.14:
+  version "8.4.14"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.14.tgz#ee9274d5622b4858c1007a74d76e42e56fd21caf"
+  integrity sha512-E398TUmfAYFPBSdzgeieK2Y1+1cpdxJx8yXbK/m57nRhKSmk1GB2tO4lbLBtlkfPQTDKfe4Xqv1ASWPpayPEig==
   dependencies:
-    nanoid "^3.3.1"
+    nanoid "^3.3.4"
     picocolors "^1.0.0"
     source-map-js "^1.0.2"
 
@@ -9712,11 +9853,6 @@ prepend-http@^1.0.0:
   resolved "https://registry.yarnpkg.com/prepend-http/-/prepend-http-1.0.4.tgz#d4f4562b0ce3696e41ac52d0e002e57a635dc6dc"
   integrity sha1-1PRWKwzjaW5BrFLQ4ALlemNdxtw=
 
-prepend-http@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/prepend-http/-/prepend-http-2.0.0.tgz#e92434bfa5ea8c19f41cdfd401d741a3c819d897"
-  integrity sha1-6SQ0v6XqjBn0HN/UAddBo8gZ2Jc=
-
 prettier@^2.7.1:
   version "2.7.1"
   resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.7.1.tgz#e235806850d057f97bb08368a4f7d899f7760c64"
@@ -9756,10 +9892,10 @@ process-nextick-args@~2.0.0:
   resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-2.0.1.tgz#7820d9b16120cc55ca9ae7792680ae7dba6d7fe2"
   integrity sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==
 
-process-warning@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/process-warning/-/process-warning-1.0.0.tgz#980a0b25dc38cd6034181be4b7726d89066b4616"
-  integrity sha512-du4wfLyj4yCZq1VupnVSZmRsPJsNuxoDQFdCFHLaYiEbFBD7QE0a+I4D7hOxrVnh78QE/YipFAj9lXHiXocV+Q==
+process-warning@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/process-warning/-/process-warning-2.0.0.tgz#341dbeaac985b90a04ebcd844d50097c7737b2ee"
+  integrity sha512-+MmoAXoUX+VTHAlwns0h+kFUWFs/3FZy+ZuchkgjyOu3oioLAo2LB5aCfKPh2+P9O18i3m43tUEv3YqttSy0Ww==
 
 process@^0.11.10:
   version "0.11.10"
@@ -9781,10 +9917,10 @@ promise-inflight@^1.0.1:
   resolved "https://registry.yarnpkg.com/promise-inflight/-/promise-inflight-1.0.1.tgz#98472870bf228132fcbdd868129bad12c3c029e3"
   integrity sha1-mEcocL8igTL8vdhoEputEsPAKeM=
 
-promise-toolbox@0.20.0:
-  version "0.20.0"
-  resolved "https://registry.yarnpkg.com/promise-toolbox/-/promise-toolbox-0.20.0.tgz#af04d7338038c2362b8fb7c27546c57d893bf562"
-  integrity sha512-VXF6waqUheD19yOU7zxsXhw/HCKlXqXwUc4jM8mchtBqZFNA+GHA7dbJsQDLHP4IUpQuTLpCQRd0lCr5z4CqXQ==
+promise-toolbox@0.21.0:
+  version "0.21.0"
+  resolved "https://registry.yarnpkg.com/promise-toolbox/-/promise-toolbox-0.21.0.tgz#6919876f9dea375f01b4ddaec4206db83cb0aa55"
+  integrity sha512-NV8aTmpwrZv+Iys54sSFOBx3tuVaOBvvrft5PNppnxy9xpU/akHbaWIril22AB22zaPgrgwKdD0KsrM0ptUtpg==
   dependencies:
     make-error "^1.3.2"
 
@@ -9813,6 +9949,11 @@ prop-types@^15.8.1:
     object-assign "^4.1.1"
     react-is "^16.13.1"
 
+proto-list@~1.2.1:
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/proto-list/-/proto-list-1.2.4.tgz#212d5bfe1318306a420f6402b8e26ff39647a849"
+  integrity sha512-vtK/94akxsTMhe0/cbfpR+syPuszcuwhqVjJq26CuNDgFGj682oRBXOP5MJpv2r7JtE8MsiepGIqvvOTBwn2vA==
+
 proxy-addr@~2.0.5:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-2.0.5.tgz#34cbd64a2d81f4b1fd21e76f9f06c8a45299ee34"
@@ -9888,12 +10029,12 @@ punycode@^2.1.0, punycode@^2.1.1:
   resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.1.1.tgz#b58b010ac40c22c5657616c8d2c2c02c7bf479ec"
   integrity sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==
 
-pupa@^2.1.1:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/pupa/-/pupa-2.1.1.tgz#f5e8fd4afc2c5d97828faa523549ed8744a20d62"
-  integrity sha512-l1jNAspIBSFqbT+y+5FosojNpVpF94nlI+wDUpqP9enwOTfHx9f0gh5nB96vl+6yTpsJsypeNrwfzPrKuHB41A==
+pupa@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/pupa/-/pupa-3.1.0.tgz#f15610274376bbcc70c9a3aa8b505ea23f41c579"
+  integrity sha512-FLpr4flz5xZTSJxSeaheeMKN/EDzMdK7b8PTOC6a5PYFKTucWbdqjgqaEyH0shFiSJrVB1+Qqi4Tk19ccU6Aug==
   dependencies:
-    escape-goat "^2.0.0"
+    escape-goat "^4.0.0"
 
 puppeteer@^10.1.0:
   version "10.1.0"
@@ -9958,6 +10099,11 @@ quick-format-unescaped@^4.0.3:
   resolved "https://registry.yarnpkg.com/quick-format-unescaped/-/quick-format-unescaped-4.0.4.tgz#93ef6dd8d3453cbc7970dd614fad4c5954d6b5a7"
   integrity sha512-tYC1Q1hgyRuHgloV/YXs2w15unPVh8qfu/qCTfhTYamaw7fyhumKa2yGpdSo87vY32rIclj+4fWYQXUMs9EHvg==
 
+quick-lru@^5.1.1:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/quick-lru/-/quick-lru-5.1.1.tgz#366493e6b3e42a3a6885e2e99d18f80fb7a8c932"
+  integrity sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==
+
 randombytes@^2.0.0, randombytes@^2.0.1, randombytes@^2.0.5:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/randombytes/-/randombytes-2.1.0.tgz#df6f84372f0270dc65cdf6291349ab7a473d4f2a"
@@ -9996,7 +10142,7 @@ raw-loader@^4.0.0:
     loader-utils "^1.2.3"
     schema-utils "^2.5.0"
 
-rc@^1.2.7, rc@^1.2.8:
+rc@1.2.8, rc@^1.2.7:
   version "1.2.8"
   resolved "https://registry.yarnpkg.com/rc/-/rc-1.2.8.tgz#cd924bf5200a075b83c188cd6b9e211b7fc0d3ed"
   integrity sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==
@@ -10105,6 +10251,13 @@ readable-stream@^3.4.0:
     string_decoder "^1.1.1"
     util-deprecate "^1.0.1"
 
+readable-stream@^4.0.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-4.1.0.tgz#280d0a29f559d3fb684a277254e02b6f61ae0631"
+  integrity sha512-sVisi3+P2lJ2t0BPbpK629j8wRW06yKGJUcaLAGXPAUhyUxVJm7VsCTit1PFgT4JHUDMrGNR+ZjSKpzGaRF3zw==
+  dependencies:
+    abort-controller "^3.0.0"
+
 readdirp@^2.2.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-2.2.1.tgz#0e87622a3325aa33e892285caf8b4e846529a525"
@@ -10187,13 +10340,6 @@ regex-not@^1.0.0, regex-not@^1.0.2:
     extend-shallow "^3.0.2"
     safe-regex "^1.1.0"
 
-regexp.prototype.flags@^1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/regexp.prototype.flags/-/regexp.prototype.flags-1.2.0.tgz#6b30724e306a27833eeb171b66ac8890ba37e41c"
-  integrity sha512-ztaw4M1VqgMwl9HlPpOuiYgItcHlunW0He2fE6eNfT6E/CF2FtYi9ofOYe4mKntstYk0Fyh/rDRBdS3AnxjlrA==
-  dependencies:
-    define-properties "^1.1.2"
-
 regexp.prototype.flags@^1.4.1:
   version "1.4.3"
   resolved "https://registry.yarnpkg.com/regexp.prototype.flags/-/regexp.prototype.flags-1.4.3.tgz#87cab30f80f66660181a3bb7bf5981a872b367ac"
@@ -10232,20 +10378,19 @@ regexpu-core@^5.0.1:
     unicode-match-property-ecmascript "^2.0.0"
     unicode-match-property-value-ecmascript "^2.0.0"
 
-registry-auth-token@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/registry-auth-token/-/registry-auth-token-4.0.0.tgz#30e55961eec77379da551ea5c4cf43cbf03522be"
-  integrity sha512-lpQkHxd9UL6tb3k/aHAVfnVtn+Bcs9ob5InuFLLEDqSqeq+AljB8GZW9xY0x7F+xYwEcjKe07nyoxzEYz6yvkw==
+registry-auth-token@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/registry-auth-token/-/registry-auth-token-5.0.1.tgz#5e6cd106e6c251135a046650c58476fc03e92833"
+  integrity sha512-UfxVOj8seK1yaIOiieV4FIP01vfBDLsY0H9sQzi9EbbUdJiuuBjJgLa1DpImXMNPnVkBD4eVxTEXcrZA6kfpJA==
   dependencies:
-    rc "^1.2.8"
-    safe-buffer "^5.0.1"
+    "@pnpm/npm-conf" "^1.0.4"
 
-registry-url@^5.0.0:
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/registry-url/-/registry-url-5.1.0.tgz#e98334b50d5434b81136b44ec638d9c2009c5009"
-  integrity sha512-8acYXXTI0AkQv6RAOjE3vOaIXZkT9wo4LOFbBKYQEEnnMNBpKqdUrI6S4NT0KPIo/WVvJ5tE/X5LF/TQUf0ekw==
+registry-url@^6.0.0:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/registry-url/-/registry-url-6.0.1.tgz#056d9343680f2f64400032b1e199faa692286c58"
+  integrity sha512-+crtS5QjFRqFCoQmvGduwYWEBng99ZvmFvF+cUJkGYF1L1BfU8C6Zp9T7f5vPAwyLkUExpvK+ANVZmGU49qi4Q==
   dependencies:
-    rc "^1.2.8"
+    rc "1.2.8"
 
 regjsgen@^0.5.0:
   version "0.5.0"
@@ -10325,6 +10470,11 @@ require-directory@^2.1.1:
   resolved "https://registry.yarnpkg.com/require-directory/-/require-directory-2.1.1.tgz#8c64ad5fd30dab1c976e2344ffe7f792a6a6df42"
   integrity sha1-jGStX9MNqxyXbiNE/+f3kqam30I=
 
+require-from-string@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/require-from-string/-/require-from-string-2.0.2.tgz#89a7fdd938261267318eafe14f9c32e598c36909"
+  integrity sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==
+
 require-main-filename@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/require-main-filename/-/require-main-filename-2.0.0.tgz#d0b329ecc7cc0f61649f62215be69af54aa8989b"
@@ -10335,6 +10485,11 @@ resize-observer-polyfill@^1.5.1:
   resolved "https://registry.yarnpkg.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz#0e9020dd3d21024458d4ebd27e23e40269810464"
   integrity sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==
 
+resolve-alpn@^1.2.0:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/resolve-alpn/-/resolve-alpn-1.2.1.tgz#b7adbdac3546aaaec20b45e7d8265927072726f9"
+  integrity sha512-0a1F4l73/ZFZOakJnQ3FvkJ2+gSTQWz/r2KE5OdDY0TxPm5h4GkqkWWfM47T7HsbnOtcJVEF4epCVy6u7Q3K+g==
+
 resolve-cwd@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/resolve-cwd/-/resolve-cwd-2.0.0.tgz#00a9f7387556e27038eae232caa372a6a59b665a"
@@ -10417,12 +10572,12 @@ resolve@^2.0.0-next.3:
     is-core-module "^2.2.0"
     path-parse "^1.0.6"
 
-responselike@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/responselike/-/responselike-1.0.2.tgz#918720ef3b631c5642be068f15ade5a46f4ba1e7"
-  integrity sha1-kYcg7ztjHFZCvgaPFa3lpG9Loec=
+responselike@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/responselike/-/responselike-2.0.0.tgz#26391bcc3174f750f9a79eacc40a12a5c42d7723"
+  integrity sha512-xH48u3FTB9VsZw7R+vvgaKeLKzT6jOogbQhEe/jewwnZgzPcnyWui2Av6JpoYZF/91uueC+lqhWqeURw5/qhCw==
   dependencies:
-    lowercase-keys "^1.0.0"
+    lowercase-keys "^2.0.0"
 
 restore-cursor@^3.1.0:
   version "3.1.0"
@@ -10533,7 +10688,7 @@ safe-regex@^1.1.0:
   dependencies:
     ret "~0.1.10"
 
-safe-stable-stringify@^2.1.0:
+safe-stable-stringify@^2.3.1:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/safe-stable-stringify/-/safe-stable-stringify-2.3.1.tgz#ab67cbe1fe7d40603ca641c5e765cb942d04fc73"
   integrity sha512-kYBSfT+troD9cDA85VDnHZ1rpHC50O0g1e6WlGHVCz/g+JS+9WKLj+XwFYyR8UbrZN8ll9HUpDAAddY58MGisg==
@@ -10628,22 +10783,22 @@ screenfull@^5.1.0:
   resolved "https://registry.yarnpkg.com/screenfull/-/screenfull-5.2.0.tgz#6533d524d30621fc1283b9692146f3f13a93d1ba"
   integrity sha512-9BakfsO2aUQN2K9Fdbj87RJIEZ82Q9IGim7FqM5OsebfoFC6ZHXgDq/KvniuLTPdeM8wY2o6Dj3WQ7KeQCj3cA==
 
-semver-diff@^3.1.1:
-  version "3.1.1"
-  resolved "https://registry.yarnpkg.com/semver-diff/-/semver-diff-3.1.1.tgz#05f77ce59f325e00e2706afd67bb506ddb1ca32b"
-  integrity sha512-GX0Ix/CJcHyB8c4ykpHGIAvLyOwOobtM/8d+TQkAd81/bEjgPHrfba41Vpesr7jX/t8Uh+R3EX9eAS5be+jQYg==
+semver-diff@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/semver-diff/-/semver-diff-4.0.0.tgz#3afcf5ed6d62259f5c72d0d5d50dffbdc9680df5"
+  integrity sha512-0Ju4+6A8iOnpL/Thra7dZsSlOHYAHIeMxfhWQRI1/VLcT3WDBZKKtQt/QkBOsiIN9ZpuvHE6cGZ0x4glCMmfiA==
   dependencies:
-    semver "^6.3.0"
+    semver "^7.3.5"
 
 semver@7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/semver/-/semver-7.0.0.tgz#5f3ca35761e47e05b206c6daff2cf814f0316b8e"
   integrity sha512-+GB6zVA9LWh6zovYQLALHwv5rb2PHGlJi3lfiqIHxR0uuwCgefcOJc59v9fv1w8GbStwxuuqqAjI9NMAOOgq1A==
 
-semver@7.3.5, semver@^7.3.2, semver@^7.3.4:
-  version "7.3.5"
-  resolved "https://registry.yarnpkg.com/semver/-/semver-7.3.5.tgz#0b621c879348d8998e4b0e4be94b3f12e6018ef7"
-  integrity sha512-PoeGJYh8HK4BTO/a9Tf6ZG3veo/A7ZVsYrSA6J8ny9nb3B1VrpkuN+z9OE5wfE5p6H4LchYZsegiQgbJD94ZFQ==
+semver@7.3.7, semver@^7.3.5, semver@^7.3.7:
+  version "7.3.7"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-7.3.7.tgz#12c5b649afdbf9049707796e22a4028814ce523f"
+  integrity sha512-QlYTucUYOews+WeEujDoEGziz4K6c47V/Bd+LjSSYcA94p+DmINdf7ncaUinThfvZyu13lN9OY1XDxt8C0Tw0g==
   dependencies:
     lru-cache "^6.0.0"
 
@@ -10652,15 +10807,15 @@ semver@^5.3.0, semver@^5.4.1, semver@^5.5.0, semver@^5.6.0:
   resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.1.tgz#a954f931aeba508d307bbf069eff0c01c96116f7"
   integrity sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==
 
-semver@^6.0.0, semver@^6.1.1, semver@^6.1.2, semver@^6.2.0, semver@^6.3.0:
+semver@^6.0.0, semver@^6.1.1, semver@^6.1.2, semver@^6.3.0:
   version "6.3.0"
   resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.0.tgz#ee0a64c8af5e8ceea67687b133761e1becbd1d3d"
   integrity sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==
 
-semver@^7.3.5:
-  version "7.3.7"
-  resolved "https://registry.yarnpkg.com/semver/-/semver-7.3.7.tgz#12c5b649afdbf9049707796e22a4028814ce523f"
-  integrity sha512-QlYTucUYOews+WeEujDoEGziz4K6c47V/Bd+LjSSYcA94p+DmINdf7ncaUinThfvZyu13lN9OY1XDxt8C0Tw0g==
+semver@^7.3.2:
+  version "7.3.5"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-7.3.5.tgz#0b621c879348d8998e4b0e4be94b3f12e6018ef7"
+  integrity sha512-PoeGJYh8HK4BTO/a9Tf6ZG3veo/A7ZVsYrSA6J8ny9nb3B1VrpkuN+z9OE5wfE5p6H4LchYZsegiQgbJD94ZFQ==
   dependencies:
     lru-cache "^6.0.0"
 
@@ -10806,13 +10961,13 @@ side-channel@^1.0.4:
     get-intrinsic "^1.0.2"
     object-inspect "^1.9.0"
 
-sign-addon@3.11.0:
-  version "3.11.0"
-  resolved "https://registry.yarnpkg.com/sign-addon/-/sign-addon-3.11.0.tgz#8c4e688ae8053b8e24ab03aa59e651f1bf66a9fb"
-  integrity sha512-fcK2WzkMb8e8E9kvuccy+mrBTT81iR+1CowHLU594Elr4E9E9zZFr3itGlL0OoXcRouKmvt7rpXzoARu++tXRQ==
+sign-addon@5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/sign-addon/-/sign-addon-5.0.0.tgz#aa7feaa2b74ba0c89f70b0928db6e8fc4296771e"
+  integrity sha512-qO3YYs8/kV7SyY8Kqmk1TW30FAVnvxTxUvncnK82H1+k4AkhVw33owReKyzoiHfNpgv1ugmgxA9jEsAIWqVCCg==
   dependencies:
     common-tags "1.8.2"
-    core-js "3.21.0"
+    core-js "3.22.8"
     deepcopy "2.1.0"
     es6-error "4.1.1"
     es6-promisify "7.0.0"
@@ -10913,10 +11068,10 @@ snapdragon@^0.8.1:
     source-map-resolve "^0.5.0"
     use "^3.1.0"
 
-sonic-boom@^2.2.1:
-  version "2.6.0"
-  resolved "https://registry.yarnpkg.com/sonic-boom/-/sonic-boom-2.6.0.tgz#8786fc78be07c18a90381acd816d1d4afe3537a2"
-  integrity sha512-6xYZFRmDEtxGqfOKcDQ4cPLrNa0SPEDI+wlzDAHowXE6YV42NeXqg9mP2KkiM8JVu3lHfZ2iQKYlGOz+kTpphg==
+sonic-boom@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/sonic-boom/-/sonic-boom-3.0.0.tgz#235119a6606e2646919a27d83ef687f2ba6c0fba"
+  integrity sha512-p5DiZOZHbJ2ZO5MADczp5qrfOd3W5Vr2vHxfCpe7G4AzPwVOweIjbfgku8wSQUuk+Y5Yuo8W7JqRe6XKmKistg==
   dependencies:
     atomic-sleep "^1.0.0"
 
@@ -10948,14 +11103,6 @@ source-map-resolve@^0.5.0:
     source-map-url "^0.4.0"
     urix "^0.1.0"
 
-source-map-support@0.5.20:
-  version "0.5.20"
-  resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.20.tgz#12166089f8f5e5e8c56926b377633392dd2cb6c9"
-  integrity sha512-n1lZZ8Ve4ksRqizaBQgxXDgKwttHDhyfQjA6YZZn8+AroHbsIz+JjwxQDxbp+7y5OYCI8t1Yk7etjD9CRd2hIw==
-  dependencies:
-    buffer-from "^1.0.0"
-    source-map "^0.6.0"
-
 source-map-support@0.5.21:
   version "0.5.21"
   resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.21.tgz#04fe7c7f9e1ed2d662233c28cb2b35b9f63f6e4f"
@@ -11039,10 +11186,10 @@ split2@^4.0.0:
   resolved "https://registry.yarnpkg.com/split2/-/split2-4.1.0.tgz#101907a24370f85bb782f08adaabe4e281ecf809"
   integrity sha512-VBiJxFkxiXRlUIeyMQi8s4hgvKCSjtknJv/LVYbrgALPwf5zSKmEwV9Lst25AkvMDnvxODugjdl6KZgwKM1WYQ==
 
-split@~0.3.3:
-  version "0.3.3"
-  resolved "https://registry.yarnpkg.com/split/-/split-0.3.3.tgz#cd0eea5e63a211dfff7eb0f091c4133e2d0dd28f"
-  integrity sha1-zQ7qXmOiEd//frDwkcQTPi0N0o8=
+split@~1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/split/-/split-1.0.1.tgz#605bd9be303aa59fb35f9229fbea0ddec9ea07d9"
+  integrity sha512-mTyOoPbrivtXnwnIxZRFYRrPNtEFKlpB2fvjSnCQUiAA6qAZzqwna5envK4uk6OIeP17CsdF3rSBGYVBsU0Tkg==
   dependencies:
     through "2"
 
@@ -11214,7 +11361,7 @@ string-width@^3.0.0, string-width@^3.1.0:
     is-fullwidth-code-point "^2.0.0"
     strip-ansi "^5.1.0"
 
-string-width@^4.0.0, string-width@^4.1.0, string-width@^4.2.0:
+string-width@^4.1.0, string-width@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.0.tgz#952182c46cc7b2c313d1596e623992bd163b72b5"
   integrity sha512-zUz5JD+tgqtuDjMhwIg5uFVV3dtqZ9yQJlZVfq4I01/K5Paj5UHj7VyrQOJvzawSVlKpObApbfD0Ed6yJc+1eg==
@@ -11223,7 +11370,7 @@ string-width@^4.0.0, string-width@^4.1.0, string-width@^4.2.0:
     is-fullwidth-code-point "^3.0.0"
     strip-ansi "^6.0.0"
 
-string-width@^4.2.2, string-width@^4.2.3:
+string-width@^4.2.3:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -11232,7 +11379,7 @@ string-width@^4.2.2, string-width@^4.2.3:
     is-fullwidth-code-point "^3.0.0"
     strip-ansi "^6.0.1"
 
-string-width@^5.0.0:
+string-width@^5.0.0, string-width@^5.0.1, string-width@^5.1.2:
   version "5.1.2"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-5.1.2.tgz#14f8daec6d81e7221d2a357e668cab73bdbca794"
   integrity sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==
@@ -11344,7 +11491,12 @@ strip-bom-stream@4.0.0:
     first-chunk-stream "^3.0.0"
     strip-bom-buf "^2.0.0"
 
-strip-bom@4.0.0, strip-bom@^4.0.0:
+strip-bom@5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-5.0.0.tgz#88d2e135d154dca7a5e06b4a4ba9653b6bdc0dd2"
+  integrity sha512-p+byADHF7SzEcVnLvc/r3uognM1hUhObuHXxJcgLCfD194XAkaLbjq3Wzb0N5G2tgIjH0dgT708Z51QxMeu60A==
+
+strip-bom@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-4.0.0.tgz#9c3505c1db45bcedca3d9cf7a16f5c5aa3901878"
   integrity sha512-3xurFv5tEgii33Zi8Jtp55wEIILR9eh34FAW00PZf+JnSsTmV/ioewSgQl97JHvgjoRGwPShsWm+IdrxB35d0w==
@@ -11364,7 +11516,12 @@ strip-final-newline@^3.0.0:
   resolved "https://registry.yarnpkg.com/strip-final-newline/-/strip-final-newline-3.0.0.tgz#52894c313fbff318835280aed60ff71ebf12b8fd"
   integrity sha512-dOESqjYr96iWYylGObzd39EuNTa5VJxyvVAEm5Jnh7KGo75V43Hk1odPQkNDyXNmUR6k+gEiDVXnjB8HJ3crXw==
 
-strip-json-comments@3.1.1, strip-json-comments@^3.1.0, strip-json-comments@^3.1.1:
+strip-json-comments@4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-4.0.0.tgz#6fd3a79f1b956905483769b0bf66598b8f87da50"
+  integrity sha512-LzWcbfMbAsEDTRmhjWIioe8GcDRl0fa35YMXFoJKDdiD/quGFmjJjdgPjFJJNwCMaLyQqFIDqCdHD2V4HfLgYA==
+
+strip-json-comments@^3.1.0, strip-json-comments@^3.1.1:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.1.1.tgz#31f1281b3832630434831c310c01cccda8cbe006"
   integrity sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==
@@ -11564,10 +11721,10 @@ thenify-all@^1.0.0:
   dependencies:
     any-promise "^1.0.0"
 
-thread-stream@^0.13.0:
-  version "0.13.2"
-  resolved "https://registry.yarnpkg.com/thread-stream/-/thread-stream-0.13.2.tgz#de8ea87584baee625c631947ec73494aa86131c8"
-  integrity sha512-woZFt0cLFkPdhsa+IGpRo1jiSouaHxMIljzTgt30CMjBWoUYbbcHqnunW5Yv+BXko9H05MVIcxMipI3Jblallw==
+thread-stream@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/thread-stream/-/thread-stream-1.0.1.tgz#beb10b9b06d4b2e35ce137ff8a08f9805512d8cd"
+  integrity sha512-JuZyfzx81e5MBk8uIr8ZH76bXyjEQvbRDEkSdlV1JFBdq/rbby2RuvzBYlTBd/xCljxy6lPxrTLXzB9Jl1bNrw==
   dependencies:
     real-require "^0.1.0"
 
@@ -11635,11 +11792,6 @@ to-object-path@^0.3.0:
   dependencies:
     kind-of "^3.0.2"
 
-to-readable-stream@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/to-readable-stream/-/to-readable-stream-1.0.0.tgz#ce0aa0c2f3df6adf852efb404a783e77c0475771"
-  integrity sha512-Iq25XBt6zD5npPhlLVXGFN3/gyR2/qODcKNNyTMd4vbm39HUaOiAM4PMq0eMVC/Tkxz+Zjdsc55g9yyz+Yq00Q==
-
 to-regex-range@^2.1.0:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/to-regex-range/-/to-regex-range-2.1.1.tgz#7c80c17b9dfebe599e27367e0d4dd5590141db38"
@@ -11739,11 +11891,6 @@ tslib@^2.1.0:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.4.0.tgz#7cecaa7f073ce680a05847aa77be941098f36dc3"
   integrity sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==
 
-tslib@^2.2.0:
-  version "2.3.1"
-  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.3.1.tgz#e8a335add5ceae51aa261d32a490158ef042ef01"
-  integrity sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==
-
 tsutils@^3.21.0:
   version "3.21.0"
   resolved "https://registry.yarnpkg.com/tsutils/-/tsutils-3.21.0.tgz#b48717d394cea6c1e096983eed58e9d61715b623"
@@ -11797,6 +11944,16 @@ type-fest@^0.21.3:
   resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.21.3.tgz#d260a24b0198436e133fa26a524a6d65fa3b2e37"
   integrity sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==
 
+type-fest@^1.0.1:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-1.4.0.tgz#e9fb813fe3bf1744ec359d55d1affefa76f14be1"
+  integrity sha512-yGSza74xk0UG8k+pLh5oeoYirvIiWo5t0/o3zHHAO2tRDiZcxWP7fywNlXhqb6/r6sWvwi+RsyQMWhVLe4BVuA==
+
+type-fest@^2.13.0:
+  version "2.16.0"
+  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-2.16.0.tgz#1250fbd64dafaf4c8e405e393ef3fb16d9651db2"
+  integrity sha512-qpaThT2HQkFb83gMOrdKVsfCN7LKxP26Yq+smPzY1FqoHRjqmjqHXA7n5Gkxi8efirtbeEUxzfEdePthQWCuHw==
+
 type-is@~1.6.17, type-is@~1.6.18:
   version "1.6.18"
   resolved "https://registry.yarnpkg.com/type-is/-/type-is-1.6.18.tgz#4e552cd05df09467dcbc4ef739de89f2cf37c131"
@@ -11938,12 +12095,12 @@ unique-slug@^2.0.0:
   dependencies:
     imurmurhash "^0.1.4"
 
-unique-string@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/unique-string/-/unique-string-2.0.0.tgz#39c6451f81afb2749de2b233e3f7c5e8843bd89d"
-  integrity sha512-uNaeirEPvpZWSgzwsPGtU2zVSTrn/8L5q/IexZmH0eH6SA73CmAA5U4GwORTxQAZs95TAXLNqeLoPPNO5gZfWg==
+unique-string@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/unique-string/-/unique-string-3.0.0.tgz#84a1c377aff5fd7a8bc6b55d8244b2bd90d75b9a"
+  integrity sha512-VGXBUVwxKMBUznyffQweQABPRRW1vHZAbadFZud4pLFAqRGvv/96vafgjWFqzourzr8YonlQiPgH0YCJfawoGQ==
   dependencies:
-    crypto-random-string "^2.0.0"
+    crypto-random-string "^4.0.0"
 
 universalify@^0.1.2:
   version "0.1.2"
@@ -11983,25 +12140,25 @@ upath@^1.1.1:
   resolved "https://registry.yarnpkg.com/upath/-/upath-1.2.0.tgz#8f66dbcd55a883acdae4408af8b035a5044c1894"
   integrity sha512-aZwGpamFO61g3OlfT7OQCHqhGnW43ieH9WZeP7QxN/G/jS4jfqUkZxoryvJgVPEcrl5NL/ggHsSmLMHuH64Lhg==
 
-update-notifier@5.1.0:
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/update-notifier/-/update-notifier-5.1.0.tgz#4ab0d7c7f36a231dd7316cf7729313f0214d9ad9"
-  integrity sha512-ItnICHbeMh9GqUy31hFPrD1kcuZ3rpxDZbf4KUDavXwS0bW5m7SLbDQpGX3UYr072cbrF5hFUs3r5tUsPwjfHw==
+update-notifier@6.0.2:
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/update-notifier/-/update-notifier-6.0.2.tgz#a6990253dfe6d5a02bd04fbb6a61543f55026b60"
+  integrity sha512-EDxhTEVPZZRLWYcJ4ZXjGFN0oP7qYvbXWzEgRm/Yql4dHX5wDbvh89YHP6PK1lzZJYrMtXUuZZz8XGK+U6U1og==
   dependencies:
-    boxen "^5.0.0"
-    chalk "^4.1.0"
-    configstore "^5.0.1"
-    has-yarn "^2.1.0"
-    import-lazy "^2.1.0"
-    is-ci "^2.0.0"
+    boxen "^7.0.0"
+    chalk "^5.0.1"
+    configstore "^6.0.0"
+    has-yarn "^3.0.0"
+    import-lazy "^4.0.0"
+    is-ci "^3.0.1"
     is-installed-globally "^0.4.0"
-    is-npm "^5.0.0"
-    is-yarn-global "^0.3.0"
-    latest-version "^5.1.0"
-    pupa "^2.1.1"
-    semver "^7.3.4"
-    semver-diff "^3.1.1"
-    xdg-basedir "^4.0.0"
+    is-npm "^6.0.0"
+    is-yarn-global "^0.4.0"
+    latest-version "^7.0.0"
+    pupa "^3.1.0"
+    semver "^7.3.7"
+    semver-diff "^4.0.0"
+    xdg-basedir "^5.1.0"
 
 uri-js@^4.2.2:
   version "4.2.2"
@@ -12024,13 +12181,6 @@ url-loader@^1.1.2:
     mime "^2.0.3"
     schema-utils "^1.0.0"
 
-url-parse-lax@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/url-parse-lax/-/url-parse-lax-3.0.0.tgz#16b5cafc07dbe3676c1b1999177823d6503acb0c"
-  integrity sha1-FrXK/Afb42dsGxmZF3gj1lA6yww=
-  dependencies:
-    prepend-http "^2.0.0"
-
 url@^0.11.0:
   version "0.11.0"
   resolved "https://registry.yarnpkg.com/url/-/url-0.11.0.tgz#3838e97cfc60521eb73c525a8e55bfdd9e2e28f1"
@@ -12073,7 +12223,7 @@ uuid@^3.3.2:
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.3.3.tgz#4568f0216e78760ee1dbf3a4d2cf53e224112866"
   integrity sha512-pW0No1RGHgzlpHJO1nsVrHKpOEIxkGg1xB+v0ZmdNH5OAeAwzAVrCnI2/6Mtx+Uys6iaylxa+D3g4j63IKKjSQ==
 
-uuid@^8.3.0:
+uuid@^8.3.2:
   version "8.3.2"
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-8.3.2.tgz#80d5b5ced271bb9af6c445f21a1a04c606cefbe2"
   integrity sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==
@@ -12148,10 +12298,10 @@ walker@^1.0.7:
   dependencies:
     makeerror "1.0.x"
 
-watchpack@2.1.1:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-2.1.1.tgz#e99630550fca07df9f90a06056987baa40a689c7"
-  integrity sha512-Oo7LXCmc1eE1AjyuSBmtC3+Wy4HcV8PxWh2kP6fOl8yTlNS7r0K9l1ao2lrrUza7V39Y3D/BbJgY8VeSlc5JKw==
+watchpack@2.4.0:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-2.4.0.tgz#fa33032374962c78113f93c7f2fb4c54c9862a5d"
+  integrity sha512-Lcvm7MGST/4fup+ifyKi2hjyIAwcdI4HRgtvTpIUxBRhB+RFtUh8XtDOxUfctVCnhVi+QQj49i91OyvzkJl6cg==
   dependencies:
     glob-to-regexp "^0.4.1"
     graceful-fs "^4.1.2"
@@ -12172,40 +12322,40 @@ wcwidth@^1.0.0:
   dependencies:
     defaults "^1.0.3"
 
-web-ext@^6.8.0:
-  version "6.8.0"
-  resolved "https://registry.yarnpkg.com/web-ext/-/web-ext-6.8.0.tgz#bc8d1ee478a0a1444f48159e80d492f7bf2fb9fc"
-  integrity sha512-qZ3a4YVs0Vdqet44QRZEcNUQznkrfhsAkSOnZp57O4T4A9Bo3pamePSBeRqdPdJv9GF8ntKG84o3eV0MrEvLbw==
+web-ext@^7.1.1:
+  version "7.1.1"
+  resolved "https://registry.yarnpkg.com/web-ext/-/web-ext-7.1.1.tgz#c548b04753889f4f37764f3836e85ecb5a4d2cee"
+  integrity sha512-ehqPS8QHNKyAz6C1NBkDNbzWtuM9LfGMWF2WZx+9U1TCRdoLdZAqHhxF5hDwZFAPKkPW/iuQQ6r2qQiv7T3aYw==
   dependencies:
-    "@babel/runtime" "7.13.9"
-    "@devicefarmer/adbkit" "2.11.3"
-    addons-linter "4.14.0"
+    "@babel/runtime" "7.18.6"
+    "@devicefarmer/adbkit" "3.2.3"
+    addons-linter "5.10.0"
     bunyan "1.8.15"
-    camelcase "6.2.0"
-    chrome-launcher "0.15.0"
-    debounce "1.2.0"
-    decamelize "5.0.0"
+    camelcase "7.0.0"
+    chrome-launcher "0.15.1"
+    debounce "1.2.1"
+    decamelize "6.0.0"
     es6-error "4.1.1"
     firefox-profile "4.2.2"
-    fs-extra "9.1.0"
+    fs-extra "10.1.0"
     fx-runner "1.2.0"
     import-fresh "3.3.0"
     mkdirp "1.0.4"
-    multimatch "5.0.0"
+    multimatch "6.0.0"
     mz "2.7.0"
-    node-notifier "9.0.0"
-    open "7.4.2"
-    parse-json "5.2.0"
-    promise-toolbox "0.20.0"
-    sign-addon "3.11.0"
-    source-map-support "0.5.20"
-    strip-bom "4.0.0"
-    strip-json-comments "3.1.1"
+    node-notifier "10.0.1"
+    open "8.4.0"
+    parse-json "6.0.2"
+    promise-toolbox "0.21.0"
+    sign-addon "5.0.0"
+    source-map-support "0.5.21"
+    strip-bom "5.0.0"
+    strip-json-comments "4.0.0"
     tmp "0.2.1"
-    update-notifier "5.1.0"
-    watchpack "2.1.1"
-    ws "7.4.6"
-    yargs "16.2.0"
+    update-notifier "6.0.2"
+    watchpack "2.4.0"
+    ws "8.8.0"
+    yargs "17.5.1"
     zip-dir "2.0.0"
 
 webext-additional-permissions@^0.1.0:
@@ -12404,12 +12554,12 @@ wide-align@^1.1.0:
   dependencies:
     string-width "^1.0.2 || 2"
 
-widest-line@^3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/widest-line/-/widest-line-3.1.0.tgz#8292333bbf66cb45ff0de1603b136b7ae1496eca"
-  integrity sha512-NsmoXalsWVDMGupxZ5R08ka9flZjjiLvHVAWYOKtiKM8ujtZWr9cRffak+uSE48+Ob8ObalXpwyeUiyDD6QFgg==
+widest-line@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/widest-line/-/widest-line-4.0.1.tgz#a0fc673aaba1ea6f0a0d35b3c2795c9a9cc2ebf2"
+  integrity sha512-o0cyEG0e8GPzT4iGHphIOh0cJOV8fivsXxddQasHPHfoZf1ZexrfeA21w2NaEN1RHE+fXlfISmOE8R9N3u3Qig==
   dependencies:
-    string-width "^4.0.0"
+    string-width "^5.0.1"
 
 winreg@0.0.12:
   version "0.0.12"
@@ -12455,12 +12605,21 @@ wrap-ansi@^7.0.0:
     string-width "^4.1.0"
     strip-ansi "^6.0.0"
 
+wrap-ansi@^8.0.1:
+  version "8.0.1"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.0.1.tgz#2101e861777fec527d0ea90c57c6b03aac56a5b3"
+  integrity sha512-QFF+ufAqhoYHvoHdajT/Po7KoXVBPXS2bgjIam5isfWJPfIOnQZ50JtUiVvCv/sjgacf3yRrt2ZKUZ/V4itN4g==
+  dependencies:
+    ansi-styles "^6.1.0"
+    string-width "^5.0.1"
+    strip-ansi "^7.0.1"
+
 wrappy@1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
   integrity sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=
 
-write-file-atomic@^3.0.0:
+write-file-atomic@^3.0.0, write-file-atomic@^3.0.3:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/write-file-atomic/-/write-file-atomic-3.0.3.tgz#56bd5c5a5c70481cd19c571bd39ab965a5de56e8"
   integrity sha512-AvHcyZ5JnSfq3ioSyjrBkH9yW4m7Ayk8/9My/DD9onKeu/94fwrMocemO2QAJFAlnnDN+ZDS+ZjAR5ua1/PV/Q==
@@ -12475,6 +12634,11 @@ ws@7.4.6:
   resolved "https://registry.yarnpkg.com/ws/-/ws-7.4.6.tgz#5654ca8ecdeee47c33a9a4bf6d28e2be2980377c"
   integrity sha512-YmhHDO4MzaDLB+M9ym/mDA5z0naX8j7SIlT8f8z+I0VtzsRbekxEutHSme7NPS2qE8StCYQNUnfWdXta/Yu85A==
 
+ws@8.8.0:
+  version "8.8.0"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-8.8.0.tgz#8e71c75e2f6348dbf8d78005107297056cb77769"
+  integrity sha512-JDAgSYQ1ksuwqfChJusw1LSJ8BizJ2e/vVu5Lxjq3YvNJNlROv1ui4i+c/kUUrPheBvQl4c5UbERhTwKa6QBJQ==
+
 ws@^6.0.0:
   version "6.2.2"
   resolved "https://registry.yarnpkg.com/ws/-/ws-6.2.2.tgz#dd5cdbd57a9979916097652d78f1cc5faea0c32e"
@@ -12487,10 +12651,10 @@ ws@^7.4.5:
   resolved "https://registry.yarnpkg.com/ws/-/ws-7.5.1.tgz#44fc000d87edb1d9c53e51fbc69a0ac1f6871d66"
   integrity sha512-2c6faOUH/nhoQN6abwMloF7Iyl0ZS2E9HGtsiLrWn0zOOMWlhtDmdf/uihDt6jnuCxgtwGBNy6Onsoy2s2O2Ow==
 
-xdg-basedir@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/xdg-basedir/-/xdg-basedir-4.0.0.tgz#4bc8d9984403696225ef83a1573cbbcb4e79db13"
-  integrity sha512-PSNhEJDejZYV7h50BohL09Er9VaIefr2LMAf3OEmpCkjOi34eYyQYAXUTjEQtZJTKcF0E2UKTh+osDLsgNim9Q==
+xdg-basedir@^5.0.1, xdg-basedir@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/xdg-basedir/-/xdg-basedir-5.1.0.tgz#1efba19425e73be1bc6f2a6ceb52a3d2c884c0c9"
+  integrity sha512-GCPAHLvrIH13+c0SuacwvRYj2SxJXQ4kaVTT5xgL3kPrz56XxkF21IGhjSE1+W0aw7gpBWRGXLCPnPby6lSpmQ==
 
 xml-name-validator@^3.0.0:
   version "3.0.0"
@@ -12585,7 +12749,20 @@ yargs@13.2.4:
     y18n "^4.0.0"
     yargs-parser "^13.1.0"
 
-yargs@16.2.0, yargs@^16.0.3:
+yargs@17.5.1:
+  version "17.5.1"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-17.5.1.tgz#e109900cab6fcb7fd44b1d8249166feb0b36e58e"
+  integrity sha512-t6YAJcxDkNX7NFYiVtKvWUz8l+PaKTLiL63mJYWR2GnHq2gjEWISzsLp9wg3aY36dY1j+gfIEL3pIF+XlJJfbA==
+  dependencies:
+    cliui "^7.0.2"
+    escalade "^3.1.1"
+    get-caller-file "^2.0.5"
+    require-directory "^2.1.1"
+    string-width "^4.2.3"
+    y18n "^5.0.5"
+    yargs-parser "^21.0.0"
+
+yargs@^16.0.3:
   version "16.2.0"
   resolved "https://registry.yarnpkg.com/yargs/-/yargs-16.2.0.tgz#1c82bf0f6b6a66eafce7ef30e376f49a12477f66"
   integrity sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw==
@@ -12598,19 +12775,6 @@ yargs@16.2.0, yargs@^16.0.3:
     y18n "^5.0.5"
     yargs-parser "^20.2.2"
 
-yargs@17.4.0:
-  version "17.4.0"
-  resolved "https://registry.yarnpkg.com/yargs/-/yargs-17.4.0.tgz#9fc9efc96bd3aa2c1240446af28499f0e7593d00"
-  integrity sha512-WJudfrk81yWFSOkZYpAZx4Nt7V4xp7S/uJkX0CnxovMCt1wCE8LNftPpNuF9X/u9gN5nsD7ycYtRcDf2pL3UiA==
-  dependencies:
-    cliui "^7.0.2"
-    escalade "^3.1.1"
-    get-caller-file "^2.0.5"
-    require-directory "^2.1.1"
-    string-width "^4.2.3"
-    y18n "^5.0.5"
-    yargs-parser "^21.0.0"
-
 yauzl@2.10.0, yauzl@^2.10.0:
   version "2.10.0"
   resolved "https://registry.yarnpkg.com/yauzl/-/yauzl-2.10.0.tgz#c7eb17c93e112cb1086fa6d8e51fb0667b79a5f9"

From b62b488a0da4d2c299654f484681252965914e90 Mon Sep 17 00:00:00 2001
From: EnixCoda <enixcoda@gmail.com>
Date: Sat, 16 Jul 2022 23:55:09 +0800
Subject: [PATCH 88/93] chore: remove sentry env from code

---
 .env.example     | 6 +++---
 src/analytics.ts | 5 ++---
 src/env.ts       | 5 +++++
 3 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/.env.example b/.env.example
index 46da2aa..573962b 100644
--- a/.env.example
+++ b/.env.example
@@ -1,5 +1,5 @@
-# The client ID you received from GitHub for your GitHub App.
 GITHUB_OAUTH_CLIENT_ID=GITHUB_OAUTH_CLIENT_ID
-
-# The client secret you received from GitHub for your GitHub App.
 GITHUB_OAUTH_CLIENT_SECRET=GITHUB_OAUTH_CLIENT_SECRET
+
+SENTRY_PUBLIC_KEY=SENTRY_PUBLIC_KEY
+SENTRY_PROJECT_ID=SENTRY_PROJECT_ID
diff --git a/src/analytics.ts b/src/analytics.ts
index 4cecf7a..1d45259 100644
--- a/src/analytics.ts
+++ b/src/analytics.ts
@@ -1,11 +1,10 @@
 import * as Sentry from '@sentry/browser'
-import { IN_PRODUCTION_MODE, VERSION } from 'env'
+import { IN_PRODUCTION_MODE, SENTRY, VERSION } from 'env'
 import { platform } from 'platforms'
 import { atomicAsyncFunction, forOf } from 'utils/general'
 import { storageHelper, storageKeys } from 'utils/storageHelper'
 
-const PUBLIC_KEY = 'd22ec5c9cc874539a51c78388c12e3b0'
-const PROJECT_ID = '1406497'
+const { PUBLIC_KEY, PROJECT_ID } = SENTRY
 
 const MAX_REPORT_COUNT = 10 // prevent error overflow
 let countReportedError = 0
diff --git a/src/env.ts b/src/env.ts
index a013dc3..c35d219 100644
--- a/src/env.ts
+++ b/src/env.ts
@@ -9,3 +9,8 @@ export const GITEE_OAUTH = {
 }
 
 export const VERSION = process.env.VERSION
+
+export const SENTRY = {
+  PUBLIC_KEY: process.env.SENTRY_PUBLIC_KEY,
+  PROJECT_ID: process.env.SENTRY_PROJECT_ID,
+}

From 8fa1802555b7e5fe92fa6db41c13360b6bf03824 Mon Sep 17 00:00:00 2001
From: EnixCoda <enixcoda@gmail.com>
Date: Sat, 16 Jul 2022 23:56:24 +0800
Subject: [PATCH 89/93] chore: remove unused Gitee components

---
 src/platforms/Gitee/components.tsx | 47 ------------------------------
 1 file changed, 47 deletions(-)
 delete mode 100644 src/platforms/Gitee/components.tsx

diff --git a/src/platforms/Gitee/components.tsx b/src/platforms/Gitee/components.tsx
deleted file mode 100644
index bd4472a..0000000
--- a/src/platforms/Gitee/components.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import { GITEE_OAUTH } from 'env'
-import * as React from 'react'
-
-export function GiteeAccessDeniedError({ hasToken }: { hasToken: boolean }) {
-  return (
-    <div className={'description'}>
-      <h5>Access Denied</h5>
-      {hasToken ? (
-        <>
-          <p>
-            Current access token is either invalid or not granted with permissions to access this
-            project.
-          </p>
-          <p>
-            You can grant or request access{' '}
-            <a
-              href={`https://github.com/settings/connections/applications/${GITEE_OAUTH.clientId}`}
-            >
-              here
-            </a>{' '}
-            if you setup Gitako with OAuth.
-          </p>
-        </>
-      ) : (
-        <p>
-          Gitako needs access token to read this project due to{' '}
-          <a
-            href="https://developer.github.com/v3/#rate-limiting"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            GitHub rate limiting
-          </a>{' '}
-          and{' '}
-          <a
-            href="https://developer.github.com/v3/#authentication"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            auth needs
-          </a>
-          . Please setup access token in the settings panel below.
-        </p>
-      )}
-    </div>
-  )
-}

From b28c9e0fe893d44590aaf80122e41763c0263dce Mon Sep 17 00:00:00 2001
From: EnixCoda <enixcoda@gmail.com>
Date: Sun, 17 Jul 2022 00:01:21 +0800
Subject: [PATCH 90/93] fix: open PR in firefox

---
 src/platforms/GitHub/utils.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/platforms/GitHub/utils.ts b/src/platforms/GitHub/utils.ts
index 7c1a153..985cfa7 100644
--- a/src/platforms/GitHub/utils.ts
+++ b/src/platforms/GitHub/utils.ts
@@ -95,7 +95,8 @@ export async function continuousLoadPages(doc: Document, onReceivePage?: (doc: D
     if (!fragment) break
     const src = fragment.getAttribute('src')
     if (!src) break
-    doc = await getDOM(src)
+    // Using `src` directly below would fail in Firefox if the src is an absolute path
+    doc = await getDOM(new URL(src, window.location.origin).href)
     documents.push(doc)
     onReceivePage?.(doc)
   }

From 1d099d23b8590627a80ac008c0c6fb6b48c5d964 Mon Sep 17 00:00:00 2001
From: EnixCoda <enixcoda@gmail.com>
Date: Sun, 17 Jul 2022 00:41:17 +0800
Subject: [PATCH 91/93] feat: state inspector

---
 src/common.d.ts                   |  7 ++++
 src/components/Gitako.tsx         | 33 ++++++++++--------
 src/containers/ErrorContext.tsx   |  2 ++
 src/containers/SideBarState.tsx   |  2 ++
 src/containers/StateInspector.tsx | 58 +++++++++++++++++++++++++++++++
 5 files changed, 87 insertions(+), 15 deletions(-)
 create mode 100644 src/common.d.ts
 create mode 100644 src/containers/StateInspector.tsx

diff --git a/src/common.d.ts b/src/common.d.ts
new file mode 100644
index 0000000..eee4e97
--- /dev/null
+++ b/src/common.d.ts
@@ -0,0 +1,7 @@
+// Similar to `global.d.ts` but with import/export
+import { Dispatch, SetStateAction } from 'react'
+
+type ReactIO<T> = {
+  value: T
+  onChange: Dispatch<SetStateAction<T>>
+}
diff --git a/src/components/Gitako.tsx b/src/components/Gitako.tsx
index 8fc22db..a119218 100644
--- a/src/components/Gitako.tsx
+++ b/src/components/Gitako.tsx
@@ -1,6 +1,7 @@
 import { SideBar } from 'components/SideBar'
 import { ConfigsContextWrapper } from 'containers/ConfigsContext'
 import { ReloadContextWrapper } from 'containers/ReloadContext'
+import { InspectorContextWrapper } from 'containers/StateInspector'
 import * as React from 'react'
 import { ErrorBoundary } from '../containers/ErrorBoundary'
 import { StateBarErrorContextWrapper } from '../containers/ErrorContext'
@@ -10,20 +11,22 @@ import { StateBarStateContextWrapper } from '../containers/SideBarState'
 
 export function Gitako() {
   return (
-    <ReloadContextWrapper>
-      <ErrorBoundary>
-        <ConfigsContextWrapper>
-          <StateBarStateContextWrapper>
-            <StateBarErrorContextWrapper>
-              <OAuthWrapper>
-                <RepoContextWrapper>
-                  <SideBar />
-                </RepoContextWrapper>
-              </OAuthWrapper>
-            </StateBarErrorContextWrapper>
-          </StateBarStateContextWrapper>
-        </ConfigsContextWrapper>
-      </ErrorBoundary>
-    </ReloadContextWrapper>
+    <InspectorContextWrapper>
+      <ReloadContextWrapper>
+        <ErrorBoundary>
+          <ConfigsContextWrapper>
+            <StateBarStateContextWrapper>
+              <StateBarErrorContextWrapper>
+                <OAuthWrapper>
+                  <RepoContextWrapper>
+                    <SideBar />
+                  </RepoContextWrapper>
+                </OAuthWrapper>
+              </StateBarErrorContextWrapper>
+            </StateBarStateContextWrapper>
+          </ConfigsContextWrapper>
+        </ErrorBoundary>
+      </ReloadContextWrapper>
+    </InspectorContextWrapper>
   )
 }
diff --git a/src/containers/ErrorContext.tsx b/src/containers/ErrorContext.tsx
index 53d9455..01c3c7a 100644
--- a/src/containers/ErrorContext.tsx
+++ b/src/containers/ErrorContext.tsx
@@ -1,3 +1,4 @@
+import { useInspector } from 'containers/StateInspector'
 import * as React from 'react'
 import { useStateIO } from 'utils/hooks/useStateIO'
 
@@ -7,6 +8,7 @@ export const SideBarErrorContext = React.createContext<SideBarErrorContextShape
 
 export function StateBarErrorContextWrapper({ children }: React.PropsWithChildren<{}>) {
   const $error = useStateIO<string | null>(null)
+  useInspector('SideBarErrorContext', $error.value)
 
   return <SideBarErrorContext.Provider value={$error}>{children}</SideBarErrorContext.Provider>
 }
diff --git a/src/containers/SideBarState.tsx b/src/containers/SideBarState.tsx
index 815a122..8b1ba9d 100644
--- a/src/containers/SideBarState.tsx
+++ b/src/containers/SideBarState.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react'
 import { useStateIO } from 'utils/hooks/useStateIO'
+import { useInspector } from './StateInspector'
 
 export type SideBarState =
   | 'disabled'
@@ -19,6 +20,7 @@ export const SideBarStateContext = React.createContext<SideBarStateContextShape
 
 export function StateBarStateContextWrapper({ children }: React.PropsWithChildren<{}>) {
   const $state = useStateIO<SideBarState>('disabled')
+  useInspector('SideBarStateContext', $state.value)
 
   return (
     <SideBarStateContext.Provider value={$state}>
diff --git a/src/containers/StateInspector.tsx b/src/containers/StateInspector.tsx
new file mode 100644
index 0000000..3591642
--- /dev/null
+++ b/src/containers/StateInspector.tsx
@@ -0,0 +1,58 @@
+import { ReactIO } from 'common'
+import { IN_PRODUCTION_MODE } from 'env'
+import * as React from 'react'
+import { useStateIO } from 'utils/hooks/useStateIO'
+
+export type InspectorContextShape = ReactIO<JSONObject>
+
+export const InspectorContext = React.createContext<InspectorContextShape | null>(null)
+
+export const InspectorContextWrapper = IN_PRODUCTION_MODE
+  ? React.Fragment
+  : function InspectorContextWrapper({ children }: React.PropsWithChildren<{}>) {
+      const $ = useStateIO<JSONObject>({})
+      const [show, setShow] = React.useState(true)
+
+      return (
+        <InspectorContext.Provider value={$}>
+          {show ? (
+            <div
+              style={{
+                position: 'fixed',
+                top: '0',
+                right: '0',
+                height: '100vh',
+                width: '360px',
+                overflow: 'auto',
+                background: 'rgba(255, 255, 255, 0.75)',
+                display: 'flex',
+                flexDirection: 'column',
+              }}
+            >
+              <pre style={{ flex: 1 }}>{JSON.stringify($.value, null, 2)}</pre>
+              <div>
+                <button onClick={() => setShow(false)}>❌</button>
+              </div>
+            </div>
+          ) : (
+            <div
+              style={{
+                position: 'fixed',
+                bottom: '0',
+                right: '0',
+              }}
+            >
+              <button onClick={() => setShow(true)}>🔎</button>
+            </div>
+          )}
+          {children}
+        </InspectorContext.Provider>
+      )
+    }
+
+export function useInspector(key: string, value: JSONValue) {
+  const $ = React.useContext(InspectorContext)
+  React.useEffect(() => {
+    $?.onChange(prev => ({ ...prev, [key]: value }))
+  }, [key, value]) // eslint-disable-line react-hooks/exhaustive-deps
+}

From ae3b7cc66ea3fde59805db1a7246ae1df4da01ee Mon Sep 17 00:00:00 2001
From: EnixCoda <enixcoda@gmail.com>
Date: Sun, 17 Jul 2022 00:58:08 +0800
Subject: [PATCH 92/93] fix: assure body indent after redirect

---
 src/components/SideBar.tsx | 26 ++++++++++++++++++--------
 1 file changed, 18 insertions(+), 8 deletions(-)

diff --git a/src/components/SideBar.tsx b/src/components/SideBar.tsx
index ea50216..48e010a 100644
--- a/src/components/SideBar.tsx
+++ b/src/components/SideBar.tsx
@@ -10,6 +10,7 @@ import { platform } from 'platforms'
 import * as React from 'react'
 import { IIFC } from 'react-iifc'
 import { useWindowSize } from 'react-use'
+import { Config } from 'utils/config/helper'
 import { cx } from 'utils/cx'
 import * as DOMHelper from 'utils/DOMHelper'
 import * as features from 'utils/features'
@@ -179,15 +180,20 @@ function useUpdateBodyIndentOnStateUpdate(shouldExpand: boolean) {
   }, [sidebarToggleMode, shouldExpand])
 }
 
+const getDerivedExpansion = ({
+  intelligentToggle,
+  sidebarToggleMode,
+}: Pick<Config, 'intelligentToggle' | 'sidebarToggleMode'>) =>
+  sidebarToggleMode === 'persistent'
+    ? intelligentToggle === null // auto-expand checked
+      ? platform.shouldExpandSideBar()
+      : intelligentToggle // read saved expand state
+    : false // do not expand in float mode
+
 function useGetDerivedExpansion() {
   const { intelligentToggle, sidebarToggleMode } = useConfigs().value
   return React.useCallback(
-    () =>
-      sidebarToggleMode === 'persistent'
-        ? intelligentToggle === null // auto-expand checked
-          ? platform.shouldExpandSideBar()
-          : intelligentToggle // read saved expand state
-        : false, // do not expand in float mode
+    () => getDerivedExpansion({ intelligentToggle, sidebarToggleMode }),
     [intelligentToggle, sidebarToggleMode],
   )
 }
@@ -197,8 +203,12 @@ function useUpdateBodyIndentOnPJAXDone(update: (shouldExpand: boolean) => void)
   useOnPJAXDone(
     React.useCallback(() => {
       // check and update expand state if pinned and auto-expand checked
-      if (sidebarToggleMode === 'persistent' && intelligentToggle === null)
-        update(platform.shouldExpandSideBar())
+      if (sidebarToggleMode === 'persistent') {
+        const shouldExpand = getDerivedExpansion({ intelligentToggle, sidebarToggleMode })
+        update(shouldExpand)
+        // Below DOM mutation cannot be omitted, if do, body indent may get lost when shouldExpand is true for both before & after redirecting
+        DOMHelper.setBodyIndent(shouldExpand)
+      }
     }, [update, sidebarToggleMode, intelligentToggle]),
   )
 }

From bb51a1fa0614c1c3f36da2e8de351c86dce88c9a Mon Sep 17 00:00:00 2001
From: EnixCoda <enixcoda@gmail.com>
Date: Sun, 17 Jul 2022 01:43:25 +0800
Subject: [PATCH 93/93] chore: rename pjax

---
 .../cases/non-parallel/pjax.commits-page.ts   |  4 +--
 .../cases/non-parallel/pjax.files-page.ts     |  8 +++--
 __tests__/cases/non-parallel/pjax.general.ts  |  9 +++--
 __tests__/cases/non-parallel/pjax.internal.ts |  7 ++--
 .../cases/non-parallel/project-page.gitako.ts |  4 +--
 __tests__/cases/parallel/expand-to-target.ts  |  6 ++--
 __tests__/utils.ts                            | 18 ++++++++++
 src/components/FileExplorer/Node.tsx          |  2 +-
 .../FileExplorer/hooks/useHandleKeyDown.tsx   |  6 ++--
 .../FileExplorer/hooks/useOnNodeClick.tsx     |  4 +--
 src/components/FileExplorer/index.tsx         |  4 +--
 src/components/Gitako.tsx                     | 34 +++++++++++--------
 src/components/MetaBar.tsx                    |  4 +--
 src/components/SideBar.tsx                    | 10 +++---
 src/components/SideBarResizeHandler.tsx       |  4 +--
 src/containers/RepoContext.tsx                |  6 ++--
 src/platforms/GitHub/API.ts                   |  4 +--
 .../hooks/useGitHubAttachCopyFileButton.ts    |  4 +--
 .../hooks/useGitHubAttachCopySnippetButton.ts |  4 +--
 .../GitHub/hooks/useGitHubCodeFold.tsx        |  4 +--
 src/platforms/GitHub/index.ts                 |  4 +--
 src/platforms/Gitee/index.ts                  |  4 +--
 src/platforms/platform.d.ts                   |  4 +--
 src/utils/createAnchorClickHandler.ts         |  4 +--
 .../hooks/{usePJAX.ts => useFastRedirect.ts}  | 13 +++----
 src/utils/hooks/useProgressBar.ts             |  1 -
 26 files changed, 97 insertions(+), 79 deletions(-)
 rename src/utils/hooks/{usePJAX.ts => useFastRedirect.ts} (84%)

diff --git a/__tests__/cases/non-parallel/pjax.commits-page.ts b/__tests__/cases/non-parallel/pjax.commits-page.ts
index a719005..17632a1 100644
--- a/__tests__/cases/non-parallel/pjax.commits-page.ts
+++ b/__tests__/cases/non-parallel/pjax.commits-page.ts
@@ -1,4 +1,4 @@
-import { expectToFind, expectToNotFind, sleep, waitForLegacyPJAXRedirect } from '../../utils'
+import { expectToFind, expectToNotFind, sleep, waitForRedirect } from '../../utils'
 
 describe(`in Gitako project page`, () => {
   beforeAll(() => page.goto('https://github.com/EnixCoda/Gitako/commits/develop'))
@@ -10,7 +10,7 @@ describe(`in Gitako project page`, () => {
       )
       if (commitLinks.length < 2) throw new Error(`No enough commits`)
       commitLinks[i].click()
-      await waitForLegacyPJAXRedirect()
+      await waitForRedirect()
       await expectToFind('div.commit')
       await sleep(1000)
 
diff --git a/__tests__/cases/non-parallel/pjax.files-page.ts b/__tests__/cases/non-parallel/pjax.files-page.ts
index bfe72bb..7415333 100644
--- a/__tests__/cases/non-parallel/pjax.files-page.ts
+++ b/__tests__/cases/non-parallel/pjax.files-page.ts
@@ -1,4 +1,8 @@
-import { expectToFind, expectToNotFind, sleep, waitForLegacyPJAXRedirect } from '../../utils'
+import {
+  expectToFind,
+  expectToNotFind,
+  sleep, waitForRedirect
+} from '../../utils'
 
 describe(`in Gitako project page`, () => {
   beforeAll(() => page.goto('https://github.com/EnixCoda/Gitako/tree/develop/src'))
@@ -9,7 +13,7 @@ describe(`in Gitako project page`, () => {
         `.js-details-container div[role="row"] div[role="rowheader"] a[title*="."]`,
       )
       if (commitLinks.length < 2) throw new Error(`No enough files`)
-      await waitForLegacyPJAXRedirect(async () => {
+      await waitForRedirect(async () => {
         await commitLinks[i].click()
       })
       await expectToFind('table.js-file-line-container')
diff --git a/__tests__/cases/non-parallel/pjax.general.ts b/__tests__/cases/non-parallel/pjax.general.ts
index 993d3d8..50ad411 100644
--- a/__tests__/cases/non-parallel/pjax.general.ts
+++ b/__tests__/cases/non-parallel/pjax.general.ts
@@ -3,8 +3,7 @@ import {
   expandFloatModeSidebar,
   patientClick,
   selectFileTreeItem,
-  sleep,
-  waitForLegacyPJAXRedirect,
+  sleep, waitForRedirect
 } from '../../utils'
 
 describe(`in Gitako project page`, () => {
@@ -15,14 +14,14 @@ describe(`in Gitako project page`, () => {
 
     await expandFloatModeSidebar()
     await patientClick(selectFileTreeItem('src/analytics.ts'))
-    await waitForLegacyPJAXRedirect()
+    await waitForRedirect()
     await collapseFloatModeSidebar()
 
     await page.click('a[data-selected-links^="repo_issues "]')
-    await waitForLegacyPJAXRedirect()
+    await waitForRedirect()
 
     await page.click('a[data-selected-links^="repo_pulls "]')
-    await waitForLegacyPJAXRedirect()
+    await waitForRedirect()
 
     page.goBack()
     await sleep(1000)
diff --git a/__tests__/cases/non-parallel/pjax.internal.ts b/__tests__/cases/non-parallel/pjax.internal.ts
index 63f6988..af2e1fe 100644
--- a/__tests__/cases/non-parallel/pjax.internal.ts
+++ b/__tests__/cases/non-parallel/pjax.internal.ts
@@ -4,8 +4,7 @@ import {
   expectToNotFind,
   patientClick,
   selectFileTreeItem,
-  sleep,
-  waitForLegacyPJAXRedirect,
+  sleep, waitForRedirect
 } from '../../utils'
 
 describe(`in Gitako project page`, () => {
@@ -16,12 +15,12 @@ describe(`in Gitako project page`, () => {
 
     await expandFloatModeSidebar()
     await patientClick(selectFileTreeItem('.babelrc'))
-    await waitForLegacyPJAXRedirect()
+    await waitForRedirect()
 
     // The selector for file content
     await expectToFind('table.js-file-line-container')
 
-    await waitForLegacyPJAXRedirect(async () => {
+    await waitForRedirect(async () => {
       await sleep(1000) // This prevents failing in some cases due to some mystery scheduling issue of puppeteer or jest
       page.goBack()
     })
diff --git a/__tests__/cases/non-parallel/project-page.gitako.ts b/__tests__/cases/non-parallel/project-page.gitako.ts
index d00769a..f4dc902 100644
--- a/__tests__/cases/non-parallel/project-page.gitako.ts
+++ b/__tests__/cases/non-parallel/project-page.gitako.ts
@@ -3,7 +3,7 @@ import {
   expectToFind,
   expectToNotFind,
   scroll,
-  selectFileTreeItem,
+  selectFileTreeItem
 } from '../../utils'
 
 describe(`in Gitako project page`, () => {
@@ -28,7 +28,7 @@ describe(`in Gitako project page`, () => {
     const box = await filesEle?.boundingBox()
     if (box) {
       await page.mouse.move(box.x + 40, box.y + 40)
-      await scroll({ totalDistance: 7000, stepDistance: 100 })
+      await scroll({ totalDistance: 10000, stepDistance: 100 })
 
       // node of tsconfig.json should be rendered now
       await expectToFind(selectFileTreeItem('tsconfig.json'))
diff --git a/__tests__/cases/parallel/expand-to-target.ts b/__tests__/cases/parallel/expand-to-target.ts
index 519addd..9f5895e 100644
--- a/__tests__/cases/parallel/expand-to-target.ts
+++ b/__tests__/cases/parallel/expand-to-target.ts
@@ -1,9 +1,9 @@
-import { expectToFind, selectFileTreeItem, sleep, waitForLegacyPJAXRedirect } from '../../utils'
+import { expectToFind, selectFileTreeItem, sleep, waitForRedirect } from '../../utils'
 
 describe(`in Gitako project page`, () => {
   beforeAll(() => page.goto('https://github.com/EnixCoda/Gitako/tree/develop/src'))
 
-  it('expand to target on load and after PJAX', async () => {
+  it('expand to target on load and after redirect', async () => {
     await sleep(3000)
 
     // Expect Gitako sidebar to have expanded src to see contents
@@ -12,7 +12,7 @@ describe(`in Gitako project page`, () => {
     await page.click(
       `.js-details-container div[role="row"] div[role="rowheader"] [title="components"]`,
     )
-    await waitForLegacyPJAXRedirect()
+    await waitForRedirect()
 
     // Expect Gitako sidebar to have expanded components and see contents
     await expectToFind(selectFileTreeItem('src/components/Gitako.tsx'))
diff --git a/__tests__/utils.ts b/__tests__/utils.ts
index 4910897..49d46b6 100644
--- a/__tests__/utils.ts
+++ b/__tests__/utils.ts
@@ -71,6 +71,24 @@ export async function waitForLegacyPJAXRedirect(action?: () => void | Promise<vo
   return promise
 }
 
+export async function waitForTurboRedirect(action?: () => void | Promise<void>) {
+  const promise = once('turbo:load', 'document')
+  await action?.()
+  return promise
+}
+
+export async function waitForRedirect(action?: () => void | Promise<void>) {
+  let fired = false
+  const $action =
+    action &&
+    (() => {
+      if (fired) return
+      fired = true
+      return action()
+    })
+  return Promise.race([waitForLegacyPJAXRedirect($action), waitForTurboRedirect($action)])
+}
+
 export function selectFileTreeItem(path: string): string {
   return `.gitako-side-bar .files a[title="${path}"]`
 }
diff --git a/src/components/FileExplorer/Node.tsx b/src/components/FileExplorer/Node.tsx
index 5d07670..be7a443 100644
--- a/src/components/FileExplorer/Node.tsx
+++ b/src/components/FileExplorer/Node.tsx
@@ -52,7 +52,7 @@ export const Node = React.memo(function Node({
       title={node.path}
       target={node.type === 'commit' ? '_blank' : undefined}
       rel="noopener noreferrer"
-      {...platform.delegatePJAXProps?.({ node })}
+      {...platform.delegateFastRedirectAnchorProps?.({ node })}
     >
       <div className={'node-item-label'}>
         <NodeItemIcon node={node} open={expanded} loading={loading} />
diff --git a/src/components/FileExplorer/hooks/useHandleKeyDown.tsx b/src/components/FileExplorer/hooks/useHandleKeyDown.tsx
index 7532e52..c1fdec4 100644
--- a/src/components/FileExplorer/hooks/useHandleKeyDown.tsx
+++ b/src/components/FileExplorer/hooks/useHandleKeyDown.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import * as DOMHelper from 'utils/DOMHelper'
 import { OperatingSystems, os } from 'utils/general'
-import { loadWithPJAX } from 'utils/hooks/usePJAX'
+import { loadWithFastRedirect } from 'utils/hooks/useFastRedirect'
 import { VisibleNodes } from 'utils/VisibleNodesGenerator'
 import { AlignMode } from '../useVirtualScroll'
 import { VisibleNodesGeneratorMethods } from './useVisibleNodesGeneratorMethods'
@@ -100,7 +100,7 @@ export function useHandleKeyDown(
             } else if (focusedNode.type === 'blob') {
               const focusedNodeElement = DOMHelper.findNodeElement(focusedNode, event.currentTarget)
               if (focusedNodeElement && focusedNode.url)
-                loadWithPJAX(focusedNode.url, focusedNodeElement)
+                loadWithFastRedirect(focusedNode.url, focusedNodeElement)
             } else if (focusedNode.type === 'commit') {
               window.open(focusedNode.url)
             }
@@ -119,7 +119,7 @@ export function useHandleKeyDown(
                   event.currentTarget,
                 )
                 if (focusedNodeElement && focusedNode.url)
-                  loadWithPJAX(focusedNode.url, focusedNodeElement)
+                  loadWithFastRedirect(focusedNode.url, focusedNodeElement)
               } else if (focusedNode.type === 'commit') {
                 window.open(focusedNode.url)
               }
diff --git a/src/components/FileExplorer/hooks/useOnNodeClick.tsx b/src/components/FileExplorer/hooks/useOnNodeClick.tsx
index 84a8996..aa00538 100644
--- a/src/components/FileExplorer/hooks/useOnNodeClick.tsx
+++ b/src/components/FileExplorer/hooks/useOnNodeClick.tsx
@@ -1,7 +1,7 @@
 import { useConfigs } from 'containers/ConfigsContext'
 import * as React from 'react'
 import { isOpenInNewWindowClick } from 'utils/general'
-import { loadWithPJAX } from 'utils/hooks/usePJAX'
+import { loadWithFastRedirect } from 'utils/hooks/useFastRedirect'
 import { AlignMode } from '../useVirtualScroll'
 import { VisibleNodesGeneratorMethods } from './useVisibleNodesGeneratorMethods'
 
@@ -35,7 +35,7 @@ export function useHandleNodeClick(
             const isHashLink = node.url.includes('#')
             if (!isHashLink) {
               event.preventDefault()
-              loadWithPJAX(node.url, event.currentTarget)
+              loadWithFastRedirect(node.url, event.currentTarget)
             }
           }
           break
diff --git a/src/components/FileExplorer/index.tsx b/src/components/FileExplorer/index.tsx
index d5f3e10..e6d1f43 100644
--- a/src/components/FileExplorer/index.tsx
+++ b/src/components/FileExplorer/index.tsx
@@ -9,9 +9,9 @@ import { usePrevious } from 'react-use'
 import { cx } from 'utils/cx'
 import { run } from 'utils/general'
 import { useElementSize } from 'utils/hooks/useElementSize'
+import { useAfterRedirect } from 'utils/hooks/useFastRedirect'
 import { useLoadedContext } from 'utils/hooks/useLoadedContext'
 import { useOnLocationChange } from 'utils/hooks/useOnLocationChange'
-import { useOnPJAXDone } from 'utils/hooks/usePJAX'
 import { VisibleNodes, VisibleNodesGenerator } from 'utils/VisibleNodesGenerator'
 import { SideBarStateContext } from '../../containers/SideBarState'
 import { useFocusFileExplorerOnFirstRender } from './hooks/useFocusFileExplorerOnFirstRender'
@@ -161,7 +161,7 @@ function LoadedFileExplorer({
   }, [metaData.branchName, expandTo])
 
   useOnLocationChange(goToCurrentItem)
-  useOnPJAXDone(goToCurrentItem)
+  useAfterRedirect(goToCurrentItem)
 
   return (
     <div className={`file-explorer`} tabIndex={-1} onKeyDown={handleKeyDown}>
diff --git a/src/components/Gitako.tsx b/src/components/Gitako.tsx
index a119218..b3ce0ad 100644
--- a/src/components/Gitako.tsx
+++ b/src/components/Gitako.tsx
@@ -3,6 +3,8 @@ import { ConfigsContextWrapper } from 'containers/ConfigsContext'
 import { ReloadContextWrapper } from 'containers/ReloadContext'
 import { InspectorContextWrapper } from 'containers/StateInspector'
 import * as React from 'react'
+import { StyleSheetManager } from 'styled-components'
+import { insertMountPoint } from 'utils/DOMHelper'
 import { ErrorBoundary } from '../containers/ErrorBoundary'
 import { StateBarErrorContextWrapper } from '../containers/ErrorContext'
 import { OAuthWrapper } from '../containers/OAuthWrapper'
@@ -12,21 +14,23 @@ import { StateBarStateContextWrapper } from '../containers/SideBarState'
 export function Gitako() {
   return (
     <InspectorContextWrapper>
-      <ReloadContextWrapper>
-        <ErrorBoundary>
-          <ConfigsContextWrapper>
-            <StateBarStateContextWrapper>
-              <StateBarErrorContextWrapper>
-                <OAuthWrapper>
-                  <RepoContextWrapper>
-                    <SideBar />
-                  </RepoContextWrapper>
-                </OAuthWrapper>
-              </StateBarErrorContextWrapper>
-            </StateBarStateContextWrapper>
-          </ConfigsContextWrapper>
-        </ErrorBoundary>
-      </ReloadContextWrapper>
+      <StyleSheetManager target={insertMountPoint()}>
+        <ReloadContextWrapper>
+          <ErrorBoundary>
+            <ConfigsContextWrapper>
+              <StateBarStateContextWrapper>
+                <StateBarErrorContextWrapper>
+                  <OAuthWrapper>
+                    <RepoContextWrapper>
+                      <SideBar />
+                    </RepoContextWrapper>
+                  </OAuthWrapper>
+                </StateBarErrorContextWrapper>
+              </StateBarStateContextWrapper>
+            </ConfigsContextWrapper>
+          </ErrorBoundary>
+        </ReloadContextWrapper>
+      </StyleSheetManager>
     </InspectorContextWrapper>
   )
 }
diff --git a/src/components/MetaBar.tsx b/src/components/MetaBar.tsx
index ae31309..3272b2e 100644
--- a/src/components/MetaBar.tsx
+++ b/src/components/MetaBar.tsx
@@ -21,7 +21,7 @@ export function MetaBar() {
           className={'repo-name'}
           href={repoUrl}
           onClick={createAnchorClickHandler(repoUrl)}
-          {...platform.delegatePJAXProps?.()}
+          {...platform.delegateFastRedirectAnchorProps?.()}
         >
           <Text fontWeight="bolder">{repoName}</Text>
         </Breadcrumbs.Item>
@@ -37,7 +37,7 @@ export function MetaBar() {
           sx={{
             color: 'fg.muted',
           }}
-          {...platform.delegatePJAXProps?.()}
+          {...platform.delegateFastRedirectAnchorProps?.()}
         >
           {branchName || '...'}
         </BranchName>
diff --git a/src/components/SideBar.tsx b/src/components/SideBar.tsx
index 48e010a..ff974f0 100644
--- a/src/components/SideBar.tsx
+++ b/src/components/SideBar.tsx
@@ -16,8 +16,8 @@ import * as DOMHelper from 'utils/DOMHelper'
 import * as features from 'utils/features'
 import { detectBrowser } from 'utils/general'
 import { useConditionalHook } from 'utils/hooks/useConditionalHook'
+import { useAfterRedirect, usePJAXAPI } from 'utils/hooks/useFastRedirect'
 import { useLoadedContext } from 'utils/hooks/useLoadedContext'
-import { useOnPJAXDone, usePJAX } from 'utils/hooks/usePJAX'
 import { ResizeState } from 'utils/hooks/useResizeHandler'
 import * as keyHelper from 'utils/keyHelper'
 import { SideBarErrorContext } from '../containers/ErrorContext'
@@ -29,7 +29,7 @@ import { SettingsBarContent } from './settings/SettingsBar'
 import { SideBarResizeHandler } from './SideBarResizeHandler'
 
 export function SideBar() {
-  usePJAX()
+  usePJAXAPI()
   platform.usePlatformHooks?.()
   useMarkGitakoReadyState()
 
@@ -198,9 +198,9 @@ function useGetDerivedExpansion() {
   )
 }
 
-function useUpdateBodyIndentOnPJAXDone(update: (shouldExpand: boolean) => void) {
+function useUpdateBodyIndentAfterRedirect(update: (shouldExpand: boolean) => void) {
   const { intelligentToggle, sidebarToggleMode } = useConfigs().value
-  useOnPJAXDone(
+  useAfterRedirect(
     React.useCallback(() => {
       // check and update expand state if pinned and auto-expand checked
       if (sidebarToggleMode === 'persistent') {
@@ -266,7 +266,7 @@ function useShouldExpand() {
 
   useSaveExpandStateOnToggle(shouldExpand)
   useUpdateBodyIndentOnStateUpdate(shouldExpand)
-  useUpdateBodyIndentOnPJAXDone(setShouldExpand)
+  useUpdateBodyIndentAfterRedirect(setShouldExpand)
   useToggleSideBarWithKeyboard(toggleShowSideBar)
   useCollapseOnNoPermissionWhenTokenHasBeenSet(setShouldExpand)
 
diff --git a/src/components/SideBarResizeHandler.tsx b/src/components/SideBarResizeHandler.tsx
index 83a0383..1d73ec5 100644
--- a/src/components/SideBarResizeHandler.tsx
+++ b/src/components/SideBarResizeHandler.tsx
@@ -3,7 +3,7 @@ import * as React from 'react'
 import { useDebounce, useWindowSize } from 'react-use'
 import { getDefaultConfigs } from 'utils/config/helper'
 import * as DOMHelper from 'utils/DOMHelper'
-import { useOnPJAXDone } from 'utils/hooks/usePJAX'
+import { useAfterRedirect } from 'utils/hooks/useFastRedirect'
 import { ResizeHandler } from './ResizeHandler'
 import { Size, Size2D } from './Size'
 
@@ -37,7 +37,7 @@ function useSidebarWidth() {
   React.useLayoutEffect(() => DOMHelper.setGitakoWidthCSSVariable(width), [width])
 
   // Keep variable when directing from PR to repo home via meta bar
-  useOnPJAXDone(React.useCallback(() => DOMHelper.setGitakoWidthCSSVariable(width), [width]))
+  useAfterRedirect(React.useCallback(() => DOMHelper.setGitakoWidthCSSVariable(width), [width]))
 
   return [width, setWidth] as const
 }
diff --git a/src/containers/RepoContext.tsx b/src/containers/RepoContext.tsx
index 9d40014..8b3fa64 100644
--- a/src/containers/RepoContext.tsx
+++ b/src/containers/RepoContext.tsx
@@ -2,8 +2,8 @@ import { useConfigs } from 'containers/ConfigsContext'
 import { platform } from 'platforms'
 import * as React from 'react'
 import { useEffectOnSerializableUpdates } from 'utils/hooks/useEffectOnSerializableUpdates'
+import { useAfterRedirect } from 'utils/hooks/useFastRedirect'
 import { useLoadedContext } from 'utils/hooks/useLoadedContext'
-import { useOnPJAXDone } from 'utils/hooks/usePJAX'
 import { useStateIO } from 'utils/hooks/useStateIO'
 import { useCatchNetworkError } from '../utils/hooks/useCatchNetworkError'
 import { SideBarStateContext } from './SideBarState'
@@ -47,7 +47,7 @@ function usePartialMetaData(): PartialMetaData | null {
   React.useEffect(() => {
     if (!isGettingAccessToken) setPartialMetaData()
   }, [isGettingAccessToken, setPartialMetaData])
-  useOnPJAXDone(setPartialMetaData)
+  useAfterRedirect(setPartialMetaData)
   useEffectOnSerializableUpdates(
     $partialMetaData.value,
     JSON.stringify,
@@ -64,7 +64,7 @@ function usePartialMetaData(): PartialMetaData | null {
 function useBranchName(): MetaData['branchName'] | null {
   // sync along URL and DOM
   const $branchName = useStateIO(() => platform.resolvePartialMetaData()?.branchName || null)
-  useOnPJAXDone(() => $branchName.onChange(platform.resolvePartialMetaData()?.branchName || null))
+  useAfterRedirect(() => $branchName.onChange(platform.resolvePartialMetaData()?.branchName || null))
   return $branchName.value
 }
 
diff --git a/src/platforms/GitHub/API.ts b/src/platforms/GitHub/API.ts
index 073e264..7dbf825 100644
--- a/src/platforms/GitHub/API.ts
+++ b/src/platforms/GitHub/API.ts
@@ -149,9 +149,7 @@ export async function getPullPageDocuments(
   // Response of this API contains view of few files but is not complete.
   return continuousLoadPages(
     document ||
-      (await getDOM(
-        `${window.location.origin}/${userName}/${repoName}/pull/${pullId}/files?_pjax=%23js-repo-pjax-container`,
-      )),
+      (await getDOM(`${window.location.origin}/${userName}/${repoName}/pull/${pullId}/files`)),
   )
 }
 
diff --git a/src/platforms/GitHub/hooks/useGitHubAttachCopyFileButton.ts b/src/platforms/GitHub/hooks/useGitHubAttachCopyFileButton.ts
index d911923..e2bc04c 100644
--- a/src/platforms/GitHub/hooks/useGitHubAttachCopyFileButton.ts
+++ b/src/platforms/GitHub/hooks/useGitHubAttachCopyFileButton.ts
@@ -1,6 +1,6 @@
 import { platform } from 'platforms'
 import * as React from 'react'
-import { useOnPJAXDone } from 'utils/hooks/usePJAX'
+import { useAfterRedirect } from 'utils/hooks/useFastRedirect'
 import * as DOMHelper from '../DOMHelper'
 import { GitHub } from '../index'
 
@@ -12,5 +12,5 @@ export function useGitHubAttachCopyFileButton(copyFileButton: boolean) {
     [copyFileButton],
   )
   React.useEffect(attachCopyFileButton, [attachCopyFileButton])
-  useOnPJAXDone(attachCopyFileButton)
+  useAfterRedirect(attachCopyFileButton)
 }
diff --git a/src/platforms/GitHub/hooks/useGitHubAttachCopySnippetButton.ts b/src/platforms/GitHub/hooks/useGitHubAttachCopySnippetButton.ts
index 6d0926b..55e0c6c 100644
--- a/src/platforms/GitHub/hooks/useGitHubAttachCopySnippetButton.ts
+++ b/src/platforms/GitHub/hooks/useGitHubAttachCopySnippetButton.ts
@@ -1,6 +1,6 @@
 import { platform } from 'platforms'
 import * as React from 'react'
-import { useOnPJAXDone } from 'utils/hooks/usePJAX'
+import { useAfterRedirect } from 'utils/hooks/useFastRedirect'
 import * as DOMHelper from '../DOMHelper'
 import { GitHub } from '../index'
 
@@ -12,5 +12,5 @@ export function useGitHubAttachCopySnippetButton(copySnippetButton: boolean) {
     [copySnippetButton],
   )
   React.useEffect(attachCopySnippetButton, [attachCopySnippetButton])
-  useOnPJAXDone(attachCopySnippetButton)
+  useAfterRedirect(attachCopySnippetButton)
 }
diff --git a/src/platforms/GitHub/hooks/useGitHubCodeFold.tsx b/src/platforms/GitHub/hooks/useGitHubCodeFold.tsx
index 9d6a4e3..665e579 100644
--- a/src/platforms/GitHub/hooks/useGitHubCodeFold.tsx
+++ b/src/platforms/GitHub/hooks/useGitHubCodeFold.tsx
@@ -1,6 +1,6 @@
 import { platform } from 'platforms'
 import { useCallback, useEffect } from 'react'
-import { useOnPJAXDone } from 'utils/hooks/usePJAX'
+import { useAfterRedirect } from 'utils/hooks/useFastRedirect'
 import { GitHub } from '..'
 
 const theCSSClassMark = 'gitako-code-fold-attached'
@@ -164,5 +164,5 @@ export function useGitHubCodeFold(active: boolean) {
     }
   }, [active])
   useEffect(effect, [effect])
-  useOnPJAXDone(effect)
+  useAfterRedirect(effect)
 }
diff --git a/src/platforms/GitHub/index.ts b/src/platforms/GitHub/index.ts
index 335dd7c..e1d0c14 100644
--- a/src/platforms/GitHub/index.ts
+++ b/src/platforms/GitHub/index.ts
@@ -209,7 +209,7 @@ export const GitHub: Platform = {
     useGitHubCodeFold(codeFolding)
     useEnterpriseStatBarStyleFix()
   },
-  delegatePJAXProps: options => {
+  delegateFastRedirectAnchorProps: options => {
     if (configRef.pjaxMode === 'native' && (!options?.node || options.node.type === 'blob')) {
       const pjaxContainerSelector = 'main'
       const turboContainerId = 'repo-content-turbo-frame'
@@ -223,7 +223,7 @@ export const GitHub: Platform = {
       }
     }
   },
-  loadWithPJAX: (url, element) => {
+  loadWithFastRedirect: (url, element) => {
     if (configRef.pjaxMode === 'native') {
       element.click()
       return true
diff --git a/src/platforms/Gitee/index.ts b/src/platforms/Gitee/index.ts
index ef2ac64..0409b48 100644
--- a/src/platforms/Gitee/index.ts
+++ b/src/platforms/Gitee/index.ts
@@ -3,7 +3,7 @@ import { Base64 } from 'js-base64'
 import { platform } from 'platforms'
 import * as React from 'react'
 import { resolveGitModules } from 'utils/gitSubmodule'
-import { useOnPJAXDone } from 'utils/hooks/usePJAX'
+import { useAfterRedirect } from 'utils/hooks/useFastRedirect'
 import { useProgressBar } from 'utils/hooks/useProgressBar'
 import { gitakoServiceHost } from 'utils/networkService'
 import { sortFoldersToFront } from 'utils/treeParser'
@@ -190,5 +190,5 @@ export function useGiteeAttachCopySnippetButton(copySnippetButton: boolean) {
     [copySnippetButton],
   )
   React.useEffect(attachCopySnippetButton, [attachCopySnippetButton])
-  useOnPJAXDone(attachCopySnippetButton)
+  useAfterRedirect(attachCopySnippetButton)
 }
diff --git a/src/platforms/platform.d.ts b/src/platforms/platform.d.ts
index c959677..e47cac0 100644
--- a/src/platforms/platform.d.ts
+++ b/src/platforms/platform.d.ts
@@ -24,9 +24,9 @@ type Platform = {
   getCurrentPath(branchName: string): string[] | null
   setOAuth(code: string): Promise<string | null>
   getOAuthLink(): string
-  delegatePJAXProps?(options?: { node?: TreeNode }):
+  delegateFastRedirectAnchorProps?(options?: { node?: TreeNode }):
     | (React.DOMAttributes<HTMLElement> & Record<string, unknown>) // support data-* attributes
     | void
-  loadWithPJAX?(url: string, element: HTMLElement): boolean | void
+  loadWithFastRedirect?(url: string, element: HTMLElement): boolean | void
   usePlatformHooks?(): void
 }
diff --git a/src/utils/createAnchorClickHandler.ts b/src/utils/createAnchorClickHandler.ts
index 88cc400..61e4815 100644
--- a/src/utils/createAnchorClickHandler.ts
+++ b/src/utils/createAnchorClickHandler.ts
@@ -1,11 +1,11 @@
 import { isOpenInNewWindowClick } from './general'
-import { loadWithPJAX } from './hooks/usePJAX'
+import { loadWithFastRedirect } from './hooks/useFastRedirect'
 
 export function createAnchorClickHandler(url: string) {
   return (e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
     if (isOpenInNewWindowClick(e)) return
 
     e.preventDefault()
-    loadWithPJAX(url, e.currentTarget)
+    loadWithFastRedirect(url, e.currentTarget)
   }
 }
diff --git a/src/utils/hooks/usePJAX.ts b/src/utils/hooks/useFastRedirect.ts
similarity index 84%
rename from src/utils/hooks/usePJAX.ts
rename to src/utils/hooks/useFastRedirect.ts
index e23a55e..a5c9a93 100644
--- a/src/utils/hooks/usePJAX.ts
+++ b/src/utils/hooks/useFastRedirect.ts
@@ -1,12 +1,9 @@
 import { useConfigs } from 'containers/ConfigsContext'
-import { Config } from 'pjax-api'
 import { platform } from 'platforms'
 import * as React from 'react'
 import { useEvent } from 'react-use'
 
-// TODO: rename PJAX
-
-const config: Config = {
+const config: import('pjax-api').Config = {
   areas: [
     // github
     '.repository-content',
@@ -30,7 +27,7 @@ const config: Config = {
   },
 }
 
-export function usePJAX() {
+export function usePJAXAPI() {
   const { pjaxMode } = useConfigs().value
   // make history travel work
   React.useEffect(() => {
@@ -51,12 +48,12 @@ export function usePJAX() {
   useRedirectedEvents(document, 'pjax:ready', 'pjax:end')
 }
 
-export const loadWithPJAX = (url: string, element: HTMLElement) => {
+export const loadWithFastRedirect = (url: string, element: HTMLElement) => {
   // eslint-disable-next-line @typescript-eslint/no-var-requires
-  platform.loadWithPJAX?.(url, element) || require('pjax-api').Pjax.assign(url, config)
+  platform.loadWithFastRedirect?.(url, element) || require('pjax-api').Pjax.assign(url, config)
 }
 
-export function useOnPJAXDone(callback: () => void) {
+export function useAfterRedirect(callback: () => void) {
   useEvent('pjax:end', callback, document) // legacy support
   useEvent('turbo:render', callback, document) // prevent page content shift after first redirect to new page via turbo when sidebar is pinned
 }
diff --git a/src/utils/hooks/useProgressBar.ts b/src/utils/hooks/useProgressBar.ts
index 29a0c2b..91d6a6e 100644
--- a/src/utils/hooks/useProgressBar.ts
+++ b/src/utils/hooks/useProgressBar.ts
@@ -11,7 +11,6 @@ const progressBar = {
   },
 }
 
-// use native progress bar on GitHub
 export function useProgressBar() {
   React.useEffect(() => {
     NProgress.configure({ showSpinner: false })