Add framework icon in user's list of sandboxes (codesandbox#453)

* Add icons on SANDBOXES page.

* Improve how the Icon component is called in SandboxList.

* The wrong module path and lint errors fixed.

* Move the framework icons in new column.

* Make the icons a bit smaller.

Author: radi-cho

.all-contributorsrc

@@ -254,6 +254,17 @@
       "contributions": [
         "code"
       ]
+    },
+    {
+      "login": "radi-cho",
+      "name": "Radi Cho",
+      "avatar_url": "https://avatars3.githubusercontent.com/u/12954909?v=4",
+      "profile": "https://github.com/RSG-Group",
+      "contributions": [
+        "bug",
+        "code",
+        "ideas"
+      ]
     }
   ]
 }

README.md

@@ -1,4 +1,4 @@
-# [CodeSandbox](https://codesandbox.io) [![Chat](https://img.shields.io/badge/chat-on%20discord-7289da.svg)](https://discord.gg/KE3TbEZ) [![All Contributors](https://img.shields.io/badge/all_contributors-25-orange.svg?style=flat-square)](#contributors) [![Build Status](https://travis-ci.org/CompuIves/codesandbox-client.svg?branch=master)](https://travis-ci.org/CompuIves/codesandbox-client) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com) [![first-timers-only Friendly](https://img.shields.io/badge/first--timers--only-friendly-blue.svg)](http://www.firsttimersonly.com/)
+# [CodeSandbox](https://codesandbox.io) [![Chat](https://img.shields.io/badge/chat-on%20discord-7289da.svg)](https://discord.gg/KE3TbEZ) [![All Contributors](https://img.shields.io/badge/all_contributors-26-orange.svg?style=flat-square)](#contributors) [![Build Status](https://travis-ci.org/CompuIves/codesandbox-client.svg?branch=master)](https://travis-ci.org/CompuIves/codesandbox-client) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com) [![first-timers-only Friendly](https://img.shields.io/badge/first--timers--only-friendly-blue.svg)](http://www.firsttimersonly.com/)
 
 An online code editor tailored for web applications.
 
