feat: enhance styles and add settings for recursive toggling

src/components/SideBar.tsx

@@ -137,6 +137,7 @@ const RawGitako: React.FC<Props & ConnectorState> = function RawGitako(props) {
                   freeze={showSettings}
                   accessToken={accessToken}
                   loadWithPJAX={loadWithPJAX}
+                  config={configContext.val}
                 />
               )
             )}

src/components/settings/FileTreeSettings.tsx

@@ -7,7 +7,7 @@ import { Option, SelectInput } from '../SelectInput'
 import { Field } from './Field'
 import { SettingsSection } from './SettingsSection'
 
-const options: Option<Config['icons']>[] = [
+const iconOptions: Option<Config['icons']>[] = [
   {
     key: 'rich',
     value: 'rich',
@@ -25,16 +25,41 @@ const options: Option<Config['icons']>[] = [
   },
 ]
 
+const recursiveToggleFolderOptions: Option<Config['recursiveToggleFolder']>[] = [
+  {
+    key: 'shift',
+    value: 'shift',
+    label: `⇧(shift)`,
+  },
+  {
+    key: 'alt',
+    value: 'alt',
+    label: `⌥(alt)`,
+  },
+]
+
 type Props = {}
 
 export function FileTreeSettings(props: React.PropsWithChildren<Props>) {
   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.set({
+              recursiveToggleFolder: v,
+            })
+          }}
+          value={configContext.val.recursiveToggleFolder}
+        ></SelectInput>
+      </Field>
       <Field title="Icons" id="file-tree-icons">
         <SelectInput<Config['icons']>
           id="file-tree-icons"
-          options={options}
+          options={iconOptions}
           onChange={v => {
             configContext.set({
               icons: v,

src/components/settings/SettingsBar.tsx

@@ -44,7 +44,7 @@ function SettingsBarContent() {
           },
           {
             key: 'shrinkGitHubHeader',
-            label: 'Shrink GitHub Header(experimental)',
+            label: 'Shrink GitHub header(experimental)',
           },
         ]
       : []
@@ -68,7 +68,7 @@ function SettingsBarContent() {
             {reloadHint && <div className={'hint'}>{reloadHint}</div>}
           </SettingsSection>
         )}
-        <SettingsSection title={'Contact'}>
+        <SettingsSection title={'Feedback'}>
           <a href="https://github.com/EnixCoda/Gitako/issues" target="_blank">
             Report bug / Request feature.
           </a>

src/components/settings/SidebarSettings.tsx

@@ -12,7 +12,7 @@ import { SettingsSection } from './SettingsSection'
 
 type Props = {}
 
-const options: Option<Config['toggleButtonContent']>[] = [
+const toggleButtonContentOptions: Option<Config['toggleButtonContent']>[] = [
   {
     key: 'logo',
     value: 'logo',
@@ -36,8 +36,8 @@ export function SidebarSettings(props: React.PropsWithChildren<Props>) {
   }, [configContext.val.shortcut])
 
   return (
-    <SettingsSection title={'Toggle Sidebar'}>
-      <Field id="toggle-sidebar-shortcut" title="Keyboard Shortcut">
+    <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"
@@ -79,10 +79,10 @@ export function SidebarSettings(props: React.PropsWithChildren<Props>) {
           )}
         </div>
       </Field>
-      <Field id="toggle-button-content" title="Content of the Toggle Button">
+      <Field id="toggle-button-content" title="Icon of the toggle button">
         <SelectInput
           id="toggle-button-content"
-          options={options}
+          options={toggleButtonContentOptions}
           onChange={v => {
             configContext.set({
               toggleButtonContent: v,

src/content.scss

@@ -545,11 +545,11 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
           }
 
           .field {
-            margin-bottom: 4px;
+            margin-bottom: 8px;
 
             label {
               display: inline-block;
-              margin-bottom: 2px;
+              margin-bottom: 0px;
               font-weight: 600;
             }
             input {

src/driver/core/FileExplorer.ts

@@ -11,6 +11,7 @@ export type Props = {
   freeze: boolean
   accessToken: string | undefined
   toggleShowSettings: React.MouseEventHandler
+  config: Config
   loadWithPJAX(url: string): void
 }
 
@@ -242,7 +243,19 @@ export const onNodeClick: BoundMethodCreator<[
   if (preventDefault) event.preventDefault()
 
   if (node.type === 'tree') {
-    dispatch.call(toggleNodeExpansion, node, { skipScrollToNode: true, recursive: event.shiftKey })
+    const [
+      ,
+      {
+        config: { recursiveToggleFolder },
+      },
+    ] = dispatch.get()
+    const recursive =
+      (recursiveToggleFolder === 'shift' && event.shiftKey) ||
+      (recursiveToggleFolder === 'alt' && event.altKey)
+    dispatch.call(toggleNodeExpansion, node, {
+      skipScrollToNode: true,
+      recursive,
+    })
   } else if (node.type === 'blob') {
     const [, { loadWithPJAX }] = dispatch.get()
     dispatch.call(focusNode, node, true)

src/utils/configHelper.ts

@@ -11,6 +11,7 @@ export type Config = {
   icons: 'rich' | 'dim' | 'native'
   toggleButtonVerticalDistance: number
   toggleButtonContent: 'logo' | 'octoface'
+  recursiveToggleFolder: 'shift' | 'alt'
   shrinkGitHubHeader: boolean
 }
 
@@ -25,6 +26,7 @@ export enum configKeys {
   icons = 'icons',
   toggleButtonVerticalDistance = 'toggleButtonVerticalDistance',
   toggleButtonContent = 'toggleButtonContent',
+  recursiveToggleFolder = 'recursiveToggleFolder',
   shrinkGitHubHeader = 'shrinkGitHubHeader',
 }
 
@@ -39,6 +41,7 @@ const defaultConfigs: Config = {
   icons: 'rich',
   toggleButtonVerticalDistance: 124, // align with GitHub's navbar items
   toggleButtonContent: 'logo',
+  recursiveToggleFolder: 'shift',
   shrinkGitHubHeader: false,
 }