refactor: update layout

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>

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>
+  )
+}

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>
   )
 }

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;
       }
     }
   }