diff --git a/client/modules/IDE/actions/collections.js b/client/modules/IDE/actions/collections.js
index 5a9218520b..35d9ff2dc9 100644
--- a/client/modules/IDE/actions/collections.js
+++ b/client/modules/IDE/actions/collections.js
@@ -6,7 +6,6 @@ import { setToastText, showToast } from './toast';
 
 const TOAST_DISPLAY_TIME_MS = 1500;
 
-// eslint-disable-next-line
 export function getCollections(username) {
   return (dispatch) => {
     dispatch(startLoader());
@@ -16,8 +15,7 @@ export function getCollections(username) {
     } else {
       url = '/collections';
     }
-    console.log(url);
-    apiClient
+    return apiClient
       .get(url)
       .then((response) => {
         dispatch({
@@ -27,10 +25,9 @@ export function getCollections(username) {
         dispatch(stopLoader());
       })
       .catch((error) => {
-        const { response } = error;
         dispatch({
           type: ActionTypes.ERROR,
-          error: response.data
+          error: error?.response?.data
         });
         dispatch(stopLoader());
       });
@@ -183,4 +180,4 @@ export function deleteCollection(collectionId) {
         return response.data;
       });
   };
-}
+}
\ No newline at end of file
diff --git a/client/modules/IDE/components/AddToCollectionList.jsx b/client/modules/IDE/components/AddToCollectionList.jsx
index fc5c161fdc..7e8b2bbdf3 100644
--- a/client/modules/IDE/components/AddToCollectionList.jsx
+++ b/client/modules/IDE/components/AddToCollectionList.jsx
@@ -1,23 +1,38 @@
+
+
+Settings
+
+Hi! Here some our recommendations to get the best out of BLACKBOX:
+
+Be as clear as possible
+
+End the question in what language you want the answer to be, e.g: ‘connect to mongodb in python
+or you can just
+Go to Blackbox
+Here are some suggestion (choose one):
+Write a function that reads data from a json file
+How to delete docs from mongodb in phyton
+Connect to mongodb in nodejs
+Ask any coding question
+send
+refresh
+Blackbox AI Chat is in beta and Blackbox is not liable for the content generated. By using Blackbox, you acknowledge that you agree to agree to Blackbox's Terms and Privacy Policy
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { Helmet } from 'react-helmet';
-import { connect } from 'react-redux';
-import { bindActionCreators } from 'redux';
-import { withTranslation } from 'react-i18next';
+import { useTranslation } from 'react-i18next';
+import { useDispatch, useSelector } from 'react-redux';
 import styled from 'styled-components';
-import * as ProjectActions from '../actions/project';
-import * as ProjectsActions from '../actions/projects';
-import * as CollectionsActions from '../actions/collections';
-import * as ToastActions from '../actions/toast';
-import * as SortingActions from '../actions/sorting';
-import getSortedCollections from '../selectors/collections';
 import Loader from '../../App/components/loader';
+import {
+  addToCollection,
+  getCollections,
+  removeFromCollection
+} from '../actions/collections';
+import getSortedCollections from '../selectors/collections';
 import QuickAddList from './QuickAddList';
 import { remSize } from '../../../theme';
 
-const projectInCollection = (project, collection) =>
-  collection.items.find((item) => item.projectId === project.id) != null;
-
 export const CollectionAddSketchWrapper = styled.div`
   width: ${remSize(600)};
   max-width: 100%;
@@ -31,166 +46,67 @@ export const QuickAddWrapper = styled.div`
   height: 100%;
 `;
 
-class CollectionList extends React.Component {
-  constructor(props) {
-    super(props);
+const AddToCollectionList = ({ projectId }) => {
+  const { t } = useTranslation();
 
-    if (props.projectId) {
-      props.getProject(props.projectId);
-    }
+  const dispatch = useDispatch();
 
-    this.props.getCollections(this.props.username);
+  const username = useSelector((state) => state.user.username);
 
-    this.state = {
-      hasLoadedData: false
-    };
-  }
+  const collections = useSelector(getSortedCollections);
 
-  componentDidUpdate(prevProps) {
-    if (prevProps.loading === true && this.props.loading === false) {
-      // eslint-disable-next-line react/no-did-update-set-state
-      this.setState({
-        hasLoadedData: true
-      });
-    }
-  }
+  // TODO: improve loading state
+  const loading = useSelector((state) => state.loading);
+  const [hasLoadedData, setHasLoadedData] = useState(false);
+  const showLoader = loading && !hasLoadedData;
 
-  getTitle() {
-    if (this.props.username === this.props.user.username) {
-      return this.props.t('AddToCollectionList.Title');
-    }
-    return this.props.t('AddToCollectionList.AnothersTitle', {
-      anotheruser: this.props.username
-    });
-  }
+  useEffect(() => {
+    dispatch(getCollections(username)).then(() => setHasLoadedData(true));
+  }, [dispatch, username]);
 
-  handleCollectionAdd = (collection) => {
-    this.props.addToCollection(collection.id, this.props.project.id);
+  const handleCollectionAdd = (collection) => {
+    dispatch(addToCollection(collection.id, projectId));
   };
 
-  handleCollectionRemove = (collection) => {
-    this.props.removeFromCollection(collection.id, this.props.project.id);
+  const handleCollectionRemove = (collection) => {
+    dispatch(removeFromCollection(collection.id, projectId));
   };
 
-  render() {
-    const { collections, project } = this.props;
-    const hasCollections = collections.length > 0;
-    const collectionWithSketchStatus = collections.map((collection) => ({
-      ...collection,
-      url: `/${collection.owner.username}/collections/${collection.id}`,
-      isAdded: projectInCollection(project, collection)
-    }));
-
-    let content = null;
-
-    if (this.props.loading && !this.state.hasLoadedData) {
-      content = <Loader />;
-    } else if (hasCollections) {
-      content = (
-        <QuickAddList
-          items={collectionWithSketchStatus}
-          onAdd={this.handleCollectionAdd}
-          onRemove={this.handleCollectionRemove}
-          t={this.props.t}
-        />
-      );
-    } else {
-      content = this.props.t('AddToCollectionList.Empty');
+  const collectionWithSketchStatus = collections.map((collection) => ({
+    ...collection,
+    url: `/${collection.owner.username}/collections/${collection.id}`,
+    isAdded: collection.items.some((item) => item.projectId === projectId)
+  }));
+
+  const getContent = () => {
+    if (showLoader) {
+      return <Loader />;
+    } else if (collections.length === 0) {
+      return t('AddToCollectionList.Empty');
     }
-
     return (
-      <CollectionAddSketchWrapper>
-        <QuickAddWrapper>
-          <Helmet>
-            <title>{this.getTitle()}</title>
-          </Helmet>
-          {content}
-        </QuickAddWrapper>
-      </CollectionAddSketchWrapper>
+      <QuickAddList
+        items={collectionWithSketchStatus}
+        onAdd={handleCollectionAdd}
+        onRemove={handleCollectionRemove}
+      />
     );
-  }
-}
-
-const ProjectShape = PropTypes.shape({
-  id: PropTypes.string.isRequired,
-  name: PropTypes.string.isRequired,
-  createdAt: PropTypes.string.isRequired,
-  updatedAt: PropTypes.string.isRequired,
-  user: PropTypes.shape({
-    username: PropTypes.string.isRequired
-  }).isRequired
-});
-
-const ItemsShape = PropTypes.shape({
-  createdAt: PropTypes.string.isRequired,
-  updatedAt: PropTypes.string.isRequired,
-  project: ProjectShape
-});
-
-CollectionList.propTypes = {
-  user: PropTypes.shape({
-    username: PropTypes.string,
-    authenticated: PropTypes.bool.isRequired
-  }).isRequired,
-  projectId: PropTypes.string.isRequired,
-  getCollections: PropTypes.func.isRequired,
-  getProject: PropTypes.func.isRequired,
-  addToCollection: PropTypes.func.isRequired,
-  removeFromCollection: PropTypes.func.isRequired,
-  collections: PropTypes.arrayOf(
-    PropTypes.shape({
-      id: PropTypes.string.isRequired,
-      name: PropTypes.string.isRequired,
-      description: PropTypes.string,
-      createdAt: PropTypes.string.isRequired,
-      updatedAt: PropTypes.string.isRequired,
-      items: PropTypes.arrayOf(ItemsShape)
-    })
-  ).isRequired,
-  username: PropTypes.string,
-  loading: PropTypes.bool.isRequired,
-  project: PropTypes.shape({
-    id: PropTypes.string,
-    owner: PropTypes.shape({
-      id: PropTypes.string
-    })
-  }),
-  t: PropTypes.func.isRequired
-};
+  };
 
-CollectionList.defaultProps = {
-  project: {
-    id: undefined,
-    owner: undefined
-  },
-  username: undefined
+  return (
+    <CollectionAddSketchWrapper>
+      <QuickAddWrapper>
+        <Helmet>
+          <title>{t('AddToCollectionList.Title')}</title>
+        </Helmet>
+        {getContent()}
+      </QuickAddWrapper>
+    </CollectionAddSketchWrapper>
+  );
 };
 
-function mapStateToProps(state, ownProps) {
-  return {
-    user: state.user,
-    collections: getSortedCollections(state),
-    sorting: state.sorting,
-    loading: state.loading,
-    project: ownProps.project || state.project,
-    projectId: ownProps && ownProps.params ? ownProps.prams.project_id : null
-  };
-}
-
-function mapDispatchToProps(dispatch) {
-  return bindActionCreators(
-    Object.assign(
-      {},
-      CollectionsActions,
-      ProjectsActions,
-      ProjectActions,
-      ToastActions,
-      SortingActions
-    ),
-    dispatch
-  );
-}
+AddToCollectionList.propTypes = {
+  projectId: PropTypes.string.isRequired
+};
 
-export default withTranslation()(
-  connect(mapStateToProps, mapDispatchToProps)(CollectionList)
-);
+export default AddToCollectionList;
\ No newline at end of file
diff --git a/client/modules/IDE/components/Searchbar/Searchbar.jsx b/client/modules/IDE/components/Searchbar/Searchbar.jsx
index a7c79d1f46..1c2217fd7a 100644
--- a/client/modules/IDE/components/Searchbar/Searchbar.jsx
+++ b/client/modules/IDE/components/Searchbar/Searchbar.jsx
@@ -1,71 +1,65 @@
+import React, { useState, useCallback, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import React from 'react';
 import { throttle } from 'lodash';
 import { withTranslation } from 'react-i18next';
 import i18next from 'i18next';
 import SearchIcon from '../../../../images/magnifyingglass.svg';
 
-class Searchbar extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      searchValue: this.props.searchTerm
-    };
-    this.throttledSearchChange = throttle(this.searchChange, 500);
-  }
+const Searchbar = ({
+  searchTerm,
+  setSearchTerm,
+  resetSearchTerm,
+  searchLabel,
+  t
+}) => {
+  const [searchValue, setSearchValue] = useState(searchTerm);
 
-  componentWillUnmount() {
-    this.props.resetSearchTerm();
-  }
+  const throttledSearchChange = useCallback(
+    throttle((value) => {
+      setSearchTerm(value.trim());
+    }, 500),
+    []
+  );
 
-  handleResetSearch = () => {
-    this.setState({ searchValue: '' }, () => {
-      this.props.resetSearchTerm();
-    });
+  const handleResetSearch = () => {
+    setSearchValue('');
+    resetSearchTerm();
   };
 
-  searchChange = () => {
-    this.props.setSearchTerm(this.state.searchValue.trim());
+  const handleSearchChange = (e) => {
+    const { value } = e.target;
+    setSearchValue(value);
+    throttledSearchChange(value.trim());
   };
 
-  handleSearchChange = (e) => {
-    this.setState({ searchValue: e.target.value }, () => {
-      this.throttledSearchChange(this.state.searchValue.trim());
-    });
-  };
+  useEffect(() => {
+    setSearchValue(searchTerm);
+  }, [searchTerm]);
 
-  render() {
-    const { searchValue } = this.state;
-    return (
-      <div
-        className={`searchbar ${
-          searchValue === '' ? 'searchbar--is-empty' : ''
-        }`}
-      >
-        <div className="searchbar__button">
-          <SearchIcon
-            className="searchbar__icon"
-            focusable="false"
-            aria-hidden="true"
-          />
-        </div>
-        <input
-          className="searchbar__input"
-          type="text"
-          value={searchValue}
-          placeholder={this.props.searchLabel}
-          onChange={this.handleSearchChange}
+  return (
+    <div
+      className={`searchbar ${searchValue === '' ? 'searchbar--is-empty' : ''}`}
+    >
+      <div className="searchbar__button">
+        <SearchIcon
+          className="searchbar__icon"
+          focusable="false"
+          aria-hidden="true"
         />
-        <button
-          className="searchbar__clear-button"
-          onClick={this.handleResetSearch}
-        >
-          {this.props.t('Searchbar.ClearTerm')}
-        </button>
       </div>
-    );
-  }
-}
+      <input
+        className="searchbar__input"
+        type="text"
+        value={searchValue}
+        placeholder={searchLabel}
+        onChange={handleSearchChange}
+      />
+      <button className="searchbar__clear-button" onClick={handleResetSearch}>
+        {t('Searchbar.ClearTerm')}
+      </button>
+    </div>
+  );
+};
 
 Searchbar.propTypes = {
   searchTerm: PropTypes.string.isRequired,
diff --git a/client/modules/IDE/components/SketchList.jsx b/client/modules/IDE/components/SketchList.jsx
index bce30da1dc..7b37c04bf2 100644
--- a/client/modules/IDE/components/SketchList.jsx
+++ b/client/modules/IDE/components/SketchList.jsx
@@ -1,3 +1,22 @@
+
+
+Settings
+
+Hi! Here some our recommendations to get the best out of BLACKBOX:
+
+Be as clear as possible
+
+End the question in what language you want the answer to be, e.g: ‘connect to mongodb in python
+or you can just
+Go to Blackbox
+Here are some suggestion (choose one):
+Write a function that reads data from a json file
+How to delete docs from mongodb in phyton
+Connect to mongodb in nodejs
+Ask any coding question
+send
+refresh
+Blackbox AI Chat is in beta and Blackbox is not liable for the content generated. By using Blackbox, you acknowledge that you agree to agree to Blackbox's Terms and Privacy Policy
 import PropTypes from 'prop-types';
 import React from 'react';
 import { Helmet } from 'react-helmet';
@@ -23,7 +42,6 @@ import getConfig from '../../../utils/getConfig';
 import ArrowUpIcon from '../../../images/sort-arrow-up.svg';
 import ArrowDownIcon from '../../../images/sort-arrow-down.svg';
 import DownFilledTriangleIcon from '../../../images/down-filled-triangle.svg';
-import MoreIconSvg from '../../../images/more.svg';
 
 const ROOT_URL = getConfig('API_URL');
 
@@ -199,11 +217,7 @@ class SketchListRowBase extends React.Component {
           onFocus={this.onFocusComponent}
           aria-label={this.props.t('SketchList.ToggleLabelARIA')}
         >
-          {this.props.mobile ? (
-            <MoreIconSvg focusable="false" aria-hidden="true" />
-          ) : (
-            <DownFilledTriangleIcon focusable="false" aria-hidden="true" />
-          )}
+          <DownFilledTriangleIcon focusable="false" aria-hidden="true" />
         </button>
         {optionsOpen && (
           <ul className="sketch-list__action-dialogue">
@@ -316,8 +330,14 @@ class SketchListRowBase extends React.Component {
           onClick={this.handleRowClick}
         >
           <th scope="row">{name}</th>
-          <td>{formatDateCell(sketch.createdAt, mobile)}</td>
-          <td>{formatDateCell(sketch.updatedAt, mobile)}</td>
+          <td>
+            {mobile && 'Created: '}
+            {formatDateCell(sketch.createdAt, mobile)}
+          </td>
+          <td>
+            {mobile && 'Updated: '}
+            {formatDateCell(sketch.updatedAt, mobile)}
+          </td>
           {this.renderDropdown()}
         </tr>
       </React.Fragment>
@@ -544,9 +564,7 @@ class SketchList extends React.Component {
             }
           >
             <AddToCollectionList
-              project={this.state.sketchToAddToCollection}
-              username={this.props.username}
-              user={this.props.user}
+              projectId={this.state.sketchToAddToCollection.id}
             />
           </Overlay>
         )}
@@ -611,4 +629,4 @@ function mapDispatchToProps(dispatch) {
 
 export default withTranslation()(
   connect(mapStateToProps, mapDispatchToProps)(SketchList)
-);
+);
\ No newline at end of file
diff --git a/client/modules/IDE/pages/IDEView.jsx b/client/modules/IDE/pages/IDEView.jsx
index 8e37441633..cfa33a1c75 100644
--- a/client/modules/IDE/pages/IDEView.jsx
+++ b/client/modules/IDE/pages/IDEView.jsx
@@ -1,36 +1,64 @@
-import React, { useEffect, useRef, useState } from 'react';
-import { useLocation, Prompt, useParams } from 'react-router-dom';
-import { useDispatch, useSelector } from 'react-redux';
-import { useTranslation } from 'react-i18next';
+
+
+Settings
+
+Hi! Here some our recommendations to get the best out of BLACKBOX:
+
+Be as clear as possible
+
+End the question in what language you want the answer to be, e.g: ‘connect to mongodb in python
+or you can just
+Go to Blackbox
+Here are some suggestion (choose one):
+Write a function that reads data from a json file
+How to delete docs from mongodb in phyton
+Connect to mongodb in nodejs
+Ask any coding question
+send
+refresh
+Blackbox AI Chat is in beta and Blackbox is not liable for the content generated. By using Blackbox, you acknowledge that you agree to agree to Blackbox's Terms and Privacy Policy
+import PropTypes from 'prop-types';
+import React from 'react';
+import { useLocation, Prompt } from 'react-router-dom';
+import { bindActionCreators } from 'redux';
+import { connect, useSelector } from 'react-redux';
+import { useTranslation, withTranslation } from 'react-i18next';
 import { Helmet } from 'react-helmet';
 import SplitPane from 'react-split-pane';
-import MediaQuery from 'react-responsive';
-import IDEKeyHandlers from '../components/IDEKeyHandlers';
+import Editor from '../components/Editor';
 import Sidebar from '../components/Sidebar';
 import PreviewFrame from '../components/PreviewFrame';
+import Toolbar from '../components/Header/Toolbar';
+import Preferences from '../components/Preferences/index';
+import NewFileModal from '../components/NewFileModal';
+import NewFolderModal from '../components/NewFolderModal';
+import UploadFileModal from '../components/UploadFileModal';
+import ShareModal from '../components/ShareModal';
+import KeyboardShortcutModal from '../components/KeyboardShortcutModal';
+import ErrorModal from '../components/ErrorModal';
+import Nav from '../components/Header/Nav';
 import Console from '../components/Console';
 import Toast from '../components/Toast';
-import { updateFileContent } from '../actions/files';
-import { stopSketch } from '../actions/ide';
-import {
-  autosaveProject,
-  clearPersistedState,
-  getProject
-} from '../actions/project';
+import * as FileActions from '../actions/files';
+import * as IDEActions from '../actions/ide';
+import * as ProjectActions from '../actions/project';
+import * as EditorAccessibilityActions from '../actions/editorAccessibility';
+import * as PreferencesActions from '../actions/preferences';
+import * as UserActions from '../../User/actions';
+import * as ConsoleActions from '../actions/console';
+import { getHTMLFile } from '../reducers/files';
+import Overlay from '../../App/components/Overlay';
+import About from '../components/About';
+import AddToCollectionList from '../components/AddToCollectionList';
+import Feedback from '../components/Feedback';
+import { CollectionSearchbar } from '../components/Searchbar';
+import { selectActiveFile } from '../selectors/files';
 import { getIsUserOwner } from '../selectors/users';
 import RootPage from '../../../components/RootPage';
-import Header from '../components/Header';
-import FloatingActionButton from '../components/FloatingActionButton';
-import Editor from '../components/Editor';
-import {
-  EditorSidebarWrapper,
-  PreviewWrapper
-} from '../components/Editor/MobileEditor';
-import IDEOverlays from '../components/IDEOverlays';
-
-function getTitle(project) {
-  const { id } = project;
-  return id ? `p5.js Web Editor | ${project.name}` : 'p5.js Web Editor';
+
+function getTitle(props) {
+  const { id } = props.project;
+  return id ? `p5.js Web Editor | ${props.project.name}` : 'p5.js Web Editor';
 }
 
 function isAuth(pathname) {
@@ -68,179 +96,469 @@ function WarnIfUnsavedChanges() {
 
 export const CmControllerContext = React.createContext({});
 
-const IDEView = () => {
-  const ide = useSelector((state) => state.ide);
-  const preferences = useSelector((state) => state.preferences);
-  const project = useSelector((state) => state.project);
-  const isUserOwner = useSelector(getIsUserOwner);
-  const dispatch = useDispatch();
-  const { t } = useTranslation();
+class IDEView extends React.Component {
+  constructor(props) {
+    super(props);
+    this.handleGlobalKeydown = this.handleGlobalKeydown.bind(this);
 
-  const params = useParams();
+    this.state = {
+      consoleSize: props.ide.consoleIsExpanded ? 150 : 29,
+      sidebarSize: props.ide.sidebarIsExpanded ? 160 : 20
+    };
+  }
 
-  const [consoleSize, setConsoleSize] = useState(150);
-  const [sidebarSize, setSidebarSize] = useState(160);
-  const [isOverlayVisible, setIsOverlayVisible] = useState(true);
+  componentDidMount() {
+    // If page doesn't reload after Sign In then we need
+    // to force cleared state to be cleared
+    this.props.clearPersistedState();
 
-  const cmRef = useRef({});
+    this.props.stopSketch();
+    if (this.props.params.project_id) {
+      const { project_id: id, username } = this.props.params;
+      if (id !== this.props.project.id) {
+        this.props.getProject(id, username);
+      }
+    }
 
-  const autosaveIntervalRef = useRef(null);
+    this.isMac = navigator.userAgent.toLowerCase().indexOf('mac') !== -1;
+    document.addEventListener('keydown', this.handleGlobalKeydown, false);
 
-  const syncFileContent = () => {
-    const file = cmRef.current.getContent();
-    dispatch(updateFileContent(file.id, file.content));
-  };
+    // window.onbeforeunload = this.handleUnsavedChanges;
+    window.addEventListener('beforeunload', this.handleBeforeUnload);
 
-  useEffect(() => {
-    dispatch(clearPersistedState());
+    this.autosaveInterval = null;
+  }
 
-    dispatch(stopSketch());
-  }, [dispatch]);
-
-  useEffect(() => {
-    const { project_id: id, username } = params;
-    if (id && project.id !== id) {
-      dispatch(getProject(id, username));
+  componentWillReceiveProps(nextProps) {
+    if (nextProps.location !== this.props.location) {
+      this.props.setPreviousPath(this.props.location.pathname);
     }
-  }, [dispatch, params, project.id]);
-
-  const autosaveAllowed = isUserOwner && project.id && preferences.autosave;
-  const shouldAutosave = autosaveAllowed && ide.unsavedChanges;
+    if (this.props.ide.sidebarIsExpanded !== nextProps.ide.sidebarIsExpanded) {
+      this.setState({
+        sidebarSize: nextProps.ide.sidebarIsExpanded ? 160 : 20
+      });
+    }
+  }
 
-  // For autosave - send to API after 5 seconds without changes
-  useEffect(() => {
-    const handleAutosave = () => {
-      dispatch(autosaveProject());
-    };
+  componentWillUpdate(nextProps) {
+    if (nextProps.params.project_id && !this.props.params.project_id) {
+      if (nextProps.params.project_id !== nextProps.project.id) {
+        this.props.getProject(nextProps.params.project_id);
+      }
+    }
+  }
 
-    if (autosaveIntervalRef.current) {
-      clearTimeout(autosaveIntervalRef.current);
+  componentDidUpdate(prevProps) {
+    if (this.props.isUserOwner && this.props.project.id) {
+      if (
+        this.props.preferences.autosave &&
+        this.props.ide.unsavedChanges &&
+        !this.props.ide.justOpenedProject
+      ) {
+        if (
+          this.props.selectedFile.name === prevProps.selectedFile.name &&
+          this.props.selectedFile.content !== prevProps.selectedFile.content
+        ) {
+          if (this.autosaveInterval) {
+            clearTimeout(this.autosaveInterval);
+          }
+          this.autosaveInterval = setTimeout(this.props.autosaveProject, 20000);
+        }
+      } else if (this.autosaveInterval && !this.props.preferences.autosave) {
+        clearTimeout(this.autosaveInterval);
+        this.autosaveInterval = null;
+      }
+    } else if (this.autosaveInterval) {
+      clearTimeout(this.autosaveInterval);
+      this.autosaveInterval = null;
+    }
+  }
+  componentWillUnmount() {
+    document.removeEventListener('keydown', this.handleGlobalKeydown, false);
+    clearTimeout(this.autosaveInterval);
+    this.autosaveInterval = null;
+  }
+  handleGlobalKeydown(e) {
+    // 83 === s
+    if (
+      e.keyCode === 83 &&
+      ((e.metaKey && this.isMac) || (e.ctrlKey && !this.isMac))
+    ) {
+      e.preventDefault();
+      e.stopPropagation();
+      if (
+        this.props.isUserOwner ||
+        (this.props.user.authenticated && !this.props.project.owner)
+      ) {
+        this.props.saveProject(this.cmController.getContent());
+      } else if (this.props.user.authenticated) {
+        this.props.cloneProject();
+      } else {
+        this.props.showErrorModal('forceAuthentication');
+      }
+      // 13 === enter
+    } else if (
+      e.keyCode === 13 &&
+      e.shiftKey &&
+      ((e.metaKey && this.isMac) || (e.ctrlKey && !this.isMac))
+    ) {
+      e.preventDefault();
+      e.stopPropagation();
+      this.props.stopSketch();
+    } else if (
+      e.keyCode === 13 &&
+      ((e.metaKey && this.isMac) || (e.ctrlKey && !this.isMac))
+    ) {
+      e.preventDefault();
+      e.stopPropagation();
+      this.syncFileContent();
+      this.props.startSketch();
+      // 50 === 2
+    } else if (
+      e.keyCode === 50 &&
+      ((e.metaKey && this.isMac) || (e.ctrlKey && !this.isMac)) &&
+      e.shiftKey
+    ) {
+      e.preventDefault();
+      this.props.setAllAccessibleOutput(false);
+      // 49 === 1
+    } else if (
+      e.keyCode === 49 &&
+      ((e.metaKey && this.isMac) || (e.ctrlKey && !this.isMac)) &&
+      e.shiftKey
+    ) {
+      e.preventDefault();
+      this.props.setAllAccessibleOutput(true);
+    } else if (
+      e.keyCode === 66 &&
+      ((e.metaKey && this.isMac) || (e.ctrlKey && !this.isMac))
+    ) {
+      e.preventDefault();
+      if (!this.props.ide.sidebarIsExpanded) {
+        this.props.expandSidebar();
+      } else {
+        this.props.collapseSidebar();
+      }
+    } else if (e.keyCode === 192 && e.ctrlKey) {
+      e.preventDefault();
+      if (this.props.ide.consoleIsExpanded) {
+        this.props.collapseConsole();
+      } else {
+        this.props.expandConsole();
+      }
+    } else if (e.keyCode === 27) {
+      if (this.props.ide.newFolderModalVisible) {
+        this.props.closeNewFolderModal();
+      } else if (this.props.ide.uploadFileModalVisible) {
+        this.props.closeUploadFileModal();
+      } else if (this.props.ide.modalIsVisible) {
+        this.props.closeNewFileModal();
+      }
     }
+  }
 
-    if (shouldAutosave) {
-      autosaveIntervalRef.current = setTimeout(handleAutosave, 5000);
+  handleBeforeUnload = (e) => {
+    const confirmationMessage = this.props.t('Nav.WarningUnsavedChanges');
+    if (this.props.ide.unsavedChanges) {
+      (e || window.event).returnValue = confirmationMessage;
+      return confirmationMessage;
     }
+    return null;
+  };
 
-    return () => {
-      if (autosaveIntervalRef.current) {
-        clearTimeout(autosaveIntervalRef.current);
-      }
-    };
-  }, [shouldAutosave, dispatch]);
+  syncFileContent = () => {
+    const file = this.cmController.getContent();
+    this.props.updateFileContent(file.id, file.content);
+  };
 
-  return (
-    <RootPage>
-      <Helmet>
-        <title>{getTitle(project)}</title>
-      </Helmet>
-      <IDEKeyHandlers getContent={() => cmRef.current?.getContent()} />
-      <WarnIfUnsavedChanges />
-      <Toast />
-      <CmControllerContext.Provider value={cmRef}>
-        <Header syncFileContent={syncFileContent} />
-      </CmControllerContext.Provider>
-      <MediaQuery minWidth={770}>
-        {(matches) =>
-          matches ? (
-            <main className="editor-preview-container">
+  render() {
+    return (
+      <RootPage>
+        <Helmet>
+          <title>{getTitle(this.props)}</title>
+        </Helmet>
+        <WarnIfUnsavedChanges currentLocation={this.props.location} />
+        <Toast />
+        <CmControllerContext.Provider value={{ current: this.cmController }}>
+          <Nav />
+        </CmControllerContext.Provider>
+        <Toolbar
+          syncFileContent={this.syncFileContent}
+          key={this.props.project.id}
+        />
+        {this.props.ide.preferencesIsVisible && (
+          <Overlay
+            title={this.props.t('Preferences.Settings')}
+            ariaLabel={this.props.t('Preferences.Settings')}
+            closeOverlay={this.props.closePreferences}
+          >
+            <Preferences />
+          </Overlay>
+        )}
+        <main className="editor-preview-container">
+          <SplitPane
+            split="vertical"
+            size={this.state.sidebarSize}
+            onChange={(size) => this.setState({ sidebarSize: size })}
+            onDragFinished={this._handleSidebarPaneOnDragFinished}
+            allowResize={this.props.ide.sidebarIsExpanded}
+            minSize={125}
+          >
+            <Sidebar />
+            <SplitPane
+              split="vertical"
+              defaultSize="50%"
+              onChange={() => {
+                this.overlay.style.display = 'block';
+              }}
+              onDragFinished={() => {
+                this.overlay.style.display = 'none';
+              }}
+              resizerStyle={{
+                borderLeftWidth: '2px',
+                borderRightWidth: '2px',
+                width: '2px',
+                margin: '0px 0px'
+              }}
+            >
               <SplitPane
-                split="vertical"
-                size={ide.sidebarIsExpanded ? sidebarSize : 20}
-                onChange={(size) => {
-                  setSidebarSize(size);
-                }}
-                allowResize={ide.sidebarIsExpanded}
-                minSize={125}
+                split="horizontal"
+                primary="second"
+                size={
+                  this.props.ide.consoleIsExpanded ? this.state.consoleSize : 29
+                }
+                minSize={29}
+                onChange={(size) => this.setState({ consoleSize: size })}
+                allowResize={this.props.ide.consoleIsExpanded}
+                className="editor-preview-subpanel"
               >
-                <Sidebar />
-                <SplitPane
-                  split="vertical"
-                  defaultSize="50%"
-                  onChange={() => {
-                    setIsOverlayVisible(true);
-                  }}
-                  onDragFinished={() => {
-                    // overlayRef.current.style.display = 'none';
-                    setIsOverlayVisible(false);
-                  }}
-                  resizerStyle={{
-                    borderLeftWidth: '2px',
-                    borderRightWidth: '2px',
-                    width: '2px',
-                    margin: '0px 0px'
-                  }}
-                >
-                  <SplitPane
-                    split="horizontal"
-                    primary="second"
-                    size={ide.consoleIsExpanded ? consoleSize : 29}
-                    minSize={29}
-                    onChange={(size) => setConsoleSize(size)}
-                    allowResize={ide.consoleIsExpanded}
-                    className="editor-preview-subpanel"
-                  >
-                    <Editor
-                      provideController={(ctl) => {
-                        cmRef.current = ctl;
-                      }}
-                    />
-                    <Console />
-                  </SplitPane>
-                  <section className="preview-frame-holder">
-                    <header className="preview-frame__header">
-                      <h2 className="preview-frame__title">
-                        {t('Toolbar.Preview')}
-                      </h2>
-                    </header>
-                    <div className="preview-frame__content">
-                      <div
-                        className="preview-frame-overlay"
-                        style={{ display: isOverlayVisible ? 'block' : 'none' }}
-                      />
-                      <div>
-                        {((preferences.textOutput || preferences.gridOutput) &&
-                          ide.isPlaying) ||
-                          ide.isAccessibleOutputPlaying}
-                      </div>
-                      <PreviewFrame cmController={cmRef.current} />
-                    </div>
-                  </section>
-                </SplitPane>
-              </SplitPane>
-            </main>
-          ) : (
-            <>
-              <FloatingActionButton syncFileContent={syncFileContent} />
-              <PreviewWrapper show={ide.isPlaying}>
-                <SplitPane
-                  style={{ position: 'static' }}
-                  split="horizontal"
-                  primary="second"
-                  minSize={200}
-                >
-                  <PreviewFrame
-                    fullView
-                    hide={!ide.isPlaying}
-                    cmController={cmRef.current}
-                  />
-                  <Console />
-                </SplitPane>
-              </PreviewWrapper>
-              <EditorSidebarWrapper show={!ide.isPlaying}>
-                <Sidebar />
                 <Editor
                   provideController={(ctl) => {
-                    cmRef.current = ctl;
+                    this.cmController = ctl;
                   }}
                 />
-              </EditorSidebarWrapper>
-            </>
-          )
-        }
-      </MediaQuery>
-      <IDEOverlays />
-    </RootPage>
-  );
+                <Console />
+              </SplitPane>
+              <section className="preview-frame-holder">
+                <header className="preview-frame__header">
+                  <h2 className="preview-frame__title">
+                    {this.props.t('Toolbar.Preview')}
+                  </h2>
+                </header>
+                <div className="preview-frame__content">
+                  <div
+                    className="preview-frame-overlay"
+                    ref={(element) => {
+                      this.overlay = element;
+                    }}
+                  />
+                  <div>
+                    {((this.props.preferences.textOutput ||
+                      this.props.preferences.gridOutput) &&
+                      this.props.ide.isPlaying) ||
+                      this.props.ide.isAccessibleOutputPlaying}
+                  </div>
+                  <PreviewFrame cmController={this.cmController} />
+                </div>
+              </section>
+            </SplitPane>
+          </SplitPane>
+        </main>
+        {this.props.ide.modalIsVisible && <NewFileModal />}
+        {this.props.ide.newFolderModalVisible && <NewFolderModal />}
+        {this.props.ide.uploadFileModalVisible && <UploadFileModal />}
+        {this.props.location.pathname === '/about' && (
+          <Overlay
+            title={this.props.t('About.Title')}
+            previousPath={this.props.ide.previousPath}
+            ariaLabel={this.props.t('About.Title')}
+          >
+            <About previousPath={this.props.ide.previousPath} />
+          </Overlay>
+        )}
+        {this.props.location.pathname === '/feedback' && (
+          <Overlay
+            title={this.props.t('IDEView.SubmitFeedback')}
+            previousPath={this.props.ide.previousPath}
+            ariaLabel={this.props.t('IDEView.SubmitFeedbackARIA')}
+          >
+            <Feedback />
+          </Overlay>
+        )}
+        {this.props.location.pathname.match(/add-to-collection$/) && (
+          <Overlay
+            ariaLabel={this.props.t('IDEView.AddCollectionARIA')}
+            title={this.props.t('IDEView.AddCollectionTitle')}
+            previousPath={this.props.ide.previousPath}
+            actions={<CollectionSearchbar />}
+            isFixedHeight
+          >
+            <AddToCollectionList projectId={this.props.params.project_id} />
+          </Overlay>
+        )}
+        {this.props.ide.shareModalVisible && (
+          <Overlay
+            title={this.props.t('IDEView.ShareTitle')}
+            ariaLabel={this.props.t('IDEView.ShareARIA')}
+            closeOverlay={this.props.closeShareModal}
+          >
+            <ShareModal
+              projectId={this.props.ide.shareModalProjectId}
+              projectName={this.props.ide.shareModalProjectName}
+              ownerUsername={this.props.ide.shareModalProjectUsername}
+            />
+          </Overlay>
+        )}
+        {this.props.ide.keyboardShortcutVisible && (
+          <Overlay
+            title={this.props.t('KeyboardShortcuts.Title')}
+            ariaLabel={this.props.t('KeyboardShortcuts.Title')}
+            closeOverlay={this.props.closeKeyboardShortcutModal}
+          >
+            <KeyboardShortcutModal />
+          </Overlay>
+        )}
+        {this.props.ide.errorType && (
+          <Overlay
+            title={this.props.t('Common.Error')}
+            ariaLabel={this.props.t('Common.ErrorARIA')}
+            closeOverlay={this.props.hideErrorModal}
+          >
+            <ErrorModal
+              type={this.props.ide.errorType}
+              closeModal={this.props.hideErrorModal}
+            />
+          </Overlay>
+        )}
+      </RootPage>
+    );
+  }
+}
+
+IDEView.propTypes = {
+  params: PropTypes.shape({
+    project_id: PropTypes.string,
+    username: PropTypes.string,
+    reset_password_token: PropTypes.string
+  }).isRequired,
+  location: PropTypes.shape({
+    pathname: PropTypes.string
+  }).isRequired,
+  getProject: PropTypes.func.isRequired,
+  user: PropTypes.shape({
+    authenticated: PropTypes.bool.isRequired,
+    id: PropTypes.string,
+    username: PropTypes.string
+  }).isRequired,
+  saveProject: PropTypes.func.isRequired,
+  ide: PropTypes.shape({
+    errorType: PropTypes.string,
+    keyboardShortcutVisible: PropTypes.bool.isRequired,
+    shareModalVisible: PropTypes.bool.isRequired,
+    shareModalProjectId: PropTypes.string.isRequired,
+    shareModalProjectName: PropTypes.string.isRequired,
+    shareModalProjectUsername: PropTypes.string.isRequired,
+    previousPath: PropTypes.string.isRequired,
+    previewIsRefreshing: PropTypes.bool.isRequired,
+    isPlaying: PropTypes.bool.isRequired,
+    isAccessibleOutputPlaying: PropTypes.bool.isRequired,
+    projectOptionsVisible: PropTypes.bool.isRequired,
+    preferencesIsVisible: PropTypes.bool.isRequired,
+    modalIsVisible: PropTypes.bool.isRequired,
+    uploadFileModalVisible: PropTypes.bool.isRequired,
+    newFolderModalVisible: PropTypes.bool.isRequired,
+    justOpenedProject: PropTypes.bool.isRequired,
+    sidebarIsExpanded: PropTypes.bool.isRequired,
+    consoleIsExpanded: PropTypes.bool.isRequired,
+    unsavedChanges: PropTypes.bool.isRequired
+  }).isRequired,
+  stopSketch: PropTypes.func.isRequired,
+  project: PropTypes.shape({
+    id: PropTypes.string,
+    name: PropTypes.string.isRequired,
+    owner: PropTypes.shape({
+      username: PropTypes.string,
+      id: PropTypes.string
+    }),
+    updatedAt: PropTypes.string
+  }).isRequired,
+  preferences: PropTypes.shape({
+    autosave: PropTypes.bool.isRequired,
+    fontSize: PropTypes.number.isRequired,
+    linewrap: PropTypes.bool.isRequired,
+    lineNumbers: PropTypes.bool.isRequired,
+    lintWarning: PropTypes.bool.isRequired,
+    textOutput: PropTypes.bool.isRequired,
+    gridOutput: PropTypes.bool.isRequired,
+    theme: PropTypes.string.isRequired,
+    autorefresh: PropTypes.bool.isRequired,
+    language: PropTypes.string.isRequired,
+    autocloseBracketsQuotes: PropTypes.bool.isRequired,
+    autocompleteHinter: PropTypes.bool.isRequired
+  }).isRequired,
+  closePreferences: PropTypes.func.isRequired,
+  setAllAccessibleOutput: PropTypes.func.isRequired,
+  selectedFile: PropTypes.shape({
+    id: PropTypes.string.isRequired,
+    content: PropTypes.string.isRequired,
+    name: PropTypes.string.isRequired
+  }).isRequired,
+  htmlFile: PropTypes.shape({
+    id: PropTypes.string.isRequired,
+    name: PropTypes.string.isRequired,
+    content: PropTypes.string.isRequired
+  }).isRequired,
+  expandSidebar: PropTypes.func.isRequired,
+  collapseSidebar: PropTypes.func.isRequired,
+  cloneProject: PropTypes.func.isRequired,
+  expandConsole: PropTypes.func.isRequired,
+  collapseConsole: PropTypes.func.isRequired,
+  updateFileContent: PropTypes.func.isRequired,
+  closeNewFolderModal: PropTypes.func.isRequired,
+  closeNewFileModal: PropTypes.func.isRequired,
+  closeShareModal: PropTypes.func.isRequired,
+  closeKeyboardShortcutModal: PropTypes.func.isRequired,
+  autosaveProject: PropTypes.func.isRequired,
+  setPreviousPath: PropTypes.func.isRequired,
+  showErrorModal: PropTypes.func.isRequired,
+  hideErrorModal: PropTypes.func.isRequired,
+  clearPersistedState: PropTypes.func.isRequired,
+  startSketch: PropTypes.func.isRequired,
+  closeUploadFileModal: PropTypes.func.isRequired,
+  t: PropTypes.func.isRequired,
+  isUserOwner: PropTypes.bool.isRequired
 };
 
-export default IDEView;
+function mapStateToProps(state) {
+  return {
+    selectedFile: selectActiveFile(state),
+    htmlFile: getHTMLFile(state.files),
+    ide: state.ide,
+    preferences: state.preferences,
+    editorAccessibility: state.editorAccessibility,
+    user: state.user,
+    project: state.project,
+    console: state.console,
+    isUserOwner: getIsUserOwner(state)
+  };
+}
+
+function mapDispatchToProps(dispatch) {
+  return bindActionCreators(
+    Object.assign(
+      {},
+      EditorAccessibilityActions,
+      FileActions,
+      ProjectActions,
+      IDEActions,
+      PreferencesActions,
+      UserActions,
+      ConsoleActions
+    ),
+    dispatch
+  );
+}
+
+export default withTranslation()(
+  connect(mapStateToProps, mapDispatchToProps)(IDEView)
+);
\ No newline at end of file