feat: shrink GitHub header option

src/components/SideBar.tsx

@@ -10,7 +10,11 @@ import { connect } from 'driver/connect'
 import { SideBarCore } from 'driver/core'
 import { ConnectorState, Props } from 'driver/core/SideBar'
 import { platform } from 'platforms'
-import { useGitHubAttachCopyFileButton, useGitHubAttachCopySnippetButton } from 'platforms/GitHub'
+import {
+  GitHub,
+  useGitHubAttachCopyFileButton,
+  useGitHubAttachCopySnippetButton,
+} from 'platforms/GitHub'
 import * as React from 'react'
 import { useEvent, useUpdateEffect } from 'react-use'
 import { cx } from 'utils/cx'
@@ -24,6 +28,18 @@ const RawGitako: React.FC<Props & ConnectorState> = function RawGitako(props) {
   const accessToken = props.configContext.val.access_token
   const [baseSize] = React.useState(() => configContext.val.sideBarWidth)
 
+  const { shrinkGitHubHeader } = configContext.val
+  React.useEffect(() => {
+    if (platform === GitHub) {
+      const ele = document.body
+      if (shrinkGitHubHeader) {
+        ele.classList.add('shrink-github-header')
+      } else {
+        ele.classList.remove('shrink-github-header')
+      }
+    }
+  }, [shrinkGitHubHeader])
+
   const intelligentToggle = configContext.val.intelligentToggle
   React.useEffect(() => {
     const shouldShow = intelligentToggle === null ? platform.shouldShow() : intelligentToggle

src/components/settings/SettingsBar.tsx

@@ -42,6 +42,10 @@ function SettingsBarContent() {
             label: 'Copy snippet shortcut',
             wikiLink: wikiLinks.copySnippet,
           },
+          {
+            key: 'shrinkGitHubHeader',
+            label: 'Shrink GitHub Header(experimental)',
+          },
         ]
       : []
 

src/content.scss

@@ -23,36 +23,37 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
 
 .#{$name}-ready {
   // github
-  .js-header-wrapper {
-    background: $gray-dark;
-  }
-  .Header {
-    max-width: 1280px;
-    margin: 0 auto;
-    @media (max-width: 1020px) {
-      overflow: hidden; // prevent blank scroll area when Gitako is open and window is narrow
+  &.shrink-github-header {
+    .js-header-wrapper {
+      background: $gray-dark;
     }
-    @media (min-width: 1280px) {
-      padding: 0 32px !important;
-    }
-  }
-
-  main {
-    // overflow: hidden;
-    // This prevents blank scroll area when Gitako is open and window is narrow.
-    // But it conflicts with the pr toolbar. Keep it here as a reminder.
-
-    & > *:first-child {
-      // repo info and nav bar
-      box-shadow: inset 0 -1px 0 #e1e4e8; // from .UnderlineNav
-
-      & > * {
-        max-width: 1280px;
-        margin: 0 auto;
+    .Header {
+      max-width: 1280px;
+      margin: 0 auto;
+      @media (max-width: 1020px) {
+        overflow: hidden; // prevent blank scroll area when Gitako is open and window is narrow
       }
+      @media (min-width: 1280px) {
+        padding: 0 32px !important;
+      }
+    }
+    main {
+      // overflow: hidden;
+      // This prevents blank scroll area when Gitako is open and window is narrow.
+      // But it conflicts with the pr toolbar. Keep it here as a reminder.
 
-      nav {
-        overflow: auto !important;
+      & > *:first-child {
+        // repo info and nav bar
+        box-shadow: inset 0 -1px 0 #e1e4e8; // from .UnderlineNav
+
+        & > * {
+          max-width: 1280px;
+          margin: 0 auto;
+        }
+
+        nav {
+          overflow: auto !important;
+        }
       }
     }
   }

src/utils/configHelper.ts

@@ -10,6 +10,7 @@ export type Config = {
   intelligentToggle: boolean | null // `null` stands for intelligent, boolean for sidebar open status
   icons: 'rich' | 'dim' | 'native'
   toggleButtonVerticalDistance: number
+  shrinkGitHubHeader: boolean
 }
 
 export enum configKeys {
@@ -22,6 +23,7 @@ export enum configKeys {
   intelligentToggle = 'intelligentToggle',
   icons = 'icons',
   toggleButtonVerticalDistance = 'toggleButtonVerticalDistance',
+  shrinkGitHubHeader = 'shrinkGitHubHeader',
 }
 
 const defaultConfigs: Config = {
@@ -34,6 +36,7 @@ const defaultConfigs: Config = {
   intelligentToggle: null,
   icons: 'rich',
   toggleButtonVerticalDistance: 80,
+  shrinkGitHubHeader: false,
 }
 
 const configKeyArray = Object.values(configKeys)