@@ -40,5 +40,5 @@ Thanks goes to these wonderful people
 | :---: | :---: | :---: | :---: | :---: | :---: | :---: |
 | [<img src="https://avatars3.githubusercontent.com/u/1239401?v=4" width="100px;"/><br /><sub><b>Johann Hubert Sonntagbauer</b></sub>](https://github.com/johann-sonntagbauer)<br />[🐛](https://github.com/CompuIves/codesandbox-client/issues?q=author%3Ajohann-sonntagbauer "Bug reports") [💻](https://github.com/CompuIves/codesandbox-client/commits?author=johann-sonntagbauer "Code") | [<img src="https://avatars2.githubusercontent.com/u/9586897?v=4" width="100px;"/><br /><sub><b>Joachim Seminck</b></sub>](https://github.com/jseminck)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=jseminck "Code") | [<img src="https://avatars3.githubusercontent.com/u/5210019?v=4" width="100px;"/><br /><sub><b>Subramanya Chakravarthy</b></sub>](http://chakrihacker.github.io)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=chakrihacker "Code") | [<img src="https://avatars3.githubusercontent.com/u/23088?v=4" width="100px;"/><br /><sub><b>Robert (Robby) O'Connor</b></sub>](http://robby.oconnor.ninja)<br />[🚇](#infra-robbyoconnor "Infrastructure (Hosting, Build-Tools, etc)") | [<img src="https://avatars0.githubusercontent.com/u/2083930?v=4" width="100px;"/><br /><sub><b>Bogdan Luca</b></sub>](https://github.com/lbogdan)<br />[🐛](https://github.com/CompuIves/codesandbox-client/issues?q=author%3Albogdan "Bug reports") [💻](https://github.com/CompuIves/codesandbox-client/commits?author=lbogdan "Code") | [<img src="https://avatars3.githubusercontent.com/u/6177621?v=4" width="100px;"/><br /><sub><b>Divjot Singh</b></sub>](http://bogas04.github.io)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=bogas04 "Code") | [<img src="https://avatars3.githubusercontent.com/u/5249539?v=4" width="100px;"/><br /><sub><b>Jason Nall</b></sub>](http://www.jsonnull.com)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=jsonnull "Code") |
 | [<img src="https://avatars3.githubusercontent.com/u/784056?v=4" width="100px;"/><br /><sub><b>Lionel</b></sub>](https://elrumordelaluz.com)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=elrumordelaluz "Code") [🎨](#design-elrumordelaluz "Design") | [<img src="https://avatars3.githubusercontent.com/u/170500?v=4" width="100px;"/><br /><sub><b>Philipp Brumm</b></sub>](https://github.com/brumm)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=brumm "Code") | [<img src="https://avatars2.githubusercontent.com/u/2678610?v=4" width="100px;"/><br /><sub><b>Valentin Hervieu</b></sub>](http://valentin-hervieu.fr)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=ValentinH "Code") [🐛](https://github.com/CompuIves/codesandbox-client/issues?q=author%3AValentinH "Bug reports") | [<img src="https://avatars0.githubusercontent.com/u/1499218?v=4" width="100px;"/><br /><sub><b>Anenth</b></sub>](http://anenth.js.org)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=Anenth "Code") [🎨](#design-Anenth "Design") [🤔](#ideas-Anenth "Ideas, Planning, & Feedback") | [<img src="https://avatars0.githubusercontent.com/u/410792?v=4" width="100px;"/><br /><sub><b>Dony Sukardi</b></sub>](http://dsds.io)<br />[🐛](https://github.com/CompuIves/codesandbox-client/issues?q=author%3Adonysukardi "Bug reports") [💻](https://github.com/CompuIves/codesandbox-client/commits?author=donysukardi "Code") | [<img src="https://avatars3.githubusercontent.com/u/89046?v=4" width="100px;"/><br /><sub><b>Geoffrey Dhuyvetters</b></sub>](https://github.com/duivvv)<br />[🎨](#design-duivvv "Design") [💻](https://github.com/CompuIves/codesandbox-client/commits?author=duivvv "Code") | [<img src="https://avatars3.githubusercontent.com/u/3381746?v=4" width="100px;"/><br /><sub><b>Eswar Yaganti</b></sub>](http://nyaganti.com)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=nagamalli9999 "Code") [🚇](#infra-nagamalli9999 "Infrastructure (Hosting, Build-Tools, etc)") |
-| [<img src="https://avatars3.githubusercontent.com/u/9488719?v=4" width="100px;"/><br /><sub><b>Frank Tan</b></sub>](https://github.com/tansongyang)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=tansongyang "Code") | [<img src="https://avatars0.githubusercontent.com/u/1650995?v=4" width="100px;"/><br /><sub><b>Bilal Budhani</b></sub>](https://bilalbudhani.com)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=BilalBudhani "Code") | [<img src="https://avatars3.githubusercontent.com/u/843342?v=4" width="100px;"/><br /><sub><b>El Juli</b></sub>](https://github.com/JulianMayorga)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=JulianMayorga "Code") | [<img src="https://avatars0.githubusercontent.com/u/13774309?v=4" width="100px;"/><br /><sub><b>Arthur Denner</b></sub>](https://github.com/arthurdenner)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=arthurdenner "Code") |
+| [<img src="https://avatars3.githubusercontent.com/u/9488719?v=4" width="100px;"/><br /><sub><b>Frank Tan</b></sub>](https://github.com/tansongyang)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=tansongyang "Code") | [<img src="https://avatars0.githubusercontent.com/u/1650995?v=4" width="100px;"/><br /><sub><b>Bilal Budhani</b></sub>](https://bilalbudhani.com)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=BilalBudhani "Code") | [<img src="https://avatars3.githubusercontent.com/u/843342?v=4" width="100px;"/><br /><sub><b>El Juli</b></sub>](https://github.com/JulianMayorga)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=JulianMayorga "Code") | [<img src="https://avatars0.githubusercontent.com/u/13774309?v=4" width="100px;"/><br /><sub><b>Arthur Denner</b></sub>](https://github.com/arthurdenner)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=arthurdenner "Code") | [<img src="https://avatars3.githubusercontent.com/u/12954909?v=4" width="100px;"/><br /><sub><b>Radi Cho</b></sub>](https://github.com/radi-cho)<br />[🐛](https://github.com/CompuIves/codesandbox-client/issues?q=author%3Aradi-cho "Bug reports") [💻](https://github.com/CompuIves/codesandbox-client/commits?author=radi-cho "Code") [🤔](#ideas-radi-cho "Ideas, Planning, & Feedback") |
 <!-- ALL-CONTRIBUTORS-LIST:END -->

packages/app/src/app/components/sandbox/SandboxList.js

@@ -7,6 +7,7 @@ import { Link } from 'react-router-dom';
 import PrivacyStatus from 'app/components/sandbox/PrivacyStatus';
 import delayEffect from 'common/utils/animation/delay-effect';
 import { sandboxUrl } from 'common/utils/url-generator';
+import getDefinition from 'common/templates';
 
 import type { SmallSandbox } from 'common/types';
 
@@ -79,6 +80,7 @@ export default ({ sandboxes, isCurrentUser, onDelete }: Props) => (
         <HeaderTitle>Title</HeaderTitle>
         <HeaderTitle>Created</HeaderTitle>
         <HeaderTitle>Updated</HeaderTitle>
+        <StatTitle />
         <StatTitle>
           <FullHeartIcon />
         </StatTitle>
@@ -92,24 +94,32 @@ export default ({ sandboxes, isCurrentUser, onDelete }: Props) => (
       </tr>
     </thead>
     <Body>
-      {sandboxes.map((s, i) => (
-        <SandboxRow index={i} key={s.id}>
-          <td>
-            <Link to={sandboxUrl(s)}>{s.title || s.id}</Link>
-            <PrivacyStatus privacy={s.privacy} asIcon />
-          </td>
-          <td>{moment(s.insertedAt).format('ll')}</td>
-          <td>{moment(s.updatedAt).format('ll')}</td>
-          <StatBody>{s.likeCount}</StatBody>
-          <StatBody>{s.viewCount}</StatBody>
-          <StatBody>{s.forkCount}</StatBody>
-          {isCurrentUser && (
-            <StatBody style={{ padding: '0.55rem 0.5rem', cursor: 'pointer' }}>
-              <DeleteSandboxButton id={s.id} onDelete={onDelete} />
+      {sandboxes.map((s, i) => {
+        const Icon = getDefinition(s.template).Icon || getDefinition().Icon;
+        return (
+          <SandboxRow index={i} key={s.id}>
+            <td>
+              <Link to={sandboxUrl(s)}>{s.title || s.id}</Link>
+              <PrivacyStatus privacy={s.privacy} asIcon />
+            </td>
+            <td>{moment(s.insertedAt).format('ll')}</td>
+            <td>{moment(s.updatedAt).format('ll')}</td>
+            <StatBody>
+              <Icon width={30} height={30} />
             </StatBody>
-          )}
-        </SandboxRow>
-      ))}
+            <StatBody>{s.likeCount}</StatBody>
+            <StatBody>{s.viewCount}</StatBody>
+            <StatBody>{s.forkCount}</StatBody>
+            {isCurrentUser && (
+              <StatBody
+                style={{ padding: '0.55rem 0.5rem', cursor: 'pointer' }}
+              >
+                <DeleteSandboxButton id={s.id} onDelete={onDelete} />
+              </StatBody>
+            )}
+          </SandboxRow>
+        );
+      })}
     </Body>
   </Table>
 );

packages/common/templates/index.js

@@ -119,6 +119,7 @@ export default function getDefinition(
     | 'create-react-app'
     | 'vue-cli'
     | 'preact-cli'
+    | 'svelte'
     | 'create-react-app-typescript'
 ) {
   if (!theme) {