add skeleton to templates and start

packages/app/src/app/pages/NewDashboard/Components/SandboxCard/index.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { sandboxUrl } from '@codesandbox/common/lib/utils/url-generator';
+import { Element, Link } from '@codesandbox/components';
+
+export const SandboxCard = ({ sandbox }) => (
+  <Element>
+    <Link href={sandboxUrl({ id: sandbox.id, alias: sandbox.alias })}>
+      {sandbox.title || sandbox.alias || sandbox.id}
+    </Link>
+  </Element>
+);

packages/app/src/app/pages/NewDashboard/Content/index.tsx

@@ -1,5 +1,5 @@
-// import React from 'react';
-// import { Route, Switch, Redirect, withRouter } from 'react-router-dom';
+import React from 'react';
+import { Route, Switch, Redirect, withRouter } from 'react-router-dom';
 
 // import { RecentSandboxes } from './routes/RecentSandboxes';
 // import PathedSandboxes from './routes/PathedSandboxes';
@@ -8,27 +8,33 @@
 // import SearchSandboxes from './routes/SearchSandboxes';
 // import CreateTeam from './routes/CreateTeam';
 // import TeamView from './routes/TeamView';
+import { Element } from '@codesandbox/components';
+import { StartSandboxes } from './routes/StartSandboxes';
+import { Templates } from './routes/Templates';
 
-// const Content = () => (
-//   <Switch>
-//     <Route path="/dashboard/recent" component={RecentSandboxes} />
-//     <Route path="/dashboard/trash" component={DeletedSandboxes} />
-//     <Route path="/dashboard/templates" exact component={Templates} />
-//     <Route path="/dashboard/sandboxes/:path*" component={PathedSandboxes} />
-//     <Route path="/dashboard/search" component={SearchSandboxes} />
-//     <Route path="/dashboard/teams/new" component={CreateTeam} />
-//     <Route exact path="/dashboard/teams/:teamId" component={TeamView} />
-//     <Route
-//       path="/dashboard/teams/:teamId/sandboxes/:path*"
-//       component={PathedSandboxes}
-//     />
-//     <Route
-//       path="/dashboard/teams/:teamId/templates"
-//       component={Templates}
-//       exact
-//     />
-//     <Redirect to="/dashboard/recent" />
-//   </Switch>
-// );
+const ContentComponent = () => (
+  <Element style={{ width: 960, margin: '40px auto' }}>
+    <Switch>
+      <Route path="/new-dashboard/start" component={StartSandboxes} />
+      <Route path="/new-dashboard/templates" component={Templates} />
+      {/* <Route path="/dashboard/trash" component={DeletedSandboxes} />
+    <Route path="/dashboard/templates" exact component={Templates} />
+    <Route path="/dashboard/sandboxes/:path*" component={PathedSandboxes} />
+    <Route path="/dashboard/search" component={SearchSandboxes} />
+    <Route path="/dashboard/teams/new" component={CreateTeam} />
+    <Route exact path="/dashboard/teams/:teamId" component={TeamView} />
+    <Route
+      path="/dashboard/teams/:teamId/sandboxes/:path*"
+      component={PathedSandboxes}
+    />
+    <Route
+      path="/dashboard/teams/:teamId/templates"
+      component={Templates}
+      exact
+    /> */}
+      <Redirect to="/new-dashboard/start" />
+    </Switch>
+  </Element>
+);
 
-// export default withRouter(Content);
+export const Content = withRouter(ContentComponent);

packages/app/src/app/pages/NewDashboard/Content/routes/StartSandboxes/index.tsx

