refactor: icons

src/client/index.scss

@@ -197,7 +197,7 @@ select {
     }
   }
   .icon {
-    padding: 0.75em;
+    padding: 0 0.25em 0 0.5em;
   }
   .close {
     background-color: transparent;

src/client/resource-from-uri.js

@@ -0,0 +1,5 @@
+import {all} from './resources.scwp';
+
+const resources = Object.values(all()).map((M) => M.default);
+
+export default (uri) => resources.find((resource) => uri.match(resource.matcher));

src/client/resource.jsx

@@ -4,19 +4,17 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import {registerHooks} from 'scwp';
 
-import {all} from './resources.scwp';
+import resourceFromUri from './resource-from-uri';
 
 const decorate = compose(
   contempo(require('./resource.raw.scss')),
 );
 
-const resources = Object.values(all()).map((M) => M.default);
-
 const Resource = (props) => {
   const {
     uri,
   } = props;
-  const resource = resources.find((r) => uri.match(r.matcher));
+  const resource = resourceFromUri(uri);
   const {
     Component = () => (
       <div className="unloadable">

src/client/resources.jsx

@@ -11,6 +11,7 @@ import {
 } from 'react-tabs';
 
 import Resource from './resource';
+import resourceFromUri from './resource-from-uri';
 import {
   closeResource,
   setActiveResourceUri,
@@ -30,10 +31,12 @@ const Resources = (props) => {
         onSelect={(index) => dispatch(setActiveResourceUri(uris[index]))}
       >
         <TabList>
-          {uris.map((uri) => (
+          {uris.map((uri) => {
+            const resource = resourceFromUri(uri);
+            return (
               <Tab key={uri}>
                 <span className="wrapper">
-                <span className="icon" />
+                  <span className="icon"><resource.Icon /></span>
                   <span className="text">{uri}</span>
                   <button
                     className="close"
@@ -47,7 +50,8 @@ const Resources = (props) => {
                   </button>
                 </span>
               </Tab>
-          ))}
+            );
+          })}
         </TabList>
         {uris.map((uri) => (
           <TabPanel key={uri}>

src/client/resources.raw.scss

@@ -2,3 +2,7 @@
   height: 100%;
   width: 100%;
 }
+
+.wrapper .icon svg {
+  fill: #999999;
+}

src/client/sidebar.jsx

@@ -9,6 +9,7 @@ import ResourcesPacket from '~/common/packets/resources.packet';
 
 import useSocket from './hooks/useSocket';
 import FileExplorerTheme from './react-sortable-tree-theme-file-explorer';
+import resourceFromUri from './resource-from-uri';
 import {
   setActiveResourceUri,
 } from './state';
@@ -29,7 +30,9 @@ const sortTree = (tree) => tree
     return node;
   });
 
-const mapComponents = (tree) => tree.map((node) => ({
+const mapComponents = (tree) => tree.map((node) => {
+  const resource = node.uri && resourceFromUri(node.uri);
+  return ({
     ...node,
     children: node.children ? mapComponents(node.children) : [],
     rawTitle: node.title,
@@ -40,21 +43,12 @@ const mapComponents = (tree) => tree.map((node) => ({
           node.uri ? 'resource' : 'directory',
         )}
       >
-      {node.uri && (
+        {node.uri && <resource.Icon />}
-        <svg
-          height="1em"
-          viewBox="0 0 512 512"
-          width="1em"
-        >
-          <path
-            d="M 511.867188 247.648438 C 511.859375 247.4375 511.832031 247.230469 511.816406 247.015625 C 509.542969 181.140625 482.460938 119.558594 435.269531 73.253906 C 387.125 26.015625 323.460938 0 256 0 C 187.621094 0 123.332031 26.628906 74.980469 74.980469 C 26.628906 123.332031 0 187.621094 0 256 C 0 290.847656 28.351562 319.199219 63.199219 319.199219 C 98.050781 319.199219 126.398438 290.847656 126.398438 256 C 126.398438 157.960938 206.160156 78.199219 304.199219 78.199219 C 401.40625 78.199219 479.480469 154.28125 481.941406 251.402344 C 481.941406 251.449219 481.949219 251.496094 481.953125 251.542969 C 481.980469 253.027344 482 254.519531 482 256 C 482 380.617188 380.617188 482 256 482 C 247.714844 482 241 488.714844 241 497 C 241 505.285156 247.714844 512 256 512 C 324.378906 512 388.667969 485.371094 437.019531 437.019531 C 485.371094 388.667969 512 324.378906 512 256 C 512 253.21875 511.957031 250.410156 511.867188 247.648438 Z M 511.867188 247.648438 "
-          />
-        </svg>
-      )}
         <span className="text">{node.title}</span>
       </span>
     ),
-}));
+  });
+});
 
 const unmapComponents = (tree) => tree.map((node) => ({
   ...node,

src/common/resources/entity/entity.resource.js

@@ -1,7 +1,9 @@
 import EntityComponent from './entity';
+import Icon from './icon';
 
 export default {
   keys: ['entity', 'entities'],
+  Icon,
   matcher: /\.entity\.json$/,
   Component: EntityComponent,
   // eslint-disable-next-line global-require

src/common/resources/entity/icon.jsx

@@ -0,0 +1,13 @@
+import React from 'react';
+
+export default () => (
+  <svg
+    height="1em"
+    viewBox="0 0 512 512"
+    width="1em"
+  >
+    <path
+      d="M 511.867188 247.648438 C 511.859375 247.4375 511.832031 247.230469 511.816406 247.015625 C 509.542969 181.140625 482.460938 119.558594 435.269531 73.253906 C 387.125 26.015625 323.460938 0 256 0 C 187.621094 0 123.332031 26.628906 74.980469 74.980469 C 26.628906 123.332031 0 187.621094 0 256 C 0 290.847656 28.351562 319.199219 63.199219 319.199219 C 98.050781 319.199219 126.398438 290.847656 126.398438 256 C 126.398438 157.960938 206.160156 78.199219 304.199219 78.199219 C 401.40625 78.199219 479.480469 154.28125 481.941406 251.402344 C 481.941406 251.449219 481.949219 251.496094 481.953125 251.542969 C 481.980469 253.027344 482 254.519531 482 256 C 482 380.617188 380.617188 482 256 482 C 247.714844 482 241 488.714844 241 497 C 241 505.285156 247.714844 512 256 512 C 324.378906 512 388.667969 485.371094 437.019531 437.019531 C 485.371094 388.667969 512 324.378906 512 256 C 512 253.21875 511.957031 250.410156 511.867188 247.648438 Z M 511.867188 247.648438 "
+    />
+  </svg>
+);