feat: move sidebar toggle mode switch

src/components/Icon.tsx

@@ -13,8 +13,10 @@ import {
   IconProps,
   MarkdownIcon as Markdown,
   OctofaceIcon as Octoface,
+  PinIcon as Pin,
   ReplyIcon as Reply,
   SearchIcon as Search,
+  TabIcon as Tab,
   XIcon as X,
 } from '@primer/octicons-react'
 import * as React from 'react'
@@ -37,6 +39,8 @@ const iconToComponentMap = {
   FileMedia,
   FileCode,
   File,
+  Pin,
+  Tab,
 }
 
 const defaultIcon = 'File'
@@ -50,6 +54,8 @@ const typeToIconComponentMap: {
   grabber: 'Grabber',
   octoface: 'Octoface',
   x: 'X',
+  pin: 'Pin',
+  tab: 'Tab',
   gear: 'Gear',
   folder: 'ChevronRight',
   'chevron-down': 'ChevronDown',

src/components/SideBar.tsx

@@ -134,8 +134,27 @@ export function SideBar() {
         >
           <div className={'gitako-side-bar-body'}>
             <div className={'close-side-bar-button-position'}>
-              <button className={'close-side-bar-button'} onClick={toggleShowSideBar}>
-                <Icon className={'action-icon'} type={'x'} />
+              {sidebarToggleMode === 'persistent' && (
+                <button
+                  title={'Collapse sidebar'}
+                  className={'close-side-bar-button'}
+                  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',
+                })}
+                onClick={() =>
+                  configContext.onChange({
+                    sidebarToggleMode: sidebarToggleMode === 'float' ? 'persistent' : 'float',
+                  })
+                }
+              >
+                <Icon className={'action-icon'} type={'pin'} />
               </button>
             </div>
             <div

src/components/settings/SidebarSettings.tsx

@@ -90,23 +90,16 @@ export function SidebarSettings(props: React.PropsWithChildren<Props>) {
           value={configContext.value.toggleButtonContent}
         ></SelectInput>
       </Field>
-      <SimpleToggleField
-        field={{
-          key: 'sidebarToggleMode',
-          label: 'Dock sidebar on expand',
-          overwrite: {
-            value: enabled => enabled === 'persistent',
-            onChange: checked => (checked ? 'persistent' : 'float'),
-          },
-        }}
-      />
       <SimpleToggleField
         field={{
           key: 'intelligentToggle',
           label: 'Auto expand',
           disabled: configContext.value.sidebarToggleMode === 'float',
-          tooltip:
-            'Gitako will expand when exploring source files, pull requests, etc. And collapse otherwise. Will be disabled when "Dock sidebar on expand" is disabled.',
+          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.'
+              : ''
+          }`,
           overwrite: {
             value: enabled =>
               configContext.value.sidebarToggleMode === 'float' ? false : enabled === null,

src/styles/index.scss

@@ -364,6 +364,10 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
           transition: background linear 0.3s;
         }
 
+        &.active .octicon {
+          color: var(--gitako-icon-primary);
+        }
+
         .action-icon {
           color: var(--gitako-icon-tertiary);
           width: 20px;
@@ -373,8 +377,16 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
             width: 100%;
             height: 100%;
           }
+          .Pin,
+          .Tab {
+            transform: rotateY(180deg);
+          }
         }
       }
+
+      .close-side-bar-button + .close-side-bar-button {
+        margin-left: 4px;
+      }
     }
 
     .#{$name}-side-bar-content {
@@ -392,7 +404,7 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
           min-height: 62px; // GitHub header height if login
           flex-shrink: 0;
           padding: 8px 10px;
-          padding-right: $button-size + 8px * 2; // space for toggle button
+          padding-right: $button-size * 2 + 8px; // space for toggle buttons
           background: var(--gitako-bg-tertiary);
 
           .user-and-repo a {