@@ -0,0 +1,95 @@
+import React from 'react';
+import css from '@styled-system/css';
+import { Element, Text, Button } from '@codesandbox/components';
+import { useQuery } from '@apollo/react-hooks';
+import { useOvermind } from 'app/overmind';
+import {
+  RecentSandboxesQuery,
+  RecentSandboxesQueryVariables,
+  ListPersonalTemplatesQuery,
+  ListPersonalTemplatesQueryVariables,
+} from 'app/graphql/types';
+import { LIST_PERSONAL_TEMPLATES } from 'app/components/CreateNewSandbox/queries';
+import { RECENT_SANDBOXES_CONTENT_QUERY } from '../../../queries';
+import { SandboxCard } from '../../../Components/SandboxCard';
+
+export const StartSandboxes = () => {
+  const {
+    state,
+    actions: { modalOpened },
+  } = useOvermind();
+  const { loading, error, data } = useQuery<
+    RecentSandboxesQuery,
+    RecentSandboxesQueryVariables
+  >(RECENT_SANDBOXES_CONTENT_QUERY, {
+    variables: {
+      orderField: state.dashboard.orderBy.field,
+      // @ts-ignore
+      orderDirection: state.dashboard.orderBy.order.toUpperCase(),
+    },
+  });
+
+  const {
+    data: templatesData,
+    error: templatesError,
+    loading: templatesLoading,
+  } = useQuery<ListPersonalTemplatesQuery, ListPersonalTemplatesQueryVariables>(
+    LIST_PERSONAL_TEMPLATES,
+    {
+      variables: {},
+      fetchPolicy: 'cache-and-network',
+    }
+  );
+
+  if (error || templatesError) {
+    return <Text>Error</Text>;
+  }
+
+  if (loading || templatesLoading) {
+    return <Text>loading</Text>;
+  }
+
+  const sandboxes = data && data.me && data.me.sandboxes;
+  const templates =
+    templatesData &&
+    templatesData.me &&
+    templatesData.me.recentlyUsedTemplates.slice(0, 4);
+
+  return (
+    <Element>
+      <Text marginBottom={4} block>
+        Recently used Templates
+      </Text>
+      <Element
+        css={css({
+          display: 'grid',
+          gridTemplateColumns: 'repeat(4,1fr)',
+          gridGap: 6,
+        })}
+        marginBottom={8}
+      >
+        {templates.map(({ sandbox }) => (
+          <SandboxCard sandbox={sandbox} key={sandbox.id} />
+        ))}
+      </Element>
+
+      <Text marginBottom={4} block>
+        Your Recent Sandboxes
+      </Text>
+      <Element
+        css={css({
+          display: 'grid',
+          gridTemplateColumns: 'repeat(4,1fr)',
+          gridGap: 6,
+        })}
+      >
+        <Button onClick={() => modalOpened({ modal: 'newSandbox' })}>
+          New Sandbox
+        </Button>
+        {sandboxes.map(sandbox => (
+          <SandboxCard sandbox={sandbox} key={sandbox.id} />
+        ))}
+      </Element>
+    </Element>
+  );
+};

packages/app/src/app/pages/NewDashboard/Content/routes/Templates/index.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import css from '@styled-system/css';
+import { Element, Text } from '@codesandbox/components';
+import { useQuery } from '@apollo/react-hooks';
+import {
+  ListTemplatesQuery,
+  ListTemplatesQueryVariables,
+} from 'app/graphql/types';
+import { LIST_OWNED_TEMPLATES } from 'app/components/CreateNewSandbox/queries';
+import { SandboxCard } from '../../../Components/SandboxCard';
+
+export const Templates = () => {
+  const { loading, error, data } = useQuery<
+    ListTemplatesQuery,
+    ListTemplatesQueryVariables
+  >(LIST_OWNED_TEMPLATES, {
+    variables: { showAll: false },
+  });
+
+  if (error) {
+    return <Text>Error</Text>;
+  }
+
+  if (loading) {
+    return <Text>loading</Text>;
+  }
+
+  const templates = data && data.me && data.me.templates;
+
+  return (
+    <Element>
+      <Text marginBottom={4} block>
+        Templates
+      </Text>
+      <Element
+        css={css({
+          display: 'grid',
+          gridTemplateColumns: 'repeat(4,1fr)',
+          gridGap: 6,
+        })}
+      >
+        {templates.map(({ sandbox }) => (
+          <SandboxCard sandbox={sandbox} key={sandbox.id} />
+        ))}
+      </Element>
+    </Element>
+  );
+};

packages/app/src/app/pages/NewDashboard/Sidebar/index.tsx

@@ -1,4 +1,38 @@
 import React from 'react';
-import { Element } from '@codesandbox/components';
+import { List, Link, ListAction } from '@codesandbox/components';
+import { Link as BaseLink } from 'react-router-dom';
 
-export const Sidebar = () => <Element>I AM A SIDEBAR</Element>;
+export const Sidebar = () => (
+  <List>
+    <ListAction>
+      <Link to="start" as={BaseLink}>
+        Start
+      </Link>
+    </ListAction>
+    <ListAction>
+      <Link to="drafts" as={BaseLink}>
+        Drafts
+      </Link>
+    </ListAction>
+    <ListAction>
+      <Link to="recent" as={BaseLink}>
+        Recent
+      </Link>
+    </ListAction>
+    <ListAction>
+      <Link to="all" as={BaseLink}>
+        All Sandboxes
+      </Link>
+    </ListAction>
+    <ListAction>
+      <Link to="templates" as={BaseLink}>
+        Templates
+      </Link>
+    </ListAction>
+    <ListAction>
+      <Link to="deleted" as={BaseLink}>
+        Recently Deleted
+      </Link>
+    </ListAction>
+  </List>
+);

packages/app/src/app/pages/NewDashboard/index.tsx

@@ -1,30 +1,13 @@
 import { signInPageUrl } from '@codesandbox/common/lib/utils/url-generator';
+import css from '@styled-system/css';
 import React, { useEffect, FunctionComponent } from 'react';
 import { Redirect } from 'react-router-dom';
-import { createGlobalStyle } from 'styled-components';
 import { client } from 'app/graphql/client';
 import { useOvermind } from 'app/overmind';
 import codesandboxBlack from '@codesandbox/components/lib/themes/codesandbox-black';
-import { Element, ThemeProvider, Stack } from '@codesandbox/components';
+import { ThemeProvider, Stack } from '@codesandbox/components';
 import { Sidebar } from './Sidebar';
-
-type Theme = {
-  colors: any;
-  name: string;
-};
-
-const GlobalStyle = createGlobalStyle`
-  html body {
-    font-family: 'Inter', sans-serif;
-    background: ${({ theme }: { theme: Theme }) =>
-      theme.colors.sideBar.background} !important;
-    color: ${({ theme }: { theme: Theme }) => theme.colors.sideBar.foreground};
-
-    * {
-      box-sizing: border-box;
-    }
-  }
-`;
+import { Content } from './Content';
 
 export const Dashboard: FunctionComponent = () => {
   const {
@@ -47,10 +30,18 @@ export const Dashboard: FunctionComponent = () => {
 
   return (
     <ThemeProvider theme={codesandboxBlack}>
-      <GlobalStyle />
-      <Stack gap={6} style={{ minHeight: '100vh' }}>
+      <Stack
+        gap={6}
+        css={css({
+          backgroundColor: 'sideBar.background',
+          fontFamily: "'Inter', sans-serif",
+          color: 'sideBar.foreground',
+          minHeight: '100vh',
+          width: '100vw',
+        })}
+      >
         <Sidebar />
-        <Element>I AM THE CONTENT</Element>
+        <Content />
       </Stack>
     </ThemeProvider>
   );

packages/app/src/app/pages/NewDashboard/queries.ts

@@ -222,7 +222,7 @@ export const RECENT_SANDBOXES_CONTENT_QUERY = gql`
   query RecentSandboxes($orderField: String!, $orderDirection: Direction!) {
     me {
       sandboxes(
-        limit: 20
+        limit: 7
         orderBy: { field: $orderField, direction: $orderDirection }
       ) {
         ...Sandbox

packages/app/src/app/pages/NewSandbox/index.tsx

@@ -10,7 +10,7 @@ import {
 import { useOvermind } from 'app/overmind';
 import { Navigation } from 'app/pages/common/Navigation';
 
-import {MaxWidth} from './elements'
+import { MaxWidth } from './elements';
 
 export const NewSandbox: FunctionComponent = () => {
   const {

packages/components/src/components/Link/index.tsx

@@ -5,7 +5,10 @@ import { Text, ITextProps } from '../Text';
 
 type LinkProps = React.AnchorHTMLAttributes<HTMLAnchorElement> &
   React.AnchorHTMLAttributes<HTMLSpanElement> &
-  ITextProps;
+  ITextProps & {
+    as?: any;
+    to?: string;
+  };
 
 const LinkElement = styled(Text).attrs({ as: 'a' })<LinkProps>(
   css({