From c68c8f1ef9c1038f4d50612fb56b564d1ca8524c Mon Sep 17 00:00:00 2001
From: cha0s <git@cha0s.io>
Date: Sun, 28 Jun 2020 11:24:20 -0500
Subject: [PATCH] refactor: icons

---
 src/client/index.scss                         |  2 +-
 src/client/resource-from-uri.js               |  5 ++
 src/client/resource.jsx                       |  6 +--
 src/client/resources.jsx                      | 40 ++++++++--------
 src/client/resources.raw.scss                 |  4 ++
 src/client/sidebar.jsx                        | 46 ++++++++-----------
 .../resources/entity/entity.resource.js       |  2 +
 src/common/resources/entity/icon.jsx          | 13 ++++++
 8 files changed, 69 insertions(+), 49 deletions(-)
 create mode 100644 src/client/resource-from-uri.js
 create mode 100644 src/common/resources/entity/icon.jsx

diff --git a/src/client/index.scss b/src/client/index.scss
index e3e9715..14a0371 100644
--- a/src/client/index.scss
+++ b/src/client/index.scss
@@ -197,7 +197,7 @@ select {
     }
   }
   .icon {
-    padding: 0.75em;
+    padding: 0 0.25em 0 0.5em;
   }
   .close {
     background-color: transparent;
diff --git a/src/client/resource-from-uri.js b/src/client/resource-from-uri.js
new file mode 100644
index 0000000..2751ab4
--- /dev/null
+++ b/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));
diff --git a/src/client/resource.jsx b/src/client/resource.jsx
index 20c1131..5cd5da0 100644
--- a/src/client/resource.jsx
+++ b/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">
diff --git a/src/client/resources.jsx b/src/client/resources.jsx
index fd63831..25601f2 100644
--- a/src/client/resources.jsx
+++ b/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,24 +31,27 @@ const Resources = (props) => {
         onSelect={(index) => dispatch(setActiveResourceUri(uris[index]))}
       >
         <TabList>
-          {uris.map((uri) => (
-            <Tab key={uri}>
-              <span className="wrapper">
-                <span className="icon" />
-                <span className="text">{uri}</span>
-                <button
-                  className="close"
-                  onClick={(event) => {
-                    dispatch(closeResource(uri));
-                    event.stopPropagation();
-                  }}
-                  type="button"
-                >
-                  ✕
-                </button>
-              </span>
-            </Tab>
-          ))}
+          {uris.map((uri) => {
+            const resource = resourceFromUri(uri);
+            return (
+              <Tab key={uri}>
+                <span className="wrapper">
+                  <span className="icon"><resource.Icon /></span>
+                  <span className="text">{uri}</span>
+                  <button
+                    className="close"
+                    onClick={(event) => {
+                      dispatch(closeResource(uri));
+                      event.stopPropagation();
+                    }}
+                    type="button"
+                  >
+                    ✕
+                  </button>
+                </span>
+              </Tab>
+            );
+          })}
         </TabList>
         {uris.map((uri) => (
           <TabPanel key={uri}>
diff --git a/src/client/resources.raw.scss b/src/client/resources.raw.scss
index 72ee5eb..655942b 100644
--- a/src/client/resources.raw.scss
+++ b/src/client/resources.raw.scss
@@ -2,3 +2,7 @@
   height: 100%;
   width: 100%;
 }
+
+.wrapper .icon svg {
+  fill: #999999;
+}
diff --git a/src/client/sidebar.jsx b/src/client/sidebar.jsx
index 017920f..ac9bf95 100644
--- a/src/client/sidebar.jsx
+++ b/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,32 +30,25 @@ const sortTree = (tree) => tree
     return node;
   });
 
-const mapComponents = (tree) => tree.map((node) => ({
-  ...node,
-  children: node.children ? mapComponents(node.children) : [],
-  rawTitle: node.title,
-  title: (
-    <span
-      className={classnames(
-        'title',
-        node.uri ? 'resource' : 'directory',
-      )}
-    >
-      {node.uri && (
-        <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 mapComponents = (tree) => tree.map((node) => {
+  const resource = node.uri && resourceFromUri(node.uri);
+  return ({
+    ...node,
+    children: node.children ? mapComponents(node.children) : [],
+    rawTitle: node.title,
+    title: (
+      <span
+        className={classnames(
+          'title',
+          node.uri ? 'resource' : 'directory',
+        )}
+      >
+        {node.uri && <resource.Icon />}
+        <span className="text">{node.title}</span>
+      </span>
+    ),
+  });
+});
 
 const unmapComponents = (tree) => tree.map((node) => ({
   ...node,
diff --git a/src/common/resources/entity/entity.resource.js b/src/common/resources/entity/entity.resource.js
index 43b1df6..1a8ba59 100644
--- a/src/common/resources/entity/entity.resource.js
+++ b/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
diff --git a/src/common/resources/entity/icon.jsx b/src/common/resources/entity/icon.jsx
new file mode 100644
index 0000000..28f5f8f
--- /dev/null
+++ b/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>
+);