From 71a86a586a2de2437a393613770dbc8d640867cc Mon Sep 17 00:00:00 2001
From: cha0s <git@cha0s.io>
Date: Sat, 19 Mar 2022 21:37:30 -0500
Subject: [PATCH] feat: sidebar

---
 packages/core/src/components/persea/index.jsx |  29 +++-----
 .../src/components/persea/index.module.scss   |   2 +-
 .../src/components/persea/resource/index.jsx  |  36 ++++++++++
 .../persea/resource/index.module.scss         |  16 +++++
 .../persea/{ => resource}/login/index.jsx     |   4 --
 .../{ => resource}/login/index.module.scss    |  16 ++---
 .../persea/sidebar/content/index.jsx          |  27 +++++++
 .../persea/sidebar/content/index.module.scss  |  14 ++++
 .../components/persea/sidebar/icon/index.jsx  |  41 +++++++++++
 .../persea/sidebar/icon/index.module.scss     |  32 +++++++++
 .../components/persea/sidebar/icons/index.jsx |  21 ++++++
 .../persea/sidebar/icons/index.module.scss    |   5 ++
 .../src/components/persea/sidebar/index.jsx   |  58 +++++++++++++++
 .../persea/sidebar/index.module.scss          |  10 +++
 .../src/components/project/bottom/index.jsx   |  33 ---------
 .../project/bottom/index.module.scss          |  46 ------------
 .../components/project/bottom/settings.svg    |   1 -
 .../project/organization/img/map.png          | Bin 5617 -> 0 bytes
 packages/core/src/hooks/use-local-storage.js  |  18 +++++
 packages/core/src/index.js                    |   9 ++-
 .../core/src/sidebar/organization/content.jsx |  29 ++++++++
 .../sidebar/organization/content.module.scss  |   6 ++
 .../sidebar/organization/icon_document.svg    |  48 +++++++++++++
 .../core/src/sidebar/organization/index.js    |   8 +++
 .../organization}/organization/actions.jsx    |   0
 .../organization/img/collapse-all.svg         |   0
 .../organization}/organization/img/image.png  | Bin
 .../organization/img/joystick.png             | Bin
 .../organization/organization/img}/map.png    | Bin
 .../organization}/organization/img/music.png  | Bin
 .../organization/img/new-file.svg             |   0
 .../organization/img/new-folder.svg           |   0
 .../organization}/organization/img/note.png   | Bin
 .../organization/img/question.png             | Bin
 .../organization}/organization/img/script.png | Bin
 .../organization}/organization/img/sound.png  | Bin
 .../organization}/organization/index.jsx      |   7 +-
 .../organization}/organization/index.scss     |  68 +++++++++---------
 .../core/src/sidebar/projects/content.jsx     |  49 +++++++++++++
 .../src/sidebar/projects/content.module.scss  |  44 ++++++++++++
 .../core/src/sidebar/projects/icon_books.svg  |  49 +++++++++++++
 packages/core/src/sidebar/projects/index.js   |   8 +++
 packages/core/src/state/index.js              |   3 +
 packages/core/src/state/project.js            |  29 ++++++++
 packages/core/src/state/projects.js           |   4 +-
 45 files changed, 614 insertions(+), 156 deletions(-)
 create mode 100644 packages/core/src/components/persea/resource/index.jsx
 create mode 100644 packages/core/src/components/persea/resource/index.module.scss
 rename packages/core/src/components/persea/{ => resource}/login/index.jsx (78%)
 rename packages/core/src/components/persea/{ => resource}/login/index.module.scss (82%)
 create mode 100644 packages/core/src/components/persea/sidebar/content/index.jsx
 create mode 100644 packages/core/src/components/persea/sidebar/content/index.module.scss
 create mode 100644 packages/core/src/components/persea/sidebar/icon/index.jsx
 create mode 100644 packages/core/src/components/persea/sidebar/icon/index.module.scss
 create mode 100644 packages/core/src/components/persea/sidebar/icons/index.jsx
 create mode 100644 packages/core/src/components/persea/sidebar/icons/index.module.scss
 create mode 100644 packages/core/src/components/persea/sidebar/index.jsx
 create mode 100644 packages/core/src/components/persea/sidebar/index.module.scss
 delete mode 100644 packages/core/src/components/project/bottom/index.jsx
 delete mode 100644 packages/core/src/components/project/bottom/index.module.scss
 delete mode 100644 packages/core/src/components/project/bottom/settings.svg
 delete mode 100644 packages/core/src/components/project/organization/img/map.png
 create mode 100644 packages/core/src/hooks/use-local-storage.js
 create mode 100644 packages/core/src/sidebar/organization/content.jsx
 create mode 100644 packages/core/src/sidebar/organization/content.module.scss
 create mode 100644 packages/core/src/sidebar/organization/icon_document.svg
 create mode 100644 packages/core/src/sidebar/organization/index.js
 rename packages/core/src/{components/project => sidebar/organization}/organization/actions.jsx (100%)
 rename packages/core/src/{components/project => sidebar/organization}/organization/img/collapse-all.svg (100%)
 rename packages/core/src/{components/project => sidebar/organization}/organization/img/image.png (100%)
 rename packages/core/src/{components/project => sidebar/organization}/organization/img/joystick.png (100%)
 rename packages/core/src/{components/project/bottom => sidebar/organization/organization/img}/map.png (100%)
 rename packages/core/src/{components/project => sidebar/organization}/organization/img/music.png (100%)
 rename packages/core/src/{components/project => sidebar/organization}/organization/img/new-file.svg (100%)
 rename packages/core/src/{components/project => sidebar/organization}/organization/img/new-folder.svg (100%)
 rename packages/core/src/{components/project => sidebar/organization}/organization/img/note.png (100%)
 rename packages/core/src/{components/project => sidebar/organization}/organization/img/question.png (100%)
 rename packages/core/src/{components/project => sidebar/organization}/organization/img/script.png (100%)
 rename packages/core/src/{components/project => sidebar/organization}/organization/img/sound.png (100%)
 rename packages/core/src/{components/project => sidebar/organization}/organization/index.jsx (96%)
 rename packages/core/src/{components/project => sidebar/organization}/organization/index.scss (51%)
 create mode 100644 packages/core/src/sidebar/projects/content.jsx
 create mode 100644 packages/core/src/sidebar/projects/content.module.scss
 create mode 100644 packages/core/src/sidebar/projects/icon_books.svg
 create mode 100644 packages/core/src/sidebar/projects/index.js
 create mode 100644 packages/core/src/state/project.js

