feat: editor tree in sidebar (electron#865)

package.json

@@ -38,6 +38,7 @@
   },
   "dependencies": {
     "@blueprintjs/core": "^3.36.0",
+    "@blueprintjs/popover2": "^0.12.2",
     "@blueprintjs/select": "^3.15.0",
     "@electron/get": "^1.12.4",
     "@octokit/rest": "^16.43.1",

src/less/blueprint.less

@@ -1,6 +1,7 @@
 @import (inline) "~@blueprintjs/core/lib/css/blueprint.css";
 @import (inline) "~@blueprintjs/select/lib/css/blueprint-select.css";
 @import (inline) "~@blueprintjs/icons/lib/css/blueprint-icons.css";
+@import (inline) "~@blueprintjs/popover2/lib/css/blueprint-popover2.css";
 @import (inline) "~@blueprintjs/core/lib/less/variables.less";
 
 // Override some of the colors

src/less/components/sidebar.less

@@ -0,0 +1,14 @@
+#new-file-input {
+  box-shadow: 0 0 0 1600px rgba(0, 0, 0, 0.10);
+  border-radius: 0;
+  border-left: 4px solid white;
+  font-size: 14px;
+}
+
+.add-file-input .bp3-tree-node-label {
+  overflow: visible;
+}
+
+.bp3-tree-node-caret-none {
+  min-width: 8px;
+}

src/less/root.less

@@ -18,3 +18,4 @@
 @import "components/tour.less";
 @import "components/show-me.less";
 @import "components/version-select.less";
+@import "components/sidebar.less";

src/main/windows.ts

@@ -15,7 +15,7 @@ export let browserWindows: Array<BrowserWindow | null> = [];
  */
 export function getMainWindowOptions(): Electron.BrowserWindowConstructorOptions {
   return {
-    width: 1200,
+    width: 1400,
     height: 900,
     minHeight: 600,
     minWidth: 600,

src/renderer/components/commands.tsx

@@ -5,7 +5,6 @@ import * as React from 'react';
 import { AppState } from '../state';
 import { AddressBar } from './commands-address-bar';
 import { BisectHandler } from './commands-bisect';
-import { EditorDropdown } from './commands-editors';
 import { GistActionButton } from './commands-action-button';
 import { Runner } from './commands-runner';
 import { VersionChooser } from './commands-version-chooser';
@@ -50,7 +49,6 @@ export class Commands extends React.Component<CommandsProps> {
               text="Console"
               onClick={appState.toggleConsole}
             />
-            <EditorDropdown appState={appState} />
           </ControlGroup>
         </div>
         <div>

src/renderer/components/editor.tsx

@@ -72,6 +72,7 @@ export class Editor extends React.Component<EditorProps> {
 
     if (ref) {
       this.editor = monaco.editor.create(ref, {
+        automaticLayout: true,
         language: this.language,
         theme: 'main',
         contextmenu: false,

src/renderer/components/editors-non-ideal-state.tsx

@@ -13,7 +13,7 @@ export function renderNonIdealState(editorMosaic: EditorMosaic) {
     <NonIdealState
       action={resolveButton}
       icon="applications"
-      description='You have closed all editors. You can open them again with the button below or the "Editors" button above!'
+      description="You have closed all editors. You can open them again with the button below or in the sidebar menu!"
     />
   );
 }

src/renderer/components/editors.tsx

@@ -171,14 +171,6 @@ export class Editors extends React.Component<EditorsProps, EditorsState> {
   ): JSX.Element {
     const { appState } = this.props;
 
-    // only show toolbar controls if we have more than 1 visible editor
-    const toolbarControlsMaybe = appState.editorMosaic.numVisible > 1 && (
-      <>
-        <MaximizeButton id={id} appState={appState} />
-        <RemoveButton id={id} appState={appState} />
-      </>
-    );
-
     return (
       <div>
         {/* Left */}
@@ -188,7 +180,10 @@ export class Editors extends React.Component<EditorsProps, EditorsState> {
         {/* Middle */}
         <div />
         {/* Right */}
-        <div className="mosaic-controls">{toolbarControlsMaybe}</div>
+        <div className="mosaic-controls">
+          <MaximizeButton id={id} appState={appState} />
+          <RemoveButton id={id} appState={appState} />
+        </div>
       </div>
     );
   }

src/renderer/components/output-editors-wrapper.tsx

@@ -3,6 +3,7 @@ import { Mosaic, MosaicNode, MosaicParent } from 'react-mosaic-component';
 
 import { AppState } from '../state';
 import { Editors } from './editors';
+import { SidebarFileTree } from './sidebar-file-tree';
 import { Outputs } from './outputs';
 
 interface WrapperProps {
@@ -13,7 +14,7 @@ interface WrapperState {
   mosaic: MosaicNode<WrapperEditorId>;
 }
 
-export type WrapperEditorId = 'output' | 'editors';
+export type WrapperEditorId = 'output' | 'editors' | 'filetree';
 
 export class OutputEditorsWrapper extends React.Component<
   WrapperProps,
@@ -22,6 +23,7 @@ export class OutputEditorsWrapper extends React.Component<
   private MOSAIC_ELEMENTS = {
     output: <Outputs appState={this.props.appState} />,
     editors: <Editors appState={this.props.appState} />,
+    filetree: <SidebarFileTree appState={this.props.appState} />,
   };
 
   constructor(props: any) {
@@ -30,7 +32,12 @@ export class OutputEditorsWrapper extends React.Component<
       mosaic: {
         direction: 'column',
         first: 'output',
-        second: 'editors',
+        second: {
+          direction: 'row',
+          first: 'filetree',
+          second: 'editors',
+          splitPercentage: 15,
+        },
         splitPercentage: 25,
       },
     };