🚧 mount List components

client/modules/App/App.jsx

@@ -34,7 +34,8 @@ class App extends React.Component {
   render() {
     return (
       <div className="app">
-        {this.state.isMounted && !window.devToolsExtension && getConfig('NODE_ENV') === 'development' && <DevTools />}
+        {/* FIXME: remove false */}
+        {false && this.state.isMounted && !window.devToolsExtension && getConfig('NODE_ENV') === 'development' && <DevTools />}
         {this.props.children}
       </div>
     );

client/modules/Mobile/MobileExamples.jsx

@@ -7,9 +7,13 @@ import IconButton from '../../components/mobile/IconButton';
 import { ExitIcon } from '../../common/icons';
 import Footer from '../../components/mobile/Footer';
 import { prop, remSize } from '../../theme';
+import SketchList from '../IDE/components/SketchList';
+import CollectionList from '../IDE/components/CollectionList';
+import AssetList from '../IDE/components/AssetList';
+import Content from './MobileViewContent';
 
 const FooterTab = styled.div`
-  background: ${props => prop(`MobilePanel.default.${props.selected ? 'background' : 'foreground'}`)};
+  background: ${props => prop(props.selected ? 'backgroundColor' : 'MobilePanel.default.foreground')};
   color: ${props => prop(`MobilePanel.default.${props.selected ? 'foreground' : 'background'}`)};
   padding: ${remSize(16)};
   width: 100%;
@@ -19,24 +23,49 @@ const FooterTab = styled.div`
 const FooterTabContainer = styled.div`
   display: flex;
   
-  h3 { text-align: center; width: 100%;}
+  h3 { text-align: center; width: 100%; }
 `;
 
+// switch (tabKey) {
+//   case TabKey.assets:
+//     return <AssetList key={username} username={username} />;
+//   case TabKey.collections:
+//     return <CollectionList key={username} username={username} />;
+//   case TabKey.sketches:
+//   default:
+//     return <SketchList key={username} username={username} />;
+// }
+
+const Panels = {
+  Sketches: () => <SketchList />,
+  Collections: () => <CollectionList />,
+  Assets: () => <AssetList />
+};
 
 const MobileExamples = () => {
-  const tabs = ['Sketches', 'Collections', 'Assets'];
+  // const tabs = ['Sketches', 'Collections', 'Assets'];
-  const [selected, selectTab] = useState(tabs[0]);
+  const Tabs = Object.keys(Panels);
+  const [selected, selectTab] = useState(Tabs[0]);
   return (
     <Screen fullscreen>
       <Header inverted title="My Stuff">
         <IconButton to="/mobile" icon={ExitIcon} aria-label="Return to ide view" />
       </Header>
 
+
+      <Content>
+        {Panels[selected] && Panels[selected]()}
+      </Content>
+
+
       <Footer>
         <FooterTabContainer>
-
+          {Tabs.map(tab => (
-          {tabs.map(tab => (
+            <FooterTab
-            <FooterTab selected={tab === selected} onClick={() => selectTab(tab)}>
+              key={`tab-${tab}`}
+              selected={tab === selected}
+              onClick={() => selectTab(tab)}
+            >
               <h3>{tab}</h3>
             </FooterTab>))
           }

client/modules/Mobile/MobileSketchView.jsx

@@ -19,11 +19,7 @@ import { getHTMLFile } from '../IDE/reducers/files';
 import { ExitIcon } from '../../common/icons';
 import { remSize } from '../../theme';
 import Footer from '../../components/mobile/Footer';
-
+import Content from './MobileViewContent';
-const Content = styled.div`
-  z-index: 0;
-  margin-top: ${remSize(68)};
-`;
 
 const MobileSketchView = (props) => {
   const { files, ide, preferences } = useSelector(state => state);

client/modules/Mobile/MobileViewContent.jsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import styled from 'styled-components';
+import { remSize } from '../../theme';
+
+
+export default styled.div`
+  z-index: 0;
+  margin-top: ${remSize(68)};
+`;