refactor: simplification

packages/core/src/components/persea/global.scss

@@ -1,4 +1,3 @@
-@import './scss/colors.scss';
 @import './scss/reset.scss';
 @import './scss/tabs.scss';
 
@@ -9,7 +8,7 @@ html {
   background-color: #212121;
   color: #FFFFFF;
   --background-color-active: rgba(0, 120, 255, 0.5);
-  --color-active: #{$color-active};
+  --color-active: rgb(0, 99, 112);
   --message-font-family: verdana, arial, helvetica, sans-serif;
   --system-font-family: system-ui, Ubuntu, Droid Sans, sans-serif;
   --title-font-family: LatoLight, Ubuntu, "Droid Sans", sans-serif;
@@ -36,65 +35,13 @@ code {
   font-family: monospace;
 }
 
-label, .label {
-  background-color: rgba(255, 255, 255, 0.075);
-  color: #ffffff;
-  display: flex;
-  flex-direction: column;
-  flex-wrap: nowrap;
-  font-family: var(--thick-title-font-family);
-  font-size: 1em;
-  min-height: 3em;
-  padding: 1em;
-  user-select: none;
-  &:nth-of-type(2n+1) {
-    background-color: rgba(0, 0, 0, 0.15);
-  }
-  &.above {
-    flex-direction: column;
-    > div:first-child {
-      width: 100%;
-      margin-bottom: 1.25em;
-      margin-top: 1em;
-    }
-  }
-  // non-inline
-  flex-direction: column;
-  width: 100%;
-  > div:first-child {
-    font-size: 0.7em;
-    text-transform: uppercase;
-    opacity: 1;
-    margin-bottom: 1em;
-  }
-  &.inline {
-    align-items: center;
-    flex-direction: row;
-    justify-content: space-between;
-    > div:first-child {
-      flex-grow: 1;
-      margin: auto 0;
-    }
-  }
-  .center {
-    text-align: center;
-  }
-  .vertical {
-    padding: 0.5em 1em 0.5em 0;
-    writing-mode: vertical-rl;
-    + * {
-      flex-grow: 1;
-    }
-  }
-}
-
 [contenteditable] {
   cursor: text;
 }
 
-a {
-  color: lighten($color-active, 20%);
-}
+// a {
+//   color: lighten($color-active, 20%);
+// }
 
 input, textarea {
   background: #333;
@@ -104,21 +51,21 @@ input, textarea {
   padding: 0.5em;
 }
 
-textarea {
-  overflow: hidden;
-  resize: none;
-}
+// textarea {
+//   overflow: hidden;
+//   resize: none;
+// }
 
-fieldset {
-  background-color: #151515;
-	border: 1px solid rgba(255, 255, 255, 0.1);
-  display: inline-block;
-  margin: 0 0 1em 0;
-  padding: 0.5em;
-  position: relative;
-  top: -0.5em;
-  width: 100%;
-}
+// fieldset {
+//   background-color: #151515;
+// 	border: 1px solid rgba(255, 255, 255, 0.1);
+//   display: inline-block;
+//   margin: 0 0 1em 0;
+//   padding: 0.5em;
+//   position: relative;
+//   top: -0.5em;
+//   width: 100%;
+// }
 
 button, .button {
   background-color: rgba(0, 0, 0, 0.25);
@@ -156,15 +103,23 @@ select {
 }
 
 *:focus {
-  box-shadow: 0 0 2px 0 $color-active;
+  box-shadow: 0 0 2px 0 var(--color-active);
   outline: none;
   z-index: 1;
 }
 
-.muted {
-  color: $color-muted;
+label, .label {
+  background-color: rgba(255, 255, 255, 0.075);
+  color: #ffffff;
+  font-family: var(--thick-title-font-family);
+  font-size: 1em;
+  user-select: none;
 }
 
+// .muted {
+//   color: $color-muted;
+// }
+
 @font-face {
   font-family: 'LatoLight';
   src: url('./fonts/Lato-Light.woff') format('woff');

packages/core/src/components/persea/scss/colors.scss

@@ -1,4 +0,0 @@
-$color-active: rgb(0, 99, 112);
-$color-muted: #bbbbbb;
-$color-owner: #d65130;
-$color-unread: rgb(180, 0, 0);

packages/core/src/components/persea/scss/graphics.scss

@@ -1,8 +0,0 @@
-@mixin shadow-border($size, $color, $radius: $size) {
-  box-shadow:
-    -#{$size} -#{$size} $radius $color,
-       $size     $size  $radius $color,
-    -#{$size}    $size  $radius $color,
-       $size  -#{$size} $radius $color
-  ;
-}

packages/core/src/components/persea/sidebar/index.jsx

@@ -13,12 +13,13 @@ import styles from './index.module.scss';
 
 function Sidebar({expanded, setExpanded}) {
   const flecks = useFlecks();
-  const sidebarImplementations = flecks.invokeMerge('@persea/core.sidebar');
+  // Sidebar panels.
+  const sidebarPanels = flecks.invokeMerge('@persea/core.sidebar');
   const [sidebar, setSidebar] = useLocalStorage(
     '@persea/core/sidebar',
-    Object.keys(sidebarImplementations).shift(),
+    Object.keys(sidebarPanels).shift(),
   );
-  const Icons = Object.entries(sidebarImplementations)
+  const Icons = Object.entries(sidebarPanels)
     .map(([key, {Icon}]) => (
       <IconComponent
         className={Icon}
@@ -36,7 +37,7 @@ function Sidebar({expanded, setExpanded}) {
         }}
       />
     ));
-  const {Content} = sidebarImplementations[sidebar];
+  const {Content} = sidebarPanels[sidebar];
   return (
     <div className={classnames(styles.sidebar, expanded && styles.expanded)}>
       <IconsComponent Icons={Icons} />

packages/core/src/sidebar/organization/content.module.scss

@@ -1,6 +1,3 @@
-.content {
-}
-
 .empty {
   p {
     font-family: var(--message-font-family);

packages/core/src/sidebar/organization/organization/actions.jsx

@@ -1,24 +1,26 @@
 /* eslint-disable jsx-a11y/control-has-associated-label */
 import {PropTypes, React} from '@flecks/react';
 
+import styles from './actions.module.scss';
+
 const OrganizationActions = ({
   collapseAll,
 }) => (
-  <div className="organization-actions">
+  <div className={styles.organizationActions}>
     <button
-      className="button new-file"
+      className={styles.newFile}
       label="New resource"
       title="New resource"
       type="button"
     />
     <button
-      className="button new-folder"
+      className={styles.newFolder}
       label="New directory"
       title="New directory"
       type="button"
     />
     <button
-      className="button collapse-all"
+      className={styles.collapseAll}
       label="Collapse all"
       onMouseDown={collapseAll}
       title="Collapse all"

packages/core/src/sidebar/organization/organization/actions.module.scss

@@ -0,0 +1,23 @@
+.organizationActions {
+  line-height: 0;
+  min-width: 4em;
+  button {
+    background-color: transparent;
+    background-size: cover;
+    background-repeat: no-repeat;
+    border: none;
+    margin: 0;
+    margin-right: 0.25em;
+    width: 1em;
+    height: 1em;
+    &.collapseAll {
+      background-image: url('./img/collapse-all.svg');
+    }
+    &.newFile {
+      background-image: url('./img/new-file.svg');
+    }
+    &.newFolder {
+      background-image: url('./img/new-folder.svg');
+    }
+  }
+}

packages/core/src/sidebar/organization/organization/index.jsx

@@ -19,14 +19,13 @@ import {
 
 import useLocalStorage from '../../../hooks/use-local-storage';
 import OrganizationActions from './actions';
-import './index.scss';
+import styles from './index.module.scss';
 
 const normalizeDisplayName = (displayName) => (
   displayName.startsWith('HotExported') ? displayName.slice(11) : displayName
 );
 
 const Organization = ({
-  className,
   label,
   resourcePaths,
   uuid,
@@ -34,7 +33,7 @@ const Organization = ({
   const dispatch = useDispatch();
   const current = useSelector(currentResourceSelector);
   const flecks = useFlecks();
-  const [collapsed, setCollapsed] = useLocalStorage('@persea/core/collapsed', {});
+  const [expanded, setExpanded] = useLocalStorage('@persea/core.expanded', {});
   const treeFromResourcePath = (tree, uuid, [isFile, resourcePath]) => {
     const parts = resourcePath.split('/');
     parts.shift();
@@ -43,12 +42,9 @@ const Organization = ({
       let index = walk.nodes.findIndex(({label}) => label === part);
       if (-1 === index) {
         index = walk.nodes.length;
-        const path = join('/project', uuid, resourcePath);
         walk.nodes.push({
           ...(isFile ? {} : {nodes: []}),
-          classNames: {
-            collapsed: undefined === collapsed[path] ? true : collapsed[path],
-          },
+          styles,
           label: part,
           value: join(uuid, resourcePath),
         });
@@ -62,34 +58,30 @@ const Organization = ({
       .forEach((resourcePath) => treeFromResourcePath(tree, uuid, resourcePath));
     return tree.nodes;
   };
-  const path = join('/project', uuid);
   return (
-    <div className={classnames('organization', className)}>
+    <div className={styles.organization}>
       <Tree
         activate={({value, nodes}) => {
-          const path = join('/project', value);
           if (!nodes) {
-            const parts = path.split('/');
-            parts.splice(1, 2);
+            const parts = value.split('/');
+            parts.splice(0, 1);
             dispatch(setCurrentResource(parts.join('/')));
           }
           else {
-            const next = createNextState(collapsed, (draft) => {
+            const next = createNextState(expanded, (draft) => {
               /* eslint-disable no-param-reassign */
-              if (path in draft) {
-                delete draft[path];
+              if (value in draft) {
+                delete draft[value];
               }
               else {
-                draft[path] = false;
+                draft[value] = true;
               }
               /* eslint-enable no-param-reassign */
             });
-            setCollapsed(next);
+            setExpanded(next);
           }
         }}
-        classNames={{
-          collapsed: undefined === collapsed[path] ? true : collapsed[path],
-        }}
+        styles={styles}
         indent={0.5}
         isActive={(value) => {
           if (!uuid || !current) {
@@ -97,6 +89,7 @@ const Organization = ({
           }
           return value === join(uuid, current);
         }}
+        isCollapsed={(value) => !(value in expanded)}
         label={label}
         nodes={nodesFromResourcePaths(label, uuid, resourcePaths)}
         renderLabel={({label, nodes, value}) => {
@@ -105,32 +98,34 @@ const Organization = ({
             .find(({matcher}) => value.match(matcher))
             .Component;
           return (
-            <div className={classnames('label', 'inline')}>
-              {!nodes && <div className={`icon ${normalizeDisplayName(displayName)}`} />}
-              <span className="text">{label}</span>
+            <div className={classnames(styles.label, styles.inline)}>
+              {!nodes && (
+                <div
+                  className={classnames(styles.icon, styles[normalizeDisplayName(displayName)])}
+                />
+              )}
+              <span className={styles.text}>{label}</span>
               {value === uuid && (
                 <OrganizationActions
                   collapseAll={(event) => {
                     event.stopPropagation();
-                    setCollapsed({});
+                    setExpanded({});
                   }}
                 />
               )}
             </div>
           );
         }}
+        sort={Tree.fileSort}
         value={uuid}
       />
     </div>
   );
 };
 
-Organization.defaultProps = {
-  className: '',
-};
+Organization.defaultProps = {};
 
 Organization.propTypes = {
-  className: PropTypes.string,
   label: PropTypes.string.isRequired,
   // eslint-disable-next-line react/forbid-prop-types
   resourcePaths: PropTypes.arrayOf(PropTypes.any).isRequired,

packages/core/src/sidebar/organization/organization/index.module.scss

@@ -0,0 +1,82 @@
+.organization {
+  height: 100%;
+  overflow-x: hidden;
+  overflow-y: auto;
+  transition: 0.2s left;
+  width: 100%;
+  .indent {
+    padding-left: 0.35em;
+  }
+  > .tree > .node > .item .label {
+    > div {
+      display: none;
+    }
+    > .text {
+      flex-grow: 1;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+  &:hover > .tree > .node > .item .label > div {
+    display: block;
+  }
+}
+
+.label {
+  background-color: transparent;
+  color: #ffffff;
+  display: flex;
+  font-family: var(--thick-title-font-family);
+  font-size: 1em;
+  padding: 0.25em 0;
+  user-select: none;
+  &.inline {
+    font-size: 0.85em;
+    justify-content: flex-start;
+    > div:first-child.icon {
+      background-size: cover;
+      flex-grow: unset;
+      margin-right: 0.5em;
+      width: 1em;
+      height: 1em;
+      &.AudioComponent {
+        background-image: url('./img/sound.png');
+      }
+      &.Binary {
+        background-image: url('./img/question.png');
+      }
+      &.EntityComponent {
+        background-image: url('./img/joystick.png');
+      }
+      &.ImageComponent {
+        background-image: url('./img/image.png');
+      }
+      &.RoomComponent {
+        background-image: url('./img/map.png');
+      }
+      &.ScriptComponent {
+        background-image: url('./img/script.png');
+      }
+      &.SoundComponent {
+        background-image: url('./img/music.png');
+      }
+      &.TextComponent {
+        background-image: url('./img/note.png');
+      }
+    }
+  }
+}
+
+.node {
+  &.parent > .item .label:before {
+    color: #999;
+    content: "\25BE";
+    margin: 0 0.5em;
+  }
+  &.collapsed {
+    &.parent > .item .label:before {
+      color: #999;
+      content: "\25B8";
+    }
+  }
+}

packages/core/src/sidebar/organization/organization/index.scss

@@ -1,94 +0,0 @@
-.organization {
-  height: 100%;
-  overflow-x: hidden;
-  overflow-y: auto;
-  transition: 0.2s left;
-  width: 100%;
-  .indent {
-    padding-left: 0.35em;
-  }
-  > .tree > .node > .item .label > .text {
-    flex-grow: 1;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-  .label {
-    background-color: transparent;
-    &.inline {
-      font-size: 0.85em;
-      justify-content: flex-start;
-      > div:first-child.icon {
-        background-size: cover;
-        flex-grow: unset;
-        margin-right: 0.5em;
-        width: 1em;
-        height: 1em;
-        &.AudioComponent {
-          background-image: url('./img/sound.png');
-        }
-        &.Binary {
-          background-image: url('./img/question.png');
-        }
-        &.EntityComponent {
-          background-image: url('./img/joystick.png');
-        }
-        &.ImageComponent {
-          background-image: url('./img/image.png');
-        }
-        &.RoomComponent {
-          background-image: url('./img/map.png');
-        }
-        &.ScriptComponent {
-          background-image: url('./img/script.png');
-        }
-        &.SoundComponent {
-          background-image: url('./img/music.png');
-        }
-        &.TextComponent {
-          background-image: url('./img/note.png');
-        }
-      }
-    }
-  }
-  .node {
-    &.parent > .item .label:before {
-      color: #999;
-      content: "\25BE";
-      margin-right: 0.25em;
-    }
-    &.collapsed {
-      &.parent > .item .label:before {
-        color: #999;
-        content: "\25B8";
-      }
-    }
-  }
-}
-
-.organization-actions {
-  display: none;
-  line-height: 0;
-  min-width: 4em;
-  .organization:hover & {
-    display: block;
-  }
-  button {
-    background-color: transparent;
-    background-size: cover;
-    background-repeat: no-repeat;
-    border: none;
-    margin: 0;
-    margin-right: 0.25em;
-    width: 1em;
-    height: 1em;
-    &.collapse-all {
-      background-image: url('./img/collapse-all.svg');
-    }
-    &.new-file {
-      background-image: url('./img/new-file.svg');
-    }
-    &.new-folder {
-      background-image: url('./img/new-folder.svg');
-    }
-  }
-}