diff --git a/packages/core/src/components/persea/index.jsx b/packages/core/src/components/persea/index.jsx
index e4a1a38..c0d0bc8 100644
--- a/packages/core/src/components/persea/index.jsx
+++ b/packages/core/src/components/persea/index.jsx
@@ -2,36 +2,23 @@ import {
   React,
   hot,
 } from '@flecks/react';
-// import {
-//   Navigate,
-//   Route,
-//   Routes,
-// } from '@flecks/react/router';
-// import {useSelector} from '@flecks/redux';
-// import {userIdSelector} from '@flecks/user';
 
 import './global.scss';
 import styles from './index.module.scss';
 
-// import Dashboard from '../dashboard';
-import Login from './login';
-// import ProjectRoute from '../project/route';
+import useLocalStorage from '../../hooks/use-local-storage';
+import Resource from './resource';
+import Sidebar from './sidebar';
 
-// eslint-disable-next-line arrow-body-style
-const Persea = () => {
-  // const isLoggedIn = useSelector(userIdSelector);
+function Persea() {
+  const [expanded, setExpanded] = useLocalStorage('@persea/core/expanded', true);
   return (
     <div className={styles.persea}>
-      <Login />
-      {/* <Routes>
-        <Route exact path="/" element={<Navigate to={isLoggedIn ? '/dashboard' : '/login'} />} />
-        <Route path="/login" element={isLoggedIn ? <Navigate to="/" /> : <UserLocalLogin />} />
-        <Route path="/dashboard" element={<Dashboard />} />
-        <Route path="/project/*" element={<ProjectRoute />} />
-      </Routes> */}
+      <Sidebar expanded={expanded} setExpanded={setExpanded} />
+      <Resource expanded={expanded} />
     </div>
   );
-};
+}
 
 Persea.displayName = 'Persea';
 
diff --git a/packages/core/src/components/persea/index.module.scss b/packages/core/src/components/persea/index.module.scss
index b1586c3..0384176 100644
--- a/packages/core/src/components/persea/index.module.scss
+++ b/packages/core/src/components/persea/index.module.scss
@@ -1,5 +1,5 @@
-
 .persea {
+  display: flex;
   height: 100vh;
   width: 100vw;
 }
