Merge branch 'feature/dense-file-tree' into develop

src/components/FileExplorer.tsx

@@ -261,13 +261,15 @@ function ListView({ width, height, metaData, expandTo, renderNodeContext }: List
   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={37}
+      itemSize={compactFileTree ? 24 : 37}
       height={height}
       width={width}
     >

src/components/Node.tsx

@@ -38,6 +38,7 @@ export function Node({
   style,
   onClick,
 }: Props) {
+  const { compactFileTree: compact } = useConfigs().value
   return (
     <a
       href={node.url}
@@ -53,8 +54,8 @@ export function Node({
 
         onClick(event, node)
       }}
-      className={cx(`node-item`, { focused, disabled: node.accessDenied, expanded })}
-      style={{ ...style, paddingLeft: `${10 + 20 * depth}px` }}
+      className={cx(`node-item`, { focused, disabled: node.accessDenied, expanded, compact })}
+      style={{ ...style, paddingLeft: `${10 + (compact ? 10 : 20) * depth}px` }}
       title={node.path}
     >
       <div className={'node-item-label'}>

src/components/settings/FileTreeSettings.tsx

@@ -83,6 +83,13 @@ export function FileTreeSettings(props: React.PropsWithChildren<Props>) {
           tooltip: 'Show number of comments next to file names in Pull Requests.',
         }}
       />
+      <SimpleToggleField
+        field={{
+          key: 'compactFileTree',
+          label: 'Compact file tree layout',
+          tooltip: 'View file tree structures more effectively.',
+        }}
+      />
     </SettingsSection>
   )
 }

src/styles/index.scss

@@ -649,10 +649,18 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
           margin: 0;
           line-height: 20px;
           cursor: pointer;
-          border-bottom: 1px solid var(--gitako-border-secondary);
           white-space: nowrap;
           transition: padding 0.3s ease; // on toggle expansion in search results
 
+          border-bottom: 1px solid var(--gitako-border-secondary);
+          &.compact {
+            border-bottom: none;
+            &.focused {
+              border-top: 1px solid var(--gitako-border-secondary);
+              border-bottom: 1px solid var(--gitako-border-secondary);
+            }
+          }
+
           &:not(:hover) {
             color: var(--gitako-text-primary);
           }

src/utils/config/helper.ts

@@ -19,6 +19,7 @@ export type Config = {
   sidebarToggleMode: 'persistent' | 'float'
   commentToggle: boolean
   codeFolding: boolean
+  compactFileTree: boolean
 }
 
 enum configKeys {
@@ -37,6 +38,7 @@ enum configKeys {
   sidebarToggleMode = 'sidebarToggleMode',
   commentToggle = 'commentToggle',
   codeFolding = 'codeFolding',
+  compactFileTree = 'compactFileTree',
 }
 
 export const defaultConfigs: Config = {
@@ -55,6 +57,7 @@ export const defaultConfigs: Config = {
   sidebarToggleMode: 'float',
   commentToggle: true,
   codeFolding: true,
+  compactFileTree: false,
 }
 
 const configKeyArray = Object.values(configKeys)