Remove scratchpad page, move folder UI into sequence editor

frontend/folders/component.tsx

@@ -104,28 +104,18 @@ export class RawFolders extends React.Component<Props, State> {
       .noFolder
       .map(x => <FolderItem key={x} sequence={this.props.sequences[x]} />);
 
-    return <Page>
-      <Col xs={12} sm={6} smOffset={3}>
-        <Row>
-          <input
-            value={this.props.searchTerm || ""}
-            onChange={({ currentTarget }) => {
-              updateSearchTerm(currentTarget.value);
-            }} />
-          <button onClick={() => createFolder()}>📁</button>
-          <button onClick={this.toggleAll}>{this.state.toggleDirection ? "📂" : "📁"}</button>
-          <button>➕Sequence</button>
-        </Row>
-      </Col>
-      <Col xs={12} sm={6} smOffset={3}>
-        <Row>
-          <this.Graph />
-          <ul>
-            {rootSequences}
-          </ul>
-        </Row>
-      </Col>
-    </Page>;
+    return <div>
+      <input
+        value={this.props.searchTerm || ""}
+        onChange={({ currentTarget }) => { updateSearchTerm(currentTarget.value); }} />
+      <button onClick={() => createFolder()}>📁</button>
+      <button onClick={this.toggleAll}>{this.state.toggleDirection ? "📂" : "📁"}</button>
+      <button>➕Sequence</button>
+      <this.Graph />
+      <ul>
+        {rootSequences}
+      </ul>
+    </div>;
   }
 }
 

frontend/route_config.tsx

@@ -95,12 +95,6 @@ const key = "FarmDesigner";
  *        404 must be last, etc.)
  */
 export const UNBOUND_ROUTES = [
-  route({
-    children: false,
-    $: "/scratchpad",
-    getModule: () => import("./folders/index"),
-    key: "Folders",
-  }),
   route({
     children: false,
     $: "/account",

frontend/sequences/sequences.tsx

@@ -2,16 +2,17 @@ import * as React from "react";
 import { connect } from "react-redux";
 import { StepButtonCluster } from "./step_button_cluster";
 import { SequenceEditorMiddle } from "./sequence_editor_middle";
-import { Page, Row } from "../ui/index";
+import { Page, Row, Col } from "../ui/index";
 import { Props } from "./interfaces";
 import { mapStateToProps } from "./state_to_props";
 import { ToolTips } from "../constants";
 import { isTaggedSequence } from "../resources/tagged_resources";
 import { setActiveSequenceByName } from "./set_active_sequence_by_name";
-import { LeftPanel, CenterPanel, RightPanel } from "../ui";
+import { CenterPanel, RightPanel } from "../ui";
 import { t } from "../i18next_wrapper";
 import { unselectSequence, closeCommandMenu } from "./actions";
 import { isNumber } from "lodash";
+import { Folders } from "../folders/component";
 
 export interface SequenceBackButtonProps {
   dispatch: Function;
@@ -40,12 +41,9 @@ export class RawSequences extends React.Component<Props, {}> {
     const activeClasses = [sequenceOpen, insertingStep].join(" ");
     return <Page className="sequence-page">
       <Row>
-        <LeftPanel
-          className={`sequence-list-panel ${activeClasses}`}
-          title={t("Sequences")}
-          helpText={t(ToolTips.SEQUENCE_LIST)}>
-          <p>Work in progress...</p>
-        </LeftPanel>
+        <Col sm={3}>
+          <Folders />
+        </Col>
         <CenterPanel
           className={`sequence-editor-panel ${activeClasses}`}
           backButton={<SequenceBackButton