diff --git a/packages/core/src/components/persea/resource/index.jsx b/packages/core/src/components/persea/resource/index.jsx
new file mode 100644
index 0000000..589baf4
--- /dev/null
+++ b/packages/core/src/components/persea/resource/index.jsx
@@ -0,0 +1,36 @@
+import {classnames, PropTypes, React} from '@flecks/react';
+import {useSelector} from '@flecks/redux';
+
+import styles from './index.module.scss';
+
+import {projectsSelector} from '../../../state/projects';
+import Login from './login';
+
+function Resource({expanded}) {
+  const {structure} = useSelector(projectsSelector);
+  const projects = Object.entries(structure);
+  return (
+    <div className={classnames(styles.resource, expanded && styles.expanded)}>
+      {
+        projects.length > 0
+          ? <p>{projects.length}</p>
+          : (
+            <div className={styles.login}>
+              <p>You must log in to access your projects.</p>
+              <Login />
+            </div>
+          )
+      }
+    </div>
+  );
+}
+
+Resource.defaultProps = {};
+
+Resource.displayName = 'Resource';
+
+Resource.propTypes = {
+  expanded: PropTypes.bool.isRequired,
+};
+
+export default Resource;
diff --git a/packages/core/src/components/persea/resource/index.module.scss b/packages/core/src/components/persea/resource/index.module.scss
new file mode 100644
index 0000000..efbb350
--- /dev/null
+++ b/packages/core/src/components/persea/resource/index.module.scss
@@ -0,0 +1,16 @@
+.resource {
+  background-color: #1a1a1a;
+  height: 100%;
+  width: calc(100% - 3rem);
+
+  &.expanded {
+    width: calc(100% - 25rem);
+  }
+
+  .login {
+    p {
+      margin: 3em;
+      text-align: center;
+    }
+  }
+}
diff --git a/packages/core/src/components/persea/login/index.jsx b/packages/core/src/components/persea/resource/login/index.jsx
similarity index 78%
rename from packages/core/src/components/persea/login/index.jsx
rename to packages/core/src/components/persea/resource/login/index.jsx
index 6c0872c..49030c0 100644
--- a/packages/core/src/components/persea/login/index.jsx
+++ b/packages/core/src/components/persea/resource/login/index.jsx
@@ -6,10 +6,6 @@ import styles from './index.module.scss';
 function Login() {
   return (
     <div className={styles.login}>
-      <div>
-        <h2>Sign in</h2>
-        <p>You must sign in to continue</p>
-      </div>
       <UserLocalLogin />
     </div>
   );
diff --git a/packages/core/src/components/persea/login/index.module.scss b/packages/core/src/components/persea/resource/login/index.module.scss
similarity index 82%
rename from packages/core/src/components/persea/login/index.module.scss
rename to packages/core/src/components/persea/resource/login/index.module.scss
index 6c34019..f3ca7ff 100644
--- a/packages/core/src/components/persea/login/index.module.scss
+++ b/packages/core/src/components/persea/resource/login/index.module.scss
@@ -1,16 +1,6 @@
 .login {
   margin: auto;
   max-width: 60%;
-  padding-top: 5%;
-
-  > div {
-    text-align: center;
-    padding-bottom: 2em;
-
-    h2 {
-      padding-bottom: 1em;
-    }
-  }
 
   form {
     background-color: #272727;
@@ -38,6 +28,7 @@
     div {
       align-items: center;
       display: flex;
+      flex-wrap: wrap;
       justify-content: space-between;
 
       [type="checkbox"] {
@@ -48,8 +39,9 @@
       }
 
       label {
-        display: block;
+        display: inline-block;
         flex-direction: row;
+        width: auto;
 
         input, span {
           margin: 0;
@@ -57,7 +49,7 @@
       }
 
       a {
-        padding: 1em 1em 1em 0;
+        padding: 1em;
         text-decoration: none;
         white-space: nowrap;
       }
diff --git a/packages/core/src/components/persea/sidebar/content/index.jsx b/packages/core/src/components/persea/sidebar/content/index.jsx
new file mode 100644
index 0000000..a3aab29
--- /dev/null
+++ b/packages/core/src/components/persea/sidebar/content/index.jsx
@@ -0,0 +1,27 @@
+import {PropTypes, React} from '@flecks/react';
+
+import styles from './index.module.scss';
+
+function Content({Content, name}) {
+  return (
+    <div className={styles.content}>
+      {Content && (
+        <>
+          <p className={styles.name}>{name}</p>
+          {Content}
+        </>
+      )}
+    </div>
+  );
+}
+
+Content.defaultProps = {};
+
+Content.displayName = 'Content';
+
+Content.propTypes = {
+  Content: PropTypes.node.isRequired,
+  name: PropTypes.string.isRequired,
+};
+
+export default Content;
diff --git a/packages/core/src/components/persea/sidebar/content/index.module.scss b/packages/core/src/components/persea/sidebar/content/index.module.scss
new file mode 100644
index 0000000..f75a84b
--- /dev/null
+++ b/packages/core/src/components/persea/sidebar/content/index.module.scss
@@ -0,0 +1,14 @@
+.content {
+  background-color: #272727;
+  height: 100%;
+  overflow: auto;
+  width: calc(100% - 3rem);
+}
+
+.name {
+  color: #ccc;
+  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+  font-size: 0.8em;
+  padding: 1em;
+  text-transform: uppercase;
+}
diff --git a/packages/core/src/components/persea/sidebar/icon/index.jsx b/packages/core/src/components/persea/sidebar/icon/index.jsx
new file mode 100644
index 0000000..811f8b1
--- /dev/null
+++ b/packages/core/src/components/persea/sidebar/icon/index.jsx
@@ -0,0 +1,41 @@
+import {classnames, PropTypes, React} from '@flecks/react';
+
+import styles from './index.module.scss';
+
+function Icon({
+  className,
+  isActive,
+  name,
+  onClick,
+}) {
+  return (
+    <label
+      className={styles.label}
+      key={name}
+    >
+      <span>{name}</span>
+      {/* eslint-disable-next-line jsx-a11y/control-has-associated-label */}
+      <button
+        className={classnames(styles.icon, className, isActive && styles.active)}
+        onClick={onClick}
+        type="button"
+      />
+    </label>
+  );
+}
+
+Icon.defaultProps = {
+  className: '',
+  onClick: () => {},
+};
+
+Icon.displayName = 'Icon';
+
+Icon.propTypes = {
+  className: PropTypes.string,
+  isActive: PropTypes.bool.isRequired,
+  name: PropTypes.string.isRequired,
+  onClick: PropTypes.func,
+};
+
+export default Icon;
diff --git a/packages/core/src/components/persea/sidebar/icon/index.module.scss b/packages/core/src/components/persea/sidebar/icon/index.module.scss
new file mode 100644
index 0000000..0ea8327
--- /dev/null
+++ b/packages/core/src/components/persea/sidebar/icon/index.module.scss
@@ -0,0 +1,32 @@
+.icon {
+  background-color: #333;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: 70%;
+  border: 0;
+  border-left: 2px solid transparent;
+  height: 3rem;
+  margin: 0;
+  padding: 0;
+  width: 3rem;
+
+  &:focus {
+    box-shadow: none;
+  }
+
+  &:hover {
+    background-color: #333;
+  }
+
+  &.active {
+    border-left: 2px solid white;
+  }
+}
+
+.label {
+  padding: 0;
+
+  span {
+    display: none;
+  }
+}
diff --git a/packages/core/src/components/persea/sidebar/icons/index.jsx b/packages/core/src/components/persea/sidebar/icons/index.jsx
new file mode 100644
index 0000000..bea8a16
--- /dev/null
+++ b/packages/core/src/components/persea/sidebar/icons/index.jsx
@@ -0,0 +1,21 @@
+import {PropTypes, React} from '@flecks/react';
+
+import styles from './index.module.scss';
+
+function Icons({Icons}) {
+  return (
+    <div className={styles.icons}>
+      {Icons}
+    </div>
+  );
+}
+
+Icons.defaultProps = {};
+
+Icons.displayName = 'Icons';
+
+Icons.propTypes = {
+  Icons: PropTypes.arrayOf(PropTypes.node).isRequired,
+};
+
+export default Icons;
diff --git a/packages/core/src/components/persea/sidebar/icons/index.module.scss b/packages/core/src/components/persea/sidebar/icons/index.module.scss
new file mode 100644
index 0000000..802a68a
--- /dev/null
+++ b/packages/core/src/components/persea/sidebar/icons/index.module.scss
@@ -0,0 +1,5 @@
+.icons {
+  background-color: #333;
+  width: 3rem;
+  height: 100%;
+}
diff --git a/packages/core/src/components/persea/sidebar/index.jsx b/packages/core/src/components/persea/sidebar/index.jsx
new file mode 100644
index 0000000..b5fbcc4
--- /dev/null
+++ b/packages/core/src/components/persea/sidebar/index.jsx
@@ -0,0 +1,58 @@
+import {
+  classnames,
+  PropTypes,
+  React,
+  useFlecks,
+} from '@flecks/react';
+
+import styles from './index.module.scss';
+
+import useLocalStorage from '../../../hooks/use-local-storage';
+import ContentComponent from './content';
+import IconComponent from './icon';
+import IconsComponent from './icons';
+
+function Sidebar({expanded, setExpanded}) {
+  const flecks = useFlecks();
+  const sidebarImplementations = flecks.invokeMerge('@persea/core.sidebar');
+  const [sidebar, setSidebar] = useLocalStorage(
+    '@persea/core/sidebar',
+    Object.keys(sidebarImplementations).shift(),
+  );
+  const Icons = Object.entries(sidebarImplementations)
+    .map(([key, {Icon}]) => (
+      <IconComponent
+        className={Icon}
+        isActive={expanded && sidebar === key}
+        key={key}
+        name={key}
+        onClick={() => {
+          if (key === sidebar) {
+            setExpanded(!expanded);
+          }
+          else if (!expanded) {
+            setExpanded(true);
+          }
+          setSidebar(key);
+        }}
+      />
+    ));
+  const {Content} = sidebarImplementations[sidebar];
+  return (
+    <div className={classnames(styles.sidebar, expanded && styles.expanded)}>
+      <IconsComponent Icons={Icons} />
+      <ContentComponent Content={expanded && <Content />} name={sidebar} />
+    </div>
+  );
+}
+
+Sidebar.defaultProps = {};
+
+Sidebar.displayName = 'Sidebar';
+
+Sidebar.propTypes = {
+  expanded: PropTypes.bool.isRequired,
+  setExpanded: PropTypes.func.isRequired,
+};
+
+export default Sidebar;
diff --git a/packages/core/src/components/persea/sidebar/index.module.scss b/packages/core/src/components/persea/sidebar/index.module.scss
new file mode 100644
index 0000000..6f79671
--- /dev/null
+++ b/packages/core/src/components/persea/sidebar/index.module.scss
@@ -0,0 +1,10 @@
+.sidebar {
+  display: flex;
+  height: 100%;
+  width: 3rem;
+
+  &.expanded {
+    max-width: 100%;
+    width: 25rem;
+  }
+}
diff --git a/packages/core/src/components/project/bottom/index.jsx b/packages/core/src/components/project/bottom/index.jsx
deleted file mode 100644
index 711cb4b..0000000
--- a/packages/core/src/components/project/bottom/index.jsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import {
-  classnames,
-  React,
-} from '@flecks/react';
-
-import locals from './index.module.scss';
-
-function Bottom() {
-  const buttons = [
-    <button className={classnames(locals.organization)} type="button">
-      <svg height="512pt" viewBox="0 0 512 512" width="512pt" xmlns="http://www.w3.org/2000/svg">
-        <path d="m512 312v-160h-230v62h-152v-54h100v-160h-230v160h90v294h192v58h230v-160h-230v62h-152v-160h152v58zm-472-272h150v80h-150zm282 352h150v80h-150zm0-200h150v80h-150zm0 0" />
-      </svg>
-    </button>,
-    // eslint-disable-next-line jsx-a11y/control-has-associated-label
-    <button className={classnames(locals.resource, 'active')} type="button" />,
-  ];
-  return (
-    <div className={locals.bottom}>
-      <div className={locals.buttons}>
-        {buttons}
-      </div>
-    </div>
-  );
-}
-
-Bottom.defaultProps = {};
-
-Bottom.displayName = 'Bottom';
-
-Bottom.propTypes = {};
-
-export default Bottom;
diff --git a/packages/core/src/components/project/bottom/index.module.scss b/packages/core/src/components/project/bottom/index.module.scss
deleted file mode 100644
index a7241b1..0000000
--- a/packages/core/src/components/project/bottom/index.module.scss
+++ /dev/null
@@ -1,46 +0,0 @@
-.bottom {
-  height: 3rem;
-  width: 100%;
-}
-
-.buttons {
-  align-items: center;
-  display: flex;
-  height: 100%;
-  justify-content: space-around;
-
-  button {
-    background-color: transparent;
-    border: 2px transparent;
-    height: 2em;
-    padding: 0.5rem;
-    width: 2em;
-
-    &:focus, &:hover {
-      background-color: transparent;
-      box-shadow: none;
-    }
-
-    &:global(.active) {
-      border-bottom: 1px solid #009fb4;
-    }
-
-    svg {
-      fill: #999;
-      height: 100%;
-      width: 100%;
-    }
-  }
-}
-
-button.side {
-  padding: 0.35rem;
-}
-
-button.resource {
-  background-image: url('./map.png');
-  background-origin: content-box;
-  background-repeat: no-repeat;
-  background-size: cover;
-  padding: 0.25rem;
-}
diff --git a/packages/core/src/components/project/bottom/settings.svg b/packages/core/src/components/project/bottom/settings.svg
deleted file mode 100644
index 127f981..0000000
--- a/packages/core/src/components/project/bottom/settings.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg id="Layer_1" enable-background="new 0 0 512 512" height="512" viewBox="0 0 512 512" width="512" xmlns="http://www.w3.org/2000/svg"><g><path d="m113.147 53.166h-2.175v-22.456c0-16.934-13.777-30.71-30.788-30.71-16.934 0-30.71 13.776-30.71 30.71v22.456c-22.985-1.145-43.857 15.46-43.857 39.432v123.282c0 24.002 20.867 40.512 43.856 39.431v225.979c0 16.934 13.776 30.71 30.788 30.71 16.934 0 30.71-13.776 30.71-30.71v-225.979c22.21.781 41.606-16.895 41.606-39.431v-42.882c0-9.434-15.078-9.883-15.078.002 0 14.287.078 28.588.078 42.88 0 13.471-10.959 24.431-24.431 24.431h-68.098c-13.471 0-24.431-10.96-24.431-24.431v-123.282c0-13.472 10.959-24.432 24.431-24.432h68.099c13.471 0 24.431 10.96 24.431 24.432 0 13.466-.078 26.941-.078 40.402 0 9.459 15.078 9.869 15.078.004v-40.406c0-21.743-17.689-39.432-39.431-39.432zm-17.175 428.124c0 8.662-7.047 15.71-15.788 15.71-8.663 0-15.71-7.048-15.71-15.71v-225.979h31.498zm-31.498-450.58c0-8.662 7.047-15.71 15.788-15.71 8.663 0 15.71 7.048 15.71 15.71v22.456h-31.498z"/><path d="m290.612 255.094h-3.3v-224.384c0-16.934-13.776-30.71-30.788-30.71-16.934 0-30.71 13.776-30.71 30.71v224.384c-22.604-.988-42.731 16.189-42.731 39.431v123.283c0 23.349 20.118 40.263 42.731 39.432v24.051c0 16.934 13.777 30.71 30.788 30.71 16.934 0 30.71-13.776 30.71-30.71v-24.051c22.604.988 42.731-16.189 42.731-39.432v-123.284c0-21.742-17.689-39.43-39.431-39.43zm-49.799-224.384c0-8.662 7.048-15.71 15.788-15.71 8.663 0 15.71 7.048 15.71 15.71v224.384h-31.498zm31.499 450.58c0 8.662-7.047 15.71-15.788 15.71-8.663 0-15.71-7.048-15.71-15.71v-24.051h31.498zm42.731-63.482c0 13.472-10.96 24.432-24.431 24.432h-68.099c-13.471 0-24.431-10.96-24.431-24.432v-123.284c0-13.471 10.959-24.431 24.431-24.431h68.099c13.471 0 24.431 10.96 24.431 24.431z"/><path d="m466.952 139.191h-3.3v-108.481c0-16.934-13.776-30.71-30.788-30.71-16.934 0-30.71 13.776-30.71 30.71v108.481c-22.604-.988-42.731 16.19-42.731 39.432v123.282c0 23.349 20.118 40.263 42.731 39.432v139.953c0 16.934 13.777 30.71 30.788 30.71 16.934 0 30.71-13.776 30.71-30.71v-44.29c0-9.697-15-9.697-15 0v44.29c0 8.662-7.047 15.71-15.788 15.71-8.663 0-15.71-7.048-15.71-15.71v-139.953h31.498v52.663c0 9.697 15 9.697 15 0v-52.663c22.604.988 42.731-16.189 42.731-39.432v-123.282c0-21.742-17.689-39.432-39.431-39.432zm-49.799-108.481c0-8.662 7.048-15.71 15.788-15.71 8.663 0 15.71 7.048 15.71 15.71v108.481h-31.498zm74.23 271.195c0 13.472-10.96 24.432-24.431 24.432h-68.099c-13.471 0-24.431-10.96-24.431-24.432v-123.282c0-13.472 10.959-24.432 24.431-24.432h68.099c13.471 0 24.431 10.96 24.431 24.432z"/><path d="m102.347 100.484h-46.498c-4.142 0-7.5 3.357-7.5 7.5s3.358 7.5 7.5 7.5h46.498c4.142 0 7.5-3.357 7.5-7.5s-3.358-7.5-7.5-7.5z"/><path d="m102.347 146.738h-46.498c-4.142 0-7.5 3.357-7.5 7.5s3.358 7.5 7.5 7.5h46.498c4.142 0 7.5-3.357 7.5-7.5s-3.358-7.5-7.5-7.5z"/><path d="m102.347 192.993h-46.498c-4.142 0-7.5 3.357-7.5 7.5s3.358 7.5 7.5 7.5h46.498c4.142 0 7.5-3.357 7.5-7.5s-3.358-7.5-7.5-7.5z"/><path d="m279.812 302.412h-46.498c-4.142 0-7.5 3.357-7.5 7.5s3.358 7.5 7.5 7.5h46.498c4.142 0 7.5-3.357 7.5-7.5s-3.358-7.5-7.5-7.5z"/><path d="m279.812 348.666h-46.498c-4.142 0-7.5 3.357-7.5 7.5s3.358 7.5 7.5 7.5h46.498c4.142 0 7.5-3.357 7.5-7.5s-3.358-7.5-7.5-7.5z"/><path d="m279.812 394.921h-46.498c-4.142 0-7.5 3.357-7.5 7.5s3.358 7.5 7.5 7.5h46.498c4.142 0 7.5-3.357 7.5-7.5s-3.358-7.5-7.5-7.5z"/><path d="m456.151 186.51h-46.498c-4.142 0-7.5 3.357-7.5 7.5s3.358 7.5 7.5 7.5h46.498c4.142 0 7.5-3.357 7.5-7.5s-3.358-7.5-7.5-7.5z"/><path d="m456.151 232.764h-46.498c-4.142 0-7.5 3.357-7.5 7.5s3.358 7.5 7.5 7.5h46.498c4.142 0 7.5-3.357 7.5-7.5s-3.358-7.5-7.5-7.5z"/><path d="m456.151 279.019h-46.498c-4.142 0-7.5 3.357-7.5 7.5s3.358 7.5 7.5 7.5h46.498c4.142 0 7.5-3.357 7.5-7.5s-3.358-7.5-7.5-7.5z"/></g></svg>
\ No newline at end of file
diff --git a/packages/core/src/components/project/organization/img/map.png b/packages/core/src/components/project/organization/img/map.png
deleted file mode 100644
index 1f2d25343497ca491c41b457a7a291edb46a82d1..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 5617
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
LNkvXXu0mjf8bdP=

diff --git a/packages/core/src/hooks/use-local-storage.js b/packages/core/src/hooks/use-local-storage.js
new file mode 100644
index 0000000..283e49d
--- /dev/null
+++ b/packages/core/src/hooks/use-local-storage.js
@@ -0,0 +1,18 @@
+import {
+  useLayoutEffect,
+  useState,
+} from '@flecks/react';
+
+const useLocalStorage = (key, defaultValue) => {
+  const [value, setValue] = useState(defaultValue);
+  useLayoutEffect(() => {
+    setValue(JSON.parse(window.localStorage.getItem(key) || JSON.stringify(defaultValue)));
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [key]);
+  useLayoutEffect(() => {
+    window.localStorage.setItem(key, JSON.stringify(value));
+  }, [key, value]);
+  return [value, setValue];
+};
+
+export default useLocalStorage;
diff --git a/packages/core/src/index.js b/packages/core/src/index.js
index 8066dbb..0c8bc06 100644
--- a/packages/core/src/index.js
+++ b/packages/core/src/index.js
@@ -2,7 +2,9 @@ import {patchJsonResource} from '@avocado/resource-persea';
 import {Hooks} from '@flecks/core';
 
 import Persea from './components/persea';
-import {projects} from './state';
+import organization from './sidebar/organization';
+import projectsSidebar from './sidebar/projects';
+import {project, projects} from './state';
 
 export * from './state';
 
@@ -18,7 +20,12 @@ export default {
       };
     },
     '@flecks/redux.slices': () => ({
+      project,
       projects,
     }),
+    '@persea/core.sidebar': () => ({
+      projects: projectsSidebar,
+      organization,
+    }),
   },
 };
diff --git a/packages/core/src/sidebar/organization/content.jsx b/packages/core/src/sidebar/organization/content.jsx
new file mode 100644
index 0000000..5c5a062
--- /dev/null
+++ b/packages/core/src/sidebar/organization/content.jsx
@@ -0,0 +1,29 @@
+import {React} from '@flecks/react';
+import {useSelector} from '@flecks/redux';
+
+import styles from './content.module.scss';
+
+import {projectSelector, structureSelector} from '../../state';
+import Organization from './organization';
+
+function Content() {
+  const project = useSelector(projectSelector) || 'c41ddaac-89c2-46a4-b3e5-1d634a1a7c36';
+  const {label, resourcePaths} = useSelector((state) => structureSelector(state, project));
+  return (
+    <div className={styles.content}>
+      <Organization
+        label={label}
+        uuid={project}
+        resourcePaths={resourcePaths}
+      />
+    </div>
+  );
+}
+
+Content.defaultProps = {};
+
+Content.displayName = 'Content';
+
+Content.propTypes = {};
+
+export default Content;
diff --git a/packages/core/src/sidebar/organization/content.module.scss b/packages/core/src/sidebar/organization/content.module.scss
new file mode 100644
index 0000000..0b23268
--- /dev/null
+++ b/packages/core/src/sidebar/organization/content.module.scss
@@ -0,0 +1,6 @@
+.content {
+}
+
+.icon {
+  background-image: url('./icon_document.svg');
+}
diff --git a/packages/core/src/sidebar/organization/icon_document.svg b/packages/core/src/sidebar/organization/icon_document.svg
new file mode 100644
index 0000000..e4107d5
--- /dev/null
+++ b/packages/core/src/sidebar/organization/icon_document.svg
@@ -0,0 +1,48 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve">
+<g>
+	<g>
+		
+			<polygon fill="#5981C1" stroke="#4766B0" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="
+			36.766,12.169 9.352,12.169 9.352,60.169 48.504,60.169 48.504,23.907 		"/>
+		
+			<polygon fill="#5981C1" stroke="#4766B0" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="
+			36.766,23.907 48.504,23.907 36.766,12.169 		"/>
+	</g>
+	<g>
+		
+			<polygon fill="#8CAEDC" stroke="#4766B0" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="
+			45.103,3.831 17.689,3.831 17.689,51.831 56.841,51.831 56.841,15.569 		"/>
+		
+			<polygon fill="#5981C1" stroke="#4766B0" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="
+			45.103,15.569 56.841,15.569 45.103,3.831 		"/>
+	</g>
+</g>
+<g>
+	
+		<line fill="#5981C1" stroke="#4766B0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="33.161" y1="15.787" x2="37.931" y2="15.787"/>
+	
+		<line fill="#5981C1" stroke="#4766B0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="33.161" y1="20.288" x2="50.919" y2="20.288"/>
+	
+		<rect x="23.644" y="15.787" fill="#5981C1" stroke="#4766B0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" width="4.5" height="4.5"/>
+</g>
+<g>
+	
+		<line fill="#5981C1" stroke="#4766B0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="33.161" y1="25.581" x2="37.931" y2="25.581"/>
+	
+		<line fill="#5981C1" stroke="#4766B0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="33.161" y1="30.082" x2="50.919" y2="30.082"/>
+	
+		<rect x="23.644" y="25.581" fill="#5981C1" stroke="#4766B0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" width="4.5" height="4.5"/>
+</g>
+<g>
+	
+		<line fill="#5981C1" stroke="#4766B0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="33.161" y1="36.515" x2="37.931" y2="36.515"/>
+	
+		<line fill="#5981C1" stroke="#4766B0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="33.161" y1="41.015" x2="50.919" y2="41.015"/>
+	
+		<rect x="23.644" y="36.515" fill="#5981C1" stroke="#4766B0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" width="4.5" height="4.5"/>
+</g>
+<line fill="#5981C1" stroke="#4766B0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="23.644" y1="9.7" x2="37.931" y2="9.7"/>
+</svg>
diff --git a/packages/core/src/sidebar/organization/index.js b/packages/core/src/sidebar/organization/index.js
new file mode 100644
index 0000000..a62fb0e
--- /dev/null
+++ b/packages/core/src/sidebar/organization/index.js
@@ -0,0 +1,8 @@
+import styles from './content.module.scss';
+
+import Content from './content';
+
+export default {
+  Content,
+  Icon: styles?.icon,
+};
diff --git a/packages/core/src/components/project/organization/actions.jsx b/packages/core/src/sidebar/organization/organization/actions.jsx
similarity index 100%
rename from packages/core/src/components/project/organization/actions.jsx
rename to packages/core/src/sidebar/organization/organization/actions.jsx
diff --git a/packages/core/src/components/project/organization/img/collapse-all.svg b/packages/core/src/sidebar/organization/organization/img/collapse-all.svg
similarity index 100%
rename from packages/core/src/components/project/organization/img/collapse-all.svg
rename to packages/core/src/sidebar/organization/organization/img/collapse-all.svg
diff --git a/packages/core/src/components/project/organization/img/image.png b/packages/core/src/sidebar/organization/organization/img/image.png
similarity index 100%
rename from packages/core/src/components/project/organization/img/image.png
rename to packages/core/src/sidebar/organization/organization/img/image.png
diff --git a/packages/core/src/components/project/organization/img/joystick.png b/packages/core/src/sidebar/organization/organization/img/joystick.png
similarity index 100%
rename from packages/core/src/components/project/organization/img/joystick.png
rename to packages/core/src/sidebar/organization/organization/img/joystick.png
diff --git a/packages/core/src/components/project/bottom/map.png b/packages/core/src/sidebar/organization/organization/img/map.png
similarity index 100%
rename from packages/core/src/components/project/bottom/map.png
rename to packages/core/src/sidebar/organization/organization/img/map.png
diff --git a/packages/core/src/components/project/organization/img/music.png b/packages/core/src/sidebar/organization/organization/img/music.png
similarity index 100%
rename from packages/core/src/components/project/organization/img/music.png
rename to packages/core/src/sidebar/organization/organization/img/music.png
diff --git a/packages/core/src/components/project/organization/img/new-file.svg b/packages/core/src/sidebar/organization/organization/img/new-file.svg
similarity index 100%
rename from packages/core/src/components/project/organization/img/new-file.svg
rename to packages/core/src/sidebar/organization/organization/img/new-file.svg
diff --git a/packages/core/src/components/project/organization/img/new-folder.svg b/packages/core/src/sidebar/organization/organization/img/new-folder.svg
similarity index 100%
rename from packages/core/src/components/project/organization/img/new-folder.svg
rename to packages/core/src/sidebar/organization/organization/img/new-folder.svg
diff --git a/packages/core/src/components/project/organization/img/note.png b/packages/core/src/sidebar/organization/organization/img/note.png
similarity index 100%
rename from packages/core/src/components/project/organization/img/note.png
rename to packages/core/src/sidebar/organization/organization/img/note.png
diff --git a/packages/core/src/components/project/organization/img/question.png b/packages/core/src/sidebar/organization/organization/img/question.png
similarity index 100%
rename from packages/core/src/components/project/organization/img/question.png
rename to packages/core/src/sidebar/organization/organization/img/question.png
diff --git a/packages/core/src/components/project/organization/img/script.png b/packages/core/src/sidebar/organization/organization/img/script.png
similarity index 100%
rename from packages/core/src/components/project/organization/img/script.png
rename to packages/core/src/sidebar/organization/organization/img/script.png
diff --git a/packages/core/src/components/project/organization/img/sound.png b/packages/core/src/sidebar/organization/organization/img/sound.png
similarity index 100%
rename from packages/core/src/components/project/organization/img/sound.png
rename to packages/core/src/sidebar/organization/organization/img/sound.png
diff --git a/packages/core/src/components/project/organization/index.jsx b/packages/core/src/sidebar/organization/organization/index.jsx
similarity index 96%
rename from packages/core/src/components/project/organization/index.jsx
rename to packages/core/src/sidebar/organization/organization/index.jsx
index 5ce83e9..cc45523 100644
--- a/packages/core/src/components/project/organization/index.jsx
+++ b/packages/core/src/sidebar/organization/organization/index.jsx
@@ -6,7 +6,6 @@ import {
   PropTypes,
   React,
   useFlecks,
-  useState,
 } from '@flecks/react';
 import {
   push,
@@ -17,9 +16,11 @@ import {
   useDispatch,
 } from '@flecks/redux';
 
-import OrganizationActions from './actions';
 import './index.scss';
 
+import useLocalStorage from '../../../hooks/use-local-storage';
+import OrganizationActions from './actions';
+
 const normalizeDisplayName = (displayName) => (
   displayName.startsWith('HotExported') ? displayName.slice(11) : displayName
 );
@@ -33,7 +34,7 @@ const Organization = ({
   const dispatch = useDispatch();
   const flecks = useFlecks();
   const location = useLocation();
-  const [collapsed, setCollapsed] = useState({});
+  const [collapsed, setCollapsed] = useLocalStorage('@persea/core/collapsed', {});
   const treeFromResourcePath = (tree, uuid, [isFile, resourcePath]) => {
     const parts = resourcePath.split('/');
     parts.shift();
diff --git a/packages/core/src/components/project/organization/index.scss b/packages/core/src/sidebar/organization/organization/index.scss
similarity index 51%
rename from packages/core/src/components/project/organization/index.scss
rename to packages/core/src/sidebar/organization/organization/index.scss
index e8cbd90..86d04dd 100644
--- a/packages/core/src/components/project/organization/index.scss
+++ b/packages/core/src/sidebar/organization/organization/index.scss
@@ -1,5 +1,5 @@
 .organization {
-  background-color: #222;
+  // background-color: #222;
   height: 100%;
   overflow-x: hidden;
   overflow-y: auto;
@@ -10,37 +10,41 @@
     overflow: hidden;
     text-overflow: ellipsis;
   }
-  .label.inline {
-    justify-content: flex-start;
-    > div:first-child.icon {
-      background-size: cover;
-      flex-grow: unset;
-      margin-right: 0.125em;
-      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');
+  .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.125em;
+        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');
+        }
       }
     }
   }
diff --git a/packages/core/src/sidebar/projects/content.jsx b/packages/core/src/sidebar/projects/content.jsx
new file mode 100644
index 0000000..62aa061
--- /dev/null
+++ b/packages/core/src/sidebar/projects/content.jsx
@@ -0,0 +1,49 @@
+import {React} from '@flecks/react';
+import {useSelector} from '@flecks/redux';
+
+import styles from './content.module.scss';
+
+import {projectSelector, projectsSelector} from '../../state';
+
+function Content() {
+  const project = useSelector(projectSelector) || 'c41ddaac-89c2-46a4-b3e5-1d634a1a7c36';
+  const {structure} = useSelector(projectsSelector);
+  const projects = Object.entries(structure);
+  return (
+    <div className={styles.content}>
+      {
+        projects.length > 0
+          ? (
+            <ul>
+              {
+                projects
+                  .map(([uuid, {label}]) => (
+                    <li className={project === uuid && styles.active} key={uuid}>
+                      <button
+                        type="button"
+                      >
+                        <div className={styles.label}>{label}</div>
+                        <div className={styles.uuid}>{uuid}</div>
+                      </button>
+                    </li>
+                  ))
+              }
+            </ul>
+          )
+          : (
+            <div className={styles.empty}>
+              <p>You don&apos;t have any projects.</p>
+            </div>
+          )
+      }
+    </div>
+  );
+}
+
+Content.defaultProps = {};
+
+Content.displayName = 'Content';
+
+Content.propTypes = {};
+
+export default Content;
diff --git a/packages/core/src/sidebar/projects/content.module.scss b/packages/core/src/sidebar/projects/content.module.scss
new file mode 100644
index 0000000..6dd53fd
--- /dev/null
+++ b/packages/core/src/sidebar/projects/content.module.scss
@@ -0,0 +1,44 @@
+.content {
+
+  ul {
+    li {
+      border: 1px solid transparent;
+      &:hover {
+        background-color: rgba(255, 255, 255, 0.07);
+      }
+      &.active {
+        background-color: rgba(255, 255, 255, 0.05);
+        border: 1px solid var(--color-active);
+        &:hover {
+          background-color: rgba(255, 255, 255, 0.10);
+        }
+      }
+      label {
+        padding: 0.5em;
+      }
+      button {
+        background-color: transparent;
+        border: none;
+        margin: 0;
+        padding: 1em;
+        width: 100%;
+        .uuid {
+          font-size: 0.7em;
+          margin: 0.5rem auto 0 auto;
+        }
+      }
+    }
+  }
+}
+
+.empty {
+  p {
+    font-family: var(--message-font-family);
+    margin-top: 1em;
+    text-align: center;
+  }
+}
+
+.icon {
+  background-image: url('./icon_books.svg');
+}
diff --git a/packages/core/src/sidebar/projects/icon_books.svg b/packages/core/src/sidebar/projects/icon_books.svg
new file mode 100644
index 0000000..140dbd2
--- /dev/null
+++ b/packages/core/src/sidebar/projects/icon_books.svg
@@ -0,0 +1,49 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve">
+<g>
+	<g>
+		
+			<rect x="6.125" y="8.75" fill="#8CAEDC" stroke="#4766B0" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" width="17.25" height="46.5"/>
+		
+			<path fill="#5981C1" stroke="#4766B0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
+			M14.75,42.396L14.75,42.396c-2.131,0-3.875,1.744-3.875,3.875v0c0,2.131,1.744,3.875,3.875,3.875h0
+			c2.131,0,3.875-1.744,3.875-3.875v0C18.625,44.14,16.881,42.396,14.75,42.396z"/>
+		<g>
+			
+				<rect x="10.875" y="14.417" fill="#5981C1" stroke="#4766B0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" width="7.75" height="20.75"/>
+			
+				<line fill="#5981C1" stroke="#4766B0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="14.75" y1="18.46" x2="14.75" y2="31.124"/>
+		</g>
+	</g>
+	<g>
+		
+			<rect x="23.375" y="8.75" fill="#5981C1" stroke="#4766B0" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" width="17.25" height="46.5"/>
+		
+			<path fill="#8CAEDC" stroke="#4766B0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
+			M32,42.396L32,42.396c-2.131,0-3.875,1.744-3.875,3.875v0c0,2.131,1.744,3.875,3.875,3.875h0c2.131,0,3.875-1.744,3.875-3.875v0
+			C35.875,44.14,34.131,42.396,32,42.396z"/>
+		<g>
+			
+				<rect x="28.125" y="14.417" fill="#8CAEDC" stroke="#4766B0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" width="7.75" height="20.75"/>
+			
+				<line fill="#8CAEDC" stroke="#4766B0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="32" y1="18.46" x2="32" y2="31.124"/>
+		</g>
+	</g>
+	<g>
+		
+			<rect x="40.625" y="8.75" fill="#8CAEDC" stroke="#4766B0" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" width="17.25" height="46.5"/>
+		
+			<path fill="#5981C1" stroke="#4766B0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
+			M49.25,42.396L49.25,42.396c-2.131,0-3.875,1.744-3.875,3.875v0c0,2.131,1.744,3.875,3.875,3.875h0
+			c2.131,0,3.875-1.744,3.875-3.875v0C53.125,44.14,51.381,42.396,49.25,42.396z"/>
+		<g>
+			
+				<rect x="45.375" y="14.417" fill="#5981C1" stroke="#4766B0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" width="7.75" height="20.75"/>
+			
+				<line fill="#5981C1" stroke="#4766B0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="49.25" y1="18.46" x2="49.25" y2="31.124"/>
+		</g>
+	</g>
+</g>
+</svg>
diff --git a/packages/core/src/sidebar/projects/index.js b/packages/core/src/sidebar/projects/index.js
new file mode 100644
index 0000000..a62fb0e
--- /dev/null
+++ b/packages/core/src/sidebar/projects/index.js
@@ -0,0 +1,8 @@
+import styles from './content.module.scss';
+
+import Content from './content';
+
+export default {
+  Content,
+  Icon: styles?.icon,
+};
diff --git a/packages/core/src/state/index.js b/packages/core/src/state/index.js
index 7d747f8..a8de8a8 100644
--- a/packages/core/src/state/index.js
+++ b/packages/core/src/state/index.js
@@ -1,2 +1,5 @@
+export * from './project';
+export {default as project} from './project';
+
 export * from './projects';
 export {default as projects} from './projects';
diff --git a/packages/core/src/state/project.js b/packages/core/src/state/project.js
new file mode 100644
index 0000000..7f0f817
--- /dev/null
+++ b/packages/core/src/state/project.js
@@ -0,0 +1,29 @@
+import {
+  createSlice,
+} from '@flecks/redux';
+
+export const projectSelector = (state) => state.project;
+
+const slice = createSlice({
+  name: 'persea/project',
+  initialState: null,
+  /* eslint-disable no-param-reassign */
+  reducers: {
+    setProject: (state, {payload}) => payload,
+  },
+  /* eslint-enable no-param-reassign */
+});
+
+slice.reducer.hydrateServer = async (req) => {
+  const {user} = req;
+  if (!user) {
+    return null;
+  }
+  const projects = await user.getProjects();
+  if (0 === projects.length) {
+    return null;
+  }
+  return projects[0].uuid;
+};
+
+export default slice.reducer;
diff --git a/packages/core/src/state/projects.js b/packages/core/src/state/projects.js
index 8e967ce..9a2a5bd 100644
--- a/packages/core/src/state/projects.js
+++ b/packages/core/src/state/projects.js
@@ -100,9 +100,9 @@ slice.reducer.hydrateServer = async (req) => {
         .map(async ([uuid, resourcePaths]) => {
           let label;
           try {
-            const buffer = await readFile(join(process.cwd(), 'projects', `${uuid}.json`));
+            const buffer = await readFile(join(process.cwd(), 'projects', uuid, 'package.json'));
             const config = JSON.parse(buffer.toString());
-            label = config.name;
+            label = config.label || config.name;
           }
           catch (error) {
             label = uuid;