feat: spotlights on the settings bar!

src/components/FileExplorer.js

@@ -1,9 +1,9 @@
 import preact from 'preact'
 /** @jsx preact.h */
-
 import SearchBar from './SearchBar'
 import Node from './Node'
 
+import cx from '../utils/cx'
 import DOMHelper from '../utils/DOMHelper'
 import treeParser from '../utils/treeParser'
 import URLHelper from '../utils/URLHelper'
@@ -18,6 +18,7 @@ export default class List extends preact.Component {
   props = {
     treeData: null,
     metaData: null,
+    freeze: false,
   }
 
   tasksAfterRender = []
@@ -176,8 +177,9 @@ export default class List extends preact.Component {
 
   render() {
     const { visibleNodes: { nodes, depths, focusedNode, expandedNodes } } = this.state
+    const { freeze } = this.props
     return (
-      <div className={`file-explorer`} tabIndex={-1} onKeyDown={this.handleKeyDown}>
+      <div className={cx(`file-explorer`, { freeze })} tabIndex={-1} onKeyDown={this.handleKeyDown}>
         <SearchBar onSearchKeyChange={this.handleSearchKeyChange} />
         {nodes.length === 0 ? (
           <label className={'no-results'}>No results found.</label>

src/components/SideBar.js

@@ -122,12 +122,12 @@ export default class SideBar extends preact.Component {
   }
 
   renderContent() {
-    const { errorDueToPrivateRepo, metaData, treeData } = this.state
+    const { errorDueToPrivateRepo, metaData, treeData, showSettings } = this.state
     return (
       <div className={'gitako-side-bar-content'}>
         {metaData && <MetaBar metaData={metaData} />}
         {errorDueToPrivateRepo && this.renderPrivateRepoError()}
-        {metaData && treeData && <FileExplorer metaData={metaData} treeData={treeData} />}
+        {metaData && treeData && <FileExplorer metaData={metaData} treeData={treeData} freeze={showSettings} />}
       </div>
     )
   }

src/content.less

@@ -101,6 +101,7 @@
     z-index: 2;
     background: #fafbfc;
     border-right: 1px solid #e1e4e8;
+    overflow: hidden;
 
     @media screen and (min-width: @content-width) {
       border-left: 1px solid #e1e4e8;
@@ -165,6 +166,10 @@
         display: flex;
         flex-direction: column;
         flex-wrap: nowrap;
+        &.freeze {
+          filter: blur(1.5px) opacity(0.6) grayscale(0.9);
+          pointer-events: none;
+        }
 
         /* search input */
         .search-input-wrapper {
@@ -224,6 +229,7 @@
 
     .@{name}-settings-bar {
       border-top: 1px solid #eaecef;
+      box-shadow: 0px -2px 16px #666666dd;
       &-content {
         padding: 0 10px;
         &-section {