[pull] master from codesandbox:master

packages/app/src/app/pages/Dashboard/Components/Folder/FolderCard.tsx

@@ -31,7 +31,7 @@ export const FolderCard: React.FC<FolderItemComponentProps> = ({
     direction="vertical"
     gap={2}
     onClick={onClick}
-    onDoubleClick={onDoubleClick}
+    onDoubleClick={editing ? undefined : onDoubleClick}
     onContextMenu={onContextMenu}
     {...props}
     css={css({

packages/app/src/app/pages/Dashboard/Components/Sandbox/SandboxCard.tsx

@@ -247,7 +247,7 @@ export const SandboxCard = ({
     <Stack
       direction="vertical"
       onClick={onClick}
-      onDoubleClick={onDoubleClick}
+      onDoubleClick={editing ? undefined : onDoubleClick}
       onBlur={onBlur}
       onContextMenu={onContextMenu}
       {...props}

packages/app/src/app/pages/Dashboard/Components/VariableGrid/index.tsx

@@ -80,6 +80,7 @@ interface IComponentForTypes {
 const ComponentForTypes: IComponentForTypes = {
   sandbox: React.memo(props => (
     <Sandbox
+      key={props.item.sandbox.id}
       page={props.page}
       item={props.item}
       isScrolling={props.isScrolling}
@@ -92,7 +93,7 @@ const ComponentForTypes: IComponentForTypes = {
       isScrolling={props.isScrolling}
     />
   )),
-  folder: props => <Folder {...props.item} />,
+  folder: props => <Folder key={props.item.name} {...props.item} />,
   repo: props => <Repo {...props.item} isScrolling={props.isScrolling} />,
   'new-folder': props => <CreateFolder {...props.item} />,
   'new-sandbox': () => <NewSandbox />,

packages/app/src/app/pages/Dashboard/Content/routes/Home/index.tsx

@@ -2,7 +2,10 @@ import React, { useEffect } from 'react';
 import { useAppState, useActions } from 'app/overmind';
 import { sandboxesTypes } from 'app/overmind/namespaces/dashboard/types';
 import { Header } from 'app/pages/Dashboard/Components/Header';
-import { VariableGrid } from 'app/pages/Dashboard/Components/VariableGrid';
+import {
+  VariableGrid,
+  GUTTER,
+} from 'app/pages/Dashboard/Components/VariableGrid';
 import { SelectionProvider } from 'app/pages/Dashboard/Components/Selection';
 import { dashboard as dashboardUrls } from '@codesandbox/common/lib/utils/url-generator';
 import { Helmet } from 'react-helmet';
@@ -11,6 +14,19 @@ import {
   DashboardTemplate,
   PageTypes,
 } from 'app/pages/Dashboard/types';
+import styled from 'styled-components';
+
+const BannerProjects = styled.a`
+  display: block;
+
+  width: calc(100% - ${2 * GUTTER}px);
+  max-width: GRID_MAX_WIDTH - 2 * GUTTER;
+  margin: 0 auto ${GUTTER}px;
+
+  img {
+    width: 100%;
+  }
+`;
 
 export const Home = () => {
   const {
@@ -84,6 +100,12 @@ export const Home = () => {
       <Helmet>
         <title>Dashboard - CodeSandbox</title>
       </Helmet>
+      <BannerProjects href="https://codesandbox.io/p/dashboard">
+        <img
+          src="/static/img/projects-banner.png"
+          alt="The CodeSandbox flow, for any project of any size. Try now"
+        />
+      </BannerProjects>
       <Header title="Home" activeTeam={activeTeam} showViewOptions />
       <VariableGrid page={pageType} items={items} />
     </SelectionProvider>

packages/app/src/app/pages/Profile/SandboxPicker/index.tsx

@@ -114,7 +114,7 @@ export const SandboxPicker: React.FC<{ closeModal?: () => void }> = ({
             })}
           >
             {collectionsInPath.map(collection => (
-              <Column key={collection.path} data-column>
+              <Column key={`${collection.path}${collection.name}`} data-column>
                 <FolderCard
                   collection={collection}
                   onClick={() => setPath(collection.path)}