Revert "In-client profiles / slates + directory tab"

2024-09-19 18:28:03 +03:00 · 2020-08-30 22:08:40 -07:00 · 2020-08-30 22:08:40 -07:00 · 6cbb8b65cb
commit 6cbb8b65cb
parent efdc156448
22 changed files with 608 additions and 1273 deletions
--- a/common/navigation-data.js
+++ b/common/navigation-data.js
@ -71,14 +71,6 @@ export const generate = ({ library = [], slates = [] }) => [
    pageTitle: "Slates",
    children: constructSlatesTreeForNavigation(slates),
  },
-  {
-    id: "V1_NAVIGATION_SLATE",
-    decorator: "VIEW_SLATE",
-    name: "Slate",
-    pageTitle: "Slate",
-    children: null,
-    ignore: true,
-  },
  constructFilesTreeForNavigation(library),
  /*
  {
@ -119,7 +111,7 @@ export const generate = ({ library = [], slates = [] }) => [
    children: null,
  },
  {
-    id: "V1_NAVIGATION_PROFILE_EDIT",
+    id: "V1_NAVIGATION_PROFILE",
    decorator: "EDIT_ACCOUNT",
    name: "Profile & Account Settings",
    pageTitle: "Your Profile & Account Settings",
@ -134,20 +126,4 @@ export const generate = ({ library = [], slates = [] }) => [
    children: null,
    ignore: true,
  },
-  {
-    id: "V1_NAVIGATION_PROFILE",
-    decorator: "PROFILE",
-    name: "Profile",
-    pageTitle: "Profile",
-    children: null,
-    ignore: true,
-  },
-  {
-    id: "V1_NAVIGATION_FILE",
-    decorator: "FILE",
-    name: "File",
-    pageTitle: "File",
-    children: null,
-    ignore: true,
-  },
 ];
--- a/components/core/Application.js
+++ b/components/core/Application.js
@ -23,7 +23,6 @@ import SceneSignIn from "~/scenes/SceneSignIn";
 import SceneSlate from "~/scenes/SceneSlate";
 import SceneActivity from "~/scenes/SceneActivity";
 import SceneDirectory from "~/scenes/SceneDirectory";
-import SceneProfile from "~/scenes/SceneProfile";

 // NOTE(jim):
 // Sidebars each have a decorator and can be shown to with _handleAction
@ -59,9 +58,6 @@ const SIDEBARS = {

 const SCENES = {
  HOME: <SceneHome />,
-  DIRECTORY: <SceneDirectory />,
-  PROFILE: <SceneProfile />,
-  VIEW_SLATE: <SceneSlate />,
  WALLET: <SceneWallet />,
  FOLDER: <SceneFilesFolder />,
  FILE: <SceneFile />,
@ -77,8 +73,6 @@ const SCENES = {
 };

 export default class ApplicationPage extends React.Component {
-  _body;
-
  state = {
    selected: {},
    viewer: this.props.viewer,
@ -238,7 +232,7 @@ export default class ApplicationPage extends React.Component {

    this.setState(updates);

-    return response;
+    return { rehydrated: true };
  };

  _handleSubmit = async (data) => {
@ -353,19 +347,13 @@ export default class ApplicationPage extends React.Component {
  };

  _handleDismissSidebar = () => {
-    this.setState({ sidebar: null, sidebarLoading: false, sidebarData: null });
+    this.setState({ sidebar: null, sidebarLoading: false, data: null });
  };

  _handleAction = (options) => {
    console.log(options);
    if (options.type === "NAVIGATE") {
-      // NOTE(martina): The `scene` property is only necessary when you need to display a component different from the one corresponding to the tab it appears in
-      // + e.g. to display <SceneProfile/> while on the Home tab
-      // + `scene` should be the decorator of the component you want displayed
-      return this._handleNavigateTo(
-        { id: options.value, scene: options.scene },
-        options.data
-      );
+      return this._handleNavigateTo({ id: options.value }, options.data);
    }

    if (options.type === "NEW_WINDOW") {
@ -383,7 +371,7 @@ export default class ApplicationPage extends React.Component {
    if (options.type === "SIDEBAR") {
      return this.setState({
        sidebar: SIDEBARS[options.value],
-        sidebarData: options.data,
+        data: options.data,
      });
    }

@ -391,9 +379,8 @@ export default class ApplicationPage extends React.Component {
  };

  _handleNavigateTo = (next, data = null) => {
-    let body = document.getElementById("slate-client-body");
-    this.state.history[this.state.currentIndex].scrollTop = body.scrollTop; //window.scrollY => body.scrollTop (where body is the body of the ApplicationLayout)
-    this.state.history[this.state.currentIndex].data = this.state.data; //BUG FIX: was originally = data. So it was setting it equal to the data for the next one rather than the current one
+    this.state.history[this.state.currentIndex].scrollTop = window.scrollY;
+    this.state.history[this.state.currentIndex].data = data;

    if (this.state.currentIndex !== this.state.history.length - 1) {
      const adjustedArray = [...this.state.history];
@ -406,7 +393,7 @@ export default class ApplicationPage extends React.Component {
          data,
          sidebar: null,
        },
-        () => body.scrollTo(0, 0)
+        () => window.scrollTo(0, 0)
      );
    }

@ -417,14 +404,12 @@ export default class ApplicationPage extends React.Component {
        data,
        sidebar: null,
      },
-      () => body.scrollTo(0, 0)
+      () => window.scrollTo(0, 0)
    );
  };

  _handleBack = () => {
-    let body = document.getElementById("slate-client-body");
-    this.state.history[this.state.currentIndex].scrollTop = body.scrollTop;
-    this.state.history[this.state.currentIndex].data = this.state.data; //BUG FIX: if you go back, it doesn't save the data for that page. so if you go forward to it again, it breaks. changed data => this.state.data
+    this.state.history[this.state.currentIndex].scrollTop = window.scrollY;

    const next = this.state.history[this.state.currentIndex - 1];

@ -436,14 +421,13 @@ export default class ApplicationPage extends React.Component {
      },
      () => {
        console.log({ next });
-        body.scrollTo(0, next.scrollTop);
+        window.scrollTo(0, next.scrollTop);
      }
    );
  };

  _handleForward = () => {
-    let body = document.getElementById("slate-client-body");
-    this.state.history[this.state.currentIndex].scrollTop = body.scrollTop;
+    this.state.history[this.state.currentIndex].scrollTop = window.scrollY;

    const next = this.state.history[this.state.currentIndex + 1];

@ -455,7 +439,7 @@ export default class ApplicationPage extends React.Component {
      },
      () => {
        console.log({ next });
-        body.scrollTo(0, next.scrollTop);
+        window.scrollTo(0, next.scrollTop);
      }
    );
  };
@ -483,7 +467,6 @@ export default class ApplicationPage extends React.Component {
    const navigation = NavigationData.generate(this.state.viewer);
    const next = this.state.history[this.state.currentIndex];
    const current = NavigationData.getCurrentById(navigation, next.id);
-    console.log(this.state.history);

    const navigationElement = (
      <ApplicationNavigation
@ -509,24 +492,20 @@ export default class ApplicationPage extends React.Component {
      />
    );

-    const scene = React.cloneElement(
-      SCENES[next.scene || current.target.decorator],
-      {
-        current: current.target,
-        data: this.state.data,
-        viewer: this.state.viewer,
-        selected: this.state.selected,
-        onNavigateTo: this._handleNavigateTo,
-        onSelectedChange: this._handleSelectedChange,
-        onViewerChange: this._handleViewerChange,
-        onDeleteYourself: this._handleDeleteYourself,
-        onAction: this._handleAction,
-        onBack: this._handleBack,
-        onForward: this._handleForward,
-        onRehydrate: this.rehydrate,
-        sceneId: current.target.id,
-      }
-    );
+    const scene = React.cloneElement(SCENES[current.target.decorator], {
+      current: current.target,
+      data: this.state.data,
+      viewer: this.state.viewer,
+      selected: this.state.selected,
+      onNavigateTo: this._handleNavigateTo,
+      onSelectedChange: this._handleSelectedChange,
+      onViewerChange: this._handleViewerChange,
+      onDeleteYourself: this._handleDeleteYourself,
+      onAction: this._handleAction,
+      onBack: this._handleBack,
+      onForward: this._handleForward,
+      onRehydrate: this.rehydrate,
+    });

    let sidebarElement;
    if (this.state.sidebar) {
--- a/components/core/ApplicationControlMenu.js
+++ b/components/core/ApplicationControlMenu.js
@ -2,11 +2,7 @@ import * as React from "react";
 import * as Constants from "~/common/constants";
 import * as OldSVG from "~/components/system/svg";

-import {
-  TooltipWrapper,
-  dispatchCustomEvent,
-  PopoverNavigation,
-} from "~/components/system";
+import { TooltipWrapper, dispatchCustomEvent, PopoverNavigation } from "~/components/system";
 import { css } from "@emotion/react";

 import Dismissible from "~/components/core/Dismissible";
@ -71,8 +67,7 @@ export default class ApplicationControlMenu extends React.Component {
            captureScroll={false}
            enabled
            onOutsideRectEvent={this._handleHide}
-            style={this.props.style}
-          >
+            style={this.props.style}>
            <PopoverNavigation
              style={{
                left: 0,
@ -84,8 +79,8 @@ export default class ApplicationControlMenu extends React.Component {
              onSignOut={this._handleSignOut}
              navigation={[
                {
-                  text: "Profile & account settings",
-                  value: "V1_NAVIGATION_PROFILE_EDIT",
+                  text: "Account Settings",
+                  value: "V1_NAVIGATION_PROFILE",
                },
                /*
                {
@ -97,20 +92,16 @@ export default class ApplicationControlMenu extends React.Component {
              ]}
            />
          </Dismissible>
-        }
-      >
+        }>
        <CircleButtonLight
          onClick={this._handleClick}
          style={{
-            backgroundColor: this.state.visible
-              ? Constants.system.brand
-              : Constants.system.white,
+            backgroundColor: this.state.visible ? Constants.system.brand : Constants.system.white,
            color: this.state.visible ? Constants.system.white : null,
-          }}
-        >
+          }}>
          <OldSVG.ChevronDown height="20px" />
        </CircleButtonLight>
-      </TooltipWrapper>
+      </TooltipWrapper> 
    );
  }
 }
--- a/components/core/ApplicationHeader.js
+++ b/components/core/ApplicationHeader.js
@ -3,7 +3,7 @@ import * as Constants from "~/common/constants";
 import * as SVG from "~/common/svg";

 import { css } from "@emotion/react";
-import { SearchModal } from "~/components/core/SearchModal";
+import { SpotlightSearch } from "~/components/system/modules/SpotlightSearch";
 import { dispatchCustomEvent } from "~/common/custom-events";

 const STYLES_ICON_ELEMENT = css`
@ -72,7 +72,7 @@ export default class ApplicationHeader extends React.Component {
  _handleCreateSearch = (e) => {
    dispatchCustomEvent({
      name: "create-modal",
-      detail: { modal: <SearchModal onAction={this.props.onAction} /> },
+      detail: { modal: <SpotlightSearch onAction={this.props.onAction} /> },
    });
  };

--- a/components/core/ApplicationNavigation.js
+++ b/components/core/ApplicationNavigation.js
@ -19,7 +19,6 @@ const IconMap = {
  LOCAL_DATA: <SVG.HardDrive height="20px" />,
  PROFILE_PAGE: <SVG.ProfileUser height="20px" />,
  SETTINGS_DEVELOPER: <SVG.SettingsDeveloper height="20px" />,
-  DIRECTORY: <SVG.Directory height="20px" />,
 };

 const STYLES_NAVIGATION = css`
@ -70,7 +69,6 @@ const STYLES_PROFILE = css`
  align-items: center;
  justify-content: flex-start;
  transition: 200ms ease all;
-  cursor: pointer;
 /*
  :hover {
    color: ${Constants.system.white};
@ -258,16 +256,11 @@ export default class ApplicationNavigation extends React.Component {
    return (
      <nav css={STYLES_NAVIGATION}>
        <div css={STYLES_NAVIGATION_HEADER}>
-          <div
+          <a
            css={STYLES_PROFILE}
            style={{ marginRight: 16 }}
-            onClick={() =>
-              this.props.onAction({
-                type: "NAVIGATE",
-                value: "V1_NAVIGATION_PROFILE",
-                data: this.props.viewer,
-              })
-            }
+            href={`/${this.props.viewer.username}`}
+            target="_blank"
          >
            <span
              css={STYLES_PROFILE_IMAGE}
@ -276,7 +269,7 @@ export default class ApplicationNavigation extends React.Component {
              }}
            />
            {this.props.viewer.username}
-          </div>
+          </a>
          <ApplicationControlMenu
            onNavigateTo={this.props.onNavigateTo}
            onAction={this.props.onAction}
--- a/components/core/Profile.js
+++ b/components/core/Profile.js
@ -1,78 +0,0 @@
-import * as React from "react";
-import * as Constants from "~/common/constants";
-
-import { css } from "@emotion/react";
-
-import SlatePreviewBlock from "~/components/core/SlatePreviewBlock";
-
-const STYLES_PROFILE = css`
-  text-align: center;
-  width: 100%;
-  margin-top: 16px;
-`;
-
-const STYLES_PROFILE_IMAGE = css`
-  background-size: cover;
-  background-position: 50% 50%;
-  width: 96px;
-  height: 96px;
-  border-radius: 50%;
-  margin: 0 auto;
-  padding: 0;
-`;
-
-const STYLES_NAME = css`
-  font-size: ${Constants.typescale.lvl3};
-  margin: 16px 0px;
-`;
-
-const STYLES_LINK = css`
-  color: ${Constants.system.black};
-  text-decoration: none;
-`;
-
-export default class Profile extends React.Component {
-  render() {
-    let data = this.props.creator ? this.props.creator : this.props.data;
-    return (
-      <div css={STYLES_PROFILE}>
-        <div
-          css={STYLES_PROFILE_IMAGE}
-          style={{ backgroundImage: `url('${data.data.photo}')` }}
-        />
-        <div css={STYLES_NAME}>{data.username}</div>
-        {this.props.buttons}
-        <br />
-        {data.slates && data.slates.length ? (
-          <div style={{ width: "100%" }}>
-            {data.slates.map((slate) => {
-              const url = `/${data.username}/${slate.slatename}`;
-              if (this.props.onAction) {
-                return (
-                  <div
-                    key={url}
-                    onClick={() =>
-                      this.props.onAction({
-                        type: "NAVIGATE",
-                        value: this.props.sceneId,
-                        scene: "SLATE",
-                        data: { owner: data, ...slate },
-                      })
-                    }
-                  >
-                    <SlatePreviewBlock slate={slate} />
-                  </div>
-                );
-              }
-              return (
-                <a key={url} href={url} css={STYLES_LINK}>
-                  <SlatePreviewBlock slate={slate} />
-                </a>
-              );
-            })}
-          </div>
-        ) : null}
-      </div>
-    );
-  }
-}
--- a/components/core/ScenePageHeader.js
+++ b/components/core/ScenePageHeader.js
@ -11,6 +11,7 @@ const STYLES_ROOT = css`
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
+  max-width: 648px;
  width: 100%;
 `;

@ -22,7 +23,6 @@ const STYLES_LEFT = css`
 const STYLES_RIGHT = css`
  flex-shrink: 0;
  padding-left: 24px;
-  justify-self: end;
 `;

 const STYLES_HEADER = css`
--- a/components/core/SearchModal.js
+++ b/components/core/SearchModal.js
@ -1,309 +0,0 @@
-import * as React from "react";
-import * as Constants from "~/common/constants";
-import * as SVG from "~/common/svg";
-import * as Strings from "~/common/strings";
-import * as Actions from "~/common/actions";
-
-import MiniSearch from "minisearch";
-import SlateMediaObjectPreview from "~/components/core/SlateMediaObjectPreview";
-
-import { css } from "@emotion/react";
-import { SearchDropdown } from "~/components/core/SearchDropdown";
-import { dispatchCustomEvent } from "~/common/custom-events";
-import { SlatePreviewRow } from "~/components/core/SlatePreviewBlock";
-import { LoaderSpinner } from "~/components/system/components/Loaders";
-
-const STYLES_ICON_CIRCLE = css`
-  height: 24px;
-  width: 24px;
-  border-radius: 50%;
-  background-color: ${Constants.system.foreground};
-  display: flex;
-  align-items: center;
-  justify-content: center;
-`;
-
-const STYLES_MODAL = css`
-  width: 95vw;
-  max-width: 600px;
-  height: 60vh;
-  max-height: 500px;
-  padding: 24px;
-`;
-
-const STYLES_SEARCH_DROPDOWN = {
-  height: "calc(100% - 80px)",
-  width: "calc(100% - 48px)",
-  overflowY: "scroll",
-};
-
-const STYLES_USER_ENTRY_CONTAINER = css`
-  display: grid;
-  grid-template-columns: repeat(3, auto) 1fr;
-  grid-column-gap: 16px;
-  align-items: center;
-`;
-
-const STYLES_PROFILE_IMAGE = css`
-  background-size: cover;
-  background-position: 50% 50%;
-  height: 24px;
-  width: 24px;
-  border-radius: 50%;
-`;
-
-const UserEntry = ({ item }) => {
-  return (
-    <div css={STYLES_ENTRY}>
-      <div css={STYLES_USER_ENTRY_CONTAINER}>
-        <div
-          style={{ backgroundImage: `url(${item.data.photo})` }}
-          css={STYLES_PROFILE_IMAGE}
-        />
-        {item.data.name ? <strong>{item.data.name}</strong> : null}
-        <div>@{item.username}</div>
-      </div>
-    </div>
-  );
-};
-
-const STYLES_ENTRY = css`
-  padding: 8px 0px;
-`;
-
-const STYLES_SLATE_ENTRY_CONTAINER = css`
-  display: grid;
-  grid-template-columns: repeat(3, auto) 1fr;
-  grid-column-gap: 16px;
-  align-items: center;
-`;
-
-const STYLES_SLATE_IMAGES_CONTAINER = css`
-  margin-left: 32px;
-`;
-
-const STYLES_SLATE_IMAGE = css`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 72px;
-  width: 72px;
-  padding: 8px;
-  box-sizing: border-box;
-  margin-left: 32px;
-`;
-
-const STYLES_LINK_HOVER = css`
-  color: ${Constants.system.black};
-  :hover {
-    color: ${Constants.system.brand};
-  }
-`;
-
-const SlateEntry = ({ item }) => {
-  return (
-    <div css={STYLES_ENTRY}>
-      <div css={STYLES_SLATE_ENTRY_CONTAINER}>
-        <div css={STYLES_ICON_CIRCLE}>
-          <SVG.Slate2 height="16px" />
-        </div>
-        <strong>{item.data.name}</strong>
-        <div>@{item.owner.username}</div>
-      </div>
-      {item.data.objects.length ? (
-        <div css={STYLES_SLATE_IMAGES_CONTAINER}>
-          <SlatePreviewRow
-            numItems={4}
-            style={{ width: "72px", height: "72px", padding: "8px" }}
-            containerStyle={{
-              maxHeight: "72px",
-              justifyContent: "flex-start",
-            }}
-            previewStyle={{ fontSize: "12px", padding: "4px" }}
-            slate={item}
-          />
-        </div>
-      ) : null}
-    </div>
-  );
-};
-
-const FileEntry = ({ item }) => {
-  return (
-    <div css={STYLES_ENTRY}>
-      <div css={STYLES_USER_ENTRY_CONTAINER}>
-        <div css={STYLES_ICON_CIRCLE}>
-          <SVG.Folder2 height="16px" />
-        </div>
-        <strong>{item.data.file.title || item.data.file.name}</strong>
-        <div css={STYLES_LINK_HOVER}>@{item.data.slate.owner.username}</div>
-      </div>
-      <div css={STYLES_SLATE_IMAGE}>
-        <SlateMediaObjectPreview
-          style={{ fontSize: "12px", padding: "4px" }}
-          url={item.data.file.url}
-          type={item.type}
-        />
-      </div>
-    </div>
-  );
-};
-
-const STYLES_LOADER = css`
-  position: absolute;
-  top: calc(50% - 22px);
-  left: calc(50% - 22px);
-`;
-
-export class SearchModal extends React.Component {
-  state = {
-    loading: true,
-    results: [],
-    inputValue: "",
-  };
-
-  componentDidMount = async () => {
-    await this.fillDirectory();
-    this.setState({ loading: false });
-  };
-
-  fillDirectory = async () => {
-    const response = await Actions.getNetworkDirectory();
-    this.miniSearch = new MiniSearch({
-      fields: ["slatename", "data.name", "username", "filename"],
-      storeFields: [
-        "type",
-        "slatename",
-        "username",
-        "data",
-        "id",
-        "slates",
-        "owner",
-      ],
-      extractField: (entry, fieldName) => {
-        return fieldName
-          .split(".")
-          .reduce((doc, key) => doc && doc[key], entry);
-      },
-      searchOptions: {
-        fuzzy: 0.2,
-      },
-    });
-    let files = [];
-    if (response.data) {
-      for (let slate of response.data.slates) {
-        if (slate.data.objects.length) {
-          files.push(
-            ...slate.data.objects.map((file, i) => {
-              return {
-                type: "FILE",
-                id: file.id,
-                filename: file.title,
-                data: { file, index: i, slate },
-              };
-            })
-          );
-        }
-      }
-      this.users = response.data.users;
-      this.slates = response.data.slates;
-      this.miniSearch.addAll(response.data.users);
-      this.miniSearch.addAll(response.data.slates);
-      this.miniSearch.addAll(files);
-    }
-  };
-
-  _handleChange = (e) => {
-    if (!this.state.loading) {
-      this.setState({ inputValue: e.target.value }, () => {
-        let searchResults = this.miniSearch.search(this.state.inputValue);
-        let results = [];
-        for (let item of searchResults) {
-          if (item.type === "USER") {
-            results.push({
-              value: {
-                type: "USER",
-                data: item,
-              },
-              component: <UserEntry item={item} />,
-            });
-          } else if (item.type === "SLATE") {
-            results.push({
-              value: {
-                type: "SLATE",
-                data: item,
-              },
-              component: (
-                <SlateEntry item={item} onAction={this.props.onAction} />
-              ),
-            });
-          } else if (item.type === "FILE") {
-            results.push({
-              value: {
-                type: "FILE",
-                data: item,
-              },
-              component: <FileEntry item={item} />,
-            });
-          }
-          this.setState({ results });
-        }
-      });
-    }
-  };
-
-  _handleSelect = async (value) => {
-    if (value.type === "SLATE") {
-      value.data.owner = this.users.filter((user) => {
-        return user.username === value.data.owner.username;
-      })[0]; //TODO: slightly hacky way of getting the data. May want to serialize later?
-      this.props.onAction({
-        type: "NAVIGATE",
-        value: "V1_NAVIGATION_SLATE",
-        data: value.data,
-      });
-    }
-    if (value.type === "USER") {
-      this.props.onAction({
-        type: "NAVIGATE",
-        value: "V1_NAVIGATION_PROFILE",
-        data: value.data,
-      });
-    }
-    if (value.type === "FILE") {
-      let slate = value.data.data.slate;
-      slate.owner = this.users.filter((user) => {
-        return user.username === slate.owner.username;
-      })[0]; //TODO: slightly hacky way of getting the data. May want to serialize later?
-      this.props.onAction({
-        type: "NAVIGATE",
-        value: "V1_NAVIGATION_SLATE",
-        data: slate,
-      });
-      dispatchCustomEvent({
-        name: "slate-global-open-carousel",
-        detail: { index: value.data.data.index },
-      });
-    }
-    dispatchCustomEvent({
-      name: "delete-modal",
-      detail: {},
-    });
-  };
-
-  render() {
-    return (
-      <div css={STYLES_MODAL}>
-        <SearchDropdown
-          placeholder="Search..."
-          results={this.state.results}
-          onSelect={this._handleSelect}
-          onChange={this._handleChange}
-          inputValue={this.state.inputValue}
-          style={STYLES_SEARCH_DROPDOWN}
-        />
-        {this.state.loading ? <LoaderSpinner css={STYLES_LOADER} /> : null}
-      </div>
-    );
-  }
-}
--- a/components/core/SlateMediaObjectPreview.js
+++ b/components/core/SlateMediaObjectPreview.js
@ -30,48 +30,26 @@ export default class SlateMediaObjectPreview extends React.Component {
    // This is a hack to catch this undefined case I don't want to track down yet.
    const url = this.props.url.replace("https://undefined", "https://");

-    let element = (
-      <article css={STYLES_ENTITY} style={this.props.style}>
-        No Preview
-      </article>
-    );
+    let element = <article css={STYLES_ENTITY}>No Preview</article>;

    if (this.props.type && this.props.type.startsWith("video/")) {
-      element = (
-        <article css={STYLES_ENTITY} style={this.props.style}>
-          Video
-        </article>
-      );
+      element = <article css={STYLES_ENTITY}>Video</article>;
    }

    if (this.props.type && this.props.type.startsWith("audio/")) {
-      element = (
-        <article css={STYLES_ENTITY} style={this.props.style}>
-          Audio
-        </article>
-      );
+      element = <article css={STYLES_ENTITY}>Audio</article>;
    }

    if (this.props.type && this.props.type.startsWith("application/epub")) {
-      element = (
-        <article css={STYLES_ENTITY} style={this.props.style}>
-          EPub
-        </article>
-      );
+      element = <article css={STYLES_ENTITY}>EPub</article>;
    }

    if (this.props.type && this.props.type.startsWith("application/pdf")) {
-      element = (
-        <article css={STYLES_ENTITY} style={this.props.style}>
-          PDF
-        </article>
-      );
+      element = <article css={STYLES_ENTITY}>PDF</article>;
    }

    if (this.props.type && this.props.type.startsWith("image/")) {
-      element = (
-        <img css={STYLES_IMAGE} style={this.props.imageStyle} src={url} />
-      );
+      element = <img css={STYLES_IMAGE} src={url} />;
    }

    return element;
--- a/components/core/SlateMediaObjectSidebar.js
+++ b/components/core/SlateMediaObjectSidebar.js
@ -160,7 +160,7 @@ export default class SlateMediaObjectSidebar extends React.Component {
    const elements = [];

    if (this.props.data) {
-      if (this.props.editing) {
+      if (this.props.onObjectSave) {
        elements.push(
          <React.Fragment key="sidebar-media-object-info">
            <div css={STYLES_SIDEBAR_SECTION}>
@ -300,29 +300,30 @@ export default class SlateMediaObjectSidebar extends React.Component {

    if (this.props.cid) {
      elements.push(
-        <div css={STYLES_SIDEBAR} style={{ height: "auto" }}>
-          <a
-            key="sidebar-media-open-file"
-            css={STYLES_BUTTON}
-            href={Strings.getCIDGatewayURL(this.props.cid)}
-            target="_blank"
-          >
-            Open file in new tab &nbsp;&nbsp;⭢
-          </a>
-          <a
-            key="sidebar-media-download-file"
-            css={STYLES_BUTTON}
-            href={Strings.getCIDGatewayURL(this.props.cid)}
-            target="_blank"
-            download={this.props.cid}
-          >
-            Download file &nbsp;&nbsp;⭢
-          </a>
-        </div>
+        <a
+          key="sidebar-media-open-file"
+          css={STYLES_BUTTON}
+          href={Strings.getCIDGatewayURL(this.props.cid)}
+          target="_blank"
+        >
+          Open file in a new browser tab &nbsp;&nbsp;⭢
+        </a>
+      );
+
+      elements.push(
+        <a
+          key="sidebar-media-download-file"
+          css={STYLES_BUTTON}
+          href={Strings.getCIDGatewayURL(this.props.cid)}
+          target="_blank"
+          download={this.props.cid}
+        >
+          Download file &nbsp;&nbsp;⭢
+        </a>
      );
    }

-    if (this.props.onDelete && this.props.editing) {
+    if (this.props.onDelete) {
      elements.push(
        <span
          key="sidebar-media-object-delete"
@ -332,7 +333,7 @@ export default class SlateMediaObjectSidebar extends React.Component {
          {this.props.loading ? (
            <LoaderSpinner style={{ height: 16, width: 16 }} />
          ) : (
-            <span>Delete from slate&nbsp;&nbsp;&nbsp;⭢</span>
+            <span>Delete Slate object&nbsp;&nbsp;&nbsp;⭢</span>
          )}
        </span>
      );
--- a/components/core/SlatePreviewBlock.js
+++ b/components/core/SlatePreviewBlock.js
@ -1,75 +0,0 @@
-//doable with vw. calculate vw - sidebar (if mobile size), divided by numItems = max-width and max-height
-
-import React from "react";
-
-import * as Constants from "~/common/constants";
-
-import { css } from "@emotion/react";
-import SlateMediaObjectPreview from "~/components/core/SlateMediaObjectPreview";
-
-const STYLES_IMAGE_ROW = css`
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  max-height: 186px;
-  overflow: hidden;
-
-  @media (max-width: ${Constants.sizes.mobile}px) {
-    justify-content: center;
-  }
-`;
-
-const STYLES_ITEM_BOX = css`
-  width: 186px;
-  height: 186px;
-  padding: 16px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-`;
-
-export function SlatePreviewRow(props) {
-  let numItems = props.numItems || 5;
-  let objects =
-    props.slate.data.objects.length > numItems
-      ? props.slate.data.objects.slice(0, numItems)
-      : props.slate.data.objects;
-  return (
-    <div css={STYLES_IMAGE_ROW} style={props.containerStyle}>
-      {objects.map((each) => (
-        <div key={each.url} css={STYLES_ITEM_BOX} style={props.style}>
-          <SlateMediaObjectPreview
-            type={each.type}
-            url={each.url}
-            style={props.previewStyle}
-          />
-        </div>
-      ))}
-    </div>
-  );
-}
-
-const STYLES_BLOCK = css`
-  border: 1px solid ${Constants.system.border};
-  border-radius: 16px;
-  padding: 24px;
-  font-size: 12px;
-  text-align: left;
-  margin: 24px auto;
-  width: 95%;
-  max-width: 980px;
-  cursor: pointer;
-`;
-
-const STYLES_SLATE_NAME = css`
-  font-size: ${Constants.typescale.lvl1};
-`;
-
-export default function SlatePreviewBlock(props) {
-  return (
-    <div css={STYLES_BLOCK}>
-      <div css={STYLES_SLATE_NAME}>{props.slate.data.name}</div>
-      <SlatePreviewRow {...props} previewStyle={props.previewStyle} />
-    </div>
-  );
-}
--- a/components/system/components/InputMenu.js
+++ b/components/system/components/InputMenu.js
@ -17,7 +17,9 @@ const STYLES_DROPDOWN = css`
  background-color: ${Constants.system.white};
  overflow: hidden;
  width: 100%;
+
  scrollbar-width: none;
+  -ms-overflow-style: -ms-autohiding-scrollbar;

  ::-webkit-scrollbar {
    display: none;
@ -30,10 +32,8 @@ const STYLES_DROPDOWN_ITEM = css`
  font-size: 0.8em;
  border-radius: 16px;
  border: 1px solid ${Constants.system.white};
-  cursor: pointer;
-
  :hover {
-    border-color: ${Constants.system.border} !important;
+    border-color: ${Constants.system.border};
  }
 `;

@ -72,14 +72,10 @@ const STYLES_INPUT = css`
  }
 `;

-export class SearchDropdown extends React.Component {
+export class InputMenu extends React.Component {
  _input;
  _optionRoot;

-  static defaultProps = {
-    defaultResults: [],
-  };
-
  state = {
    selectedIndex: -1,
  };
@ -93,15 +89,27 @@ export class SearchDropdown extends React.Component {
    window.removeEventListener("keydown", this._handleDocumentKeydown);
  };

-  _handleChange = (e) => {
+  _handleInputChange = (e) => {
    if (this.state.selectedIndex !== -1) {
      this.setState({ selectedIndex: -1 });
    }
-    this.props.onChange(e);
+    this.props.onChange({
+      target: {
+        value: null,
+        name: this.props.name,
+      },
+    });
+    this.props.onInputChange(e);
  };

  _handleSelect = (index) => {
-    this.props.onSelect(this.props.results[index].value);
+    let e = {
+      target: {
+        value: this.props.options[index].value,
+        name: this.props.name,
+      },
+    };
+    this.props.onChange(e);
  };

  _handleDocumentKeydown = (e) => {
@ -111,7 +119,7 @@ export class SearchDropdown extends React.Component {
    } else if (e.keyCode === 9) {
      this._handleDelete();
    } else if (e.keyCode === 40) {
-      if (this.state.selectedIndex < this.props.results.length - 1) {
+      if (this.state.selectedIndex < this.props.options.length - 1) {
        let listElem = this._optionRoot.children[this.state.selectedIndex + 1];
        let elemRect = listElem.getBoundingClientRect();
        let rootRect = this._optionRoot.getBoundingClientRect();
@ -137,7 +145,7 @@ export class SearchDropdown extends React.Component {
      e.preventDefault();
    } else if (e.keyCode === 13) {
      if (
-        this.props.results.length > this.state.selectedIndex &&
+        this.props.options.length > this.state.selectedIndex &&
        this.state.selectedIndex !== -1
      ) {
        this._handleSelect(this.state.selectedIndex);
@ -155,7 +163,7 @@ export class SearchDropdown extends React.Component {
            value={this.props.inputValue}
            placeholder={this.props.placeholder}
            style={this.props.inputStyle}
-            onChange={this._handleChange}
+            onChange={this._handleInputChange}
            ref={(c) => {
              this._input = c;
            }}
@ -174,23 +182,22 @@ export class SearchDropdown extends React.Component {
            css={STYLES_DROPDOWN}
            style={this.props.style}
          >
-            {(this.props.results && this.props.results.length
-              ? this.props.results
-              : this.props.defaultResults
+            {(this.props.options && this.props.options.length
+              ? this.props.options
+              : this.props.defaultOptions
            ).map((each, i) => (
              <div
-                key={each.value.data.id}
+                key={each.value}
                css={STYLES_DROPDOWN_ITEM}
                style={{
                  borderColor:
                    this.state.selectedIndex === i
                      ? Constants.system.border
-                      : Constants.system.white,
+                      : "auto",
                  ...this.props.itemStyle,
                }}
-                onClick={() => this.props.onSelect(each.value)}
              >
-                {each.component}
+                {each.name}
              </div>
            ))}
          </div>
--- a/components/system/index.js
+++ b/components/system/index.js
@ -16,6 +16,7 @@ import {
  FilecoinRetrievalDealsList,
 } from "~/components/system/modules/FilecoinDealsList";
 import { FilecoinSettings } from "~/components/system/modules/FilecoinSettings";
+import { SpotlightSearch } from "~/components/system/modules/SpotlightSearch";

 // NOTE(jim): Global components
 import { GlobalModal } from "~/components/system/components/GlobalModal";
@ -36,6 +37,7 @@ import { CheckBox } from "~/components/system/components/CheckBox";
 import { CodeTextarea } from "~/components/system/components/CodeTextarea";
 import { DatePicker } from "~/components/system/components/DatePicker";
 import { Input } from "~/components/system/components/Input";
+import { InputMenu } from "~/components/system/components/InputMenu";
 import { ListEditor } from "~/components/system/components/ListEditor";
 import { HoverTile } from "~/components/system/components/HoverTile";
 import { PopoverNavigation } from "~/components/system/components/PopoverNavigation";
@ -119,6 +121,7 @@ export {
  GlobalCarousel,
  GlobalNotification,
  Input,
+  InputMenu,
  HoverTile,
  ListEditor,
  PopoverNavigation,
@ -126,6 +129,7 @@ export {
  SelectCountryMenu,
  SelectMenu,
  Slider,
+  SpotlightSearch,
  StatUpload,
  StatDownload,
  TabGroup,
--- a/components/system/modules/SpotlightSearch.js
+++ b/components/system/modules/SpotlightSearch.js
@ -0,0 +1,329 @@
+import * as React from "react";
+import * as Constants from "~/common/constants";
+import * as SVG from "~/common/svg";
+import * as Strings from "~/common/strings";
+import * as Actions from "~/common/actions";
+
+import MiniSearch from "minisearch";
+import SlateMediaObjectPreview from "~/components/core/SlateMediaObjectPreview";
+
+import { css } from "@emotion/react";
+import { InputMenu } from "~/components/system/components/InputMenu";
+import { dispatchCustomEvent } from "~/common/custom-events";
+
+const STYLES_ICON_CIRCLE = css`
+  height: 24px;
+  width: 24px;
+  border-radius: 50%;
+  background-color: ${Constants.system.foreground};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
+const STYLES_MODAL = css`
+  width: 95vw;
+  max-width: 600px;
+  height: 60vh;
+  max-height: 500px;
+  padding: 24px;
+`;
+
+const STYLES_INPUT_MENU = {
+  height: "calc(100% - 80px)",
+  width: "calc(100% - 48px)",
+  overflowY: "scroll",
+};
+
+const STYLES_USER_ENTRY_CONTAINER = css`
+  display: grid;
+  grid-template-columns: repeat(3, auto) 1fr;
+  grid-column-gap: 16px;
+  align-items: center;
+`;
+
+const STYLES_PROFILE_IMAGE = css`
+  background-size: cover;
+  background-position: 50% 50%;
+  height: 24px;
+  width: 24px;
+  border-radius: 50%;
+`;
+
+const UserEntry = ({ item }) => {
+  return (
+    <a css={STYLES_LINK} href={`/${item.username}`}>
+      <div css={STYLES_ENTRY}>
+        <div css={STYLES_USER_ENTRY_CONTAINER}>
+          <div
+            style={{ backgroundImage: `url(${item.data.photo})` }}
+            css={STYLES_PROFILE_IMAGE}
+          />
+          {item.data.name ? <strong>{item.data.name}</strong> : null}
+          <a css={STYLES_LINK_HOVER} href={`/${item.username}`}>
+            @{item.username}
+          </a>
+        </div>
+      </div>
+    </a>
+  );
+};
+
+const STYLES_ENTRY = css`
+  padding: 8px 0px;
+`;
+
+const STYLES_SLATE_ENTRY_CONTAINER = css`
+  display: grid;
+  grid-template-columns: repeat(3, auto) 1fr;
+  grid-column-gap: 16px;
+  align-items: center;
+`;
+
+const STYLES_SLATE_IMAGES_CONTAINER = css`
+  display: grid;
+  grid-template-columns: repeat(3, auto) 1fr;
+  grid-column-gap: 16px;
+  margin: 8px 0px;
+  margin-left: 40px;
+`;
+
+const STYLES_SLATE_IMAGE = css`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 72px;
+  width: 72px;
+`;
+
+const STYLES_LINK = css`
+  color: ${Constants.system.black};
+  text-decoration: none;
+`;
+
+const STYLES_LINK_HOVER = css`
+  color: ${Constants.system.black};
+  text-decoration: none;
+  :hover {
+    color: ${Constants.system.brand};
+  }
+`;
+
+const SlateEntry = ({ item, onAction }) => {
+  //TODO: utilize auto suggest feature of minisearch
+  return (
+    <div
+    // onClick={() => {
+    //   onAction({ type: "NAVIGATE", value: 17, data: item });
+    // }}
+    >
+      <div css={STYLES_ENTRY}>
+        <div css={STYLES_SLATE_ENTRY_CONTAINER}>
+          <div css={STYLES_ICON_CIRCLE}>
+            <SVG.Slate2 height="16px" />
+          </div>
+          <strong>{item.data.name}</strong>
+          {/* <div>
+            <a css={STYLES_LINK_HOVER} href={`/${item.username}`}>
+              @{item.data.username} TODO: add the owner to the slate entries 
+            </a>
+          </div> */}
+        </div>
+        {item.data.objects.length ? (
+          <div css={STYLES_SLATE_IMAGES_CONTAINER}>
+            {item.data.objects.slice(0, 4).map((each) => (
+              <div css={STYLES_SLATE_IMAGE}>
+                <SlateMediaObjectPreview type={each.type} url={each.url} />
+              </div>
+            ))}
+          </div>
+        ) : null}
+      </div>
+    </div>
+  );
+};
+
+const FileEntry = ({ item, onAction }) => {
+  return (
+    <div
+      css={STYLES_LINK}
+      // onClick={() => {
+      //   onAction({ type: "NAVIGATE", value: 15, data: { url: item.url } });
+      // }}
+    >
+      <div css={STYLES_ENTRY}>
+        <div css={STYLES_USER_ENTRY_CONTAINER}>
+          <div css={STYLES_ICON_CIRCLE}>
+            <SVG.Folder2 height="16px" />
+          </div>
+          <strong>{item.name}</strong>
+          <a href={`/${item.username}`} css={STYLES_LINK_HOVER}>
+            @{item.username}
+          </a>
+        </div>
+        <div
+          style={{
+            backgroundImage: `url(${
+              item.type === "image" ? item.url : fileImg
+            })`,
+            margin: "8px 0px 8px 40px",
+          }}
+          css={STYLES_SLATE_IMAGE}
+        />
+      </div>
+    </div>
+  );
+};
+
+const STYLES_DROPDOWN_ITEM = css`
+  display: grid;
+  grid-template-columns: 56px 1fr;
+  align-items: center;
+  cursor: pointer;
+`;
+
+const options = [
+  {
+    name: "Send money",
+    link: null,
+    icon: <SVG.Wallet2 height="16px" />,
+    action: { type: "NAVIGATE", value: 2 },
+  },
+  {
+    name: "New slate",
+    link: null,
+    icon: <SVG.Slate2 height="16px" />,
+    action: { type: "NAVIGATE", value: 3 },
+  },
+  {
+    name: "Upload file",
+    link: null,
+    icon: <SVG.Folder2 height="16px" />,
+    action: { type: "NAVIGATE", value: "data" },
+  },
+  {
+    name: "Account settings",
+    link: null,
+    icon: <SVG.Tool2 height="16px" />,
+    action: { type: "NAVIGATE", value: 13 },
+  },
+  {
+    name: "Filecoin settings",
+    link: null,
+    icon: <SVG.Tool2 height="16px" />,
+    action: { type: "NAVIGATE", value: 14 },
+  },
+];
+
+export class SpotlightSearch extends React.Component {
+  state = {
+    options: [],
+    value: null,
+    inputValue: "",
+  };
+
+  componentDidMount = async () => {
+    const response = await Actions.getNetworkDirectory();
+    console.log(response.data);
+    this.miniSearch = new MiniSearch({
+      fields: ["slatename", "data.name", "username"], // fields to index for full-text search
+      storeFields: ["type", "slatename", "username", "data", "id"], // fields to return with search results
+      extractField: (entry, fieldName) => {
+        return fieldName
+          .split(".")
+          .reduce((doc, key) => doc && doc[key], entry); // Access nested fields
+      },
+      searchOptions: {
+        // boost: { "data.name": 2 },
+        fuzzy: 0.2,
+      },
+    });
+    this.miniSearch.addAll(response.data.users);
+    this.miniSearch.addAll(response.data.slates);
+    //TODO: unpack slates => slate object files and add those too
+  };
+
+  _handleChange = (e) => {
+    // if (e.target.value !== null) {
+    //   if (e.target.value.substring(0, 1) === "/") {
+    //     window.location.pathname = e.target.value;
+    //   } else {
+    //     window.location.href = e.target.value;
+    //   }
+    // }
+  };
+
+  _handleInputChange = (e) => {
+    this.setState({ inputValue: e.target.value }, () => {
+      let results = this.miniSearch.search(this.state.inputValue);
+      let options = [];
+      for (let item of results) {
+        if (item.type === "USER") {
+          options.push({
+            value: `/${item.username}`,
+            name: <UserEntry item={item} onAction={this.props.onAction} />,
+          });
+        } else if (item.type === "SLATE") {
+          options.push({
+            value: `/${item.slatename}`, //change this format for input menu to something more appropriate
+            name: <SlateEntry item={item} onAction={this.props.onAction} />,
+          });
+        }
+        // else if (item.type === "image" || item.type == "file") {
+        //   options.push({
+        //     value: `${item.url}`,
+        //     name: <FileEntry item={item} onAction={this.props.onAction} />,
+        //   });
+        // }
+      }
+      this.setState({ options });
+    });
+  };
+
+  _handleAction = (action) => {
+    this.props.onAction(action);
+    dispatchCustomEvent({
+      name: "delete-modal",
+      detail: {},
+    });
+  };
+
+  render() {
+    return (
+      <div css={STYLES_MODAL}>
+        <InputMenu
+          show
+          search
+          name="exampleThree"
+          placeholder="Search..."
+          options={this.state.options}
+          onChange={this._handleChange}
+          value={this.state.value}
+          onInputChange={this._handleInputChange}
+          inputValue={this.state.inputValue}
+          style={STYLES_INPUT_MENU}
+          defaultOptions={[]}
+          // defaultOptions={options.map((option) => {
+          //   return {
+          //     name: (
+          //       <div
+          //         css={STYLES_DROPDOWN_ITEM}
+          //         onClick={() => this._handleAction(option.action)}
+          //       >
+          //         <div
+          //           css={STYLES_ICON_CIRCLE}
+          //           style={{ height: "40px", width: "40px" }}
+          //         >
+          //           {option.icon}
+          //         </div>
+          //         <div>{option.name}</div>
+          //       </div>
+          //     ),
+          //     value: option.name,
+          //   };
+          // })}
+        />
+      </div>
+    );
+  }
+}
--- a/node_common/managers/viewer.js
+++ b/node_common/managers/viewer.js
@ -48,7 +48,7 @@ export const getById = async ({ id }) => {

  // NOTE(jim): This should be the cheapest call.
  const pendingTrusted = await Data.getPendingTrustedRelationshipsByUserId({
-    userId: id,
+    userId: [],
  });
  const r3 = await Serializers.doPendingTrusted({
    users: [id],
--- a/pages/_/integration-page.js
+++ b/pages/_/integration-page.js
@ -67,7 +67,6 @@ export default class IntegrationPage extends React.Component {

  _handleDelete = async (entity) => {
    const response = await Actions.deleteTrustRelationship({ id: entity.id });
-    console.log(response);

    await this._handleUpdate();
  };
--- a/pages/_/profile.js
+++ b/pages/_/profile.js
@ -2,7 +2,6 @@ import * as React from "react";
 import * as Constants from "~/common/constants";

 import { css } from "@emotion/react";
-import Profile from "~/components/core/Profile";

 import WebsitePrototypeWrapper from "~/components/core/WebsitePrototypeWrapper";
 import WebsitePrototypeHeader from "~/components/core/WebsitePrototypeHeader";
@ -15,11 +14,67 @@ export const getServerSideProps = async (context) => {
 };

 const STYLES_ROOT = css`
-  display: grid;
-  grid-template-rows: auto 1fr auto;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  height: 100vh;
  text-align: center;
  font-size: 1rem;
-  min-height: 100vh;
+`;
+
+const STYLES_MIDDLE = css`
+  position: relative;
+  min-height: 10%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  padding: 24px;
+`;
+
+const STYLES_CARD = css`
+  margin: 0 auto 0 auto;
+  max-width: 360px;
+  width: 100%;
+  background: ${Constants.system.pitchBlack};
+  border-radius: 8px;
+  padding: 0;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
+`;
+
+const STYLES_CARD_IMAGE = css`
+  display: block;
+  width: 100%;
+  border-radius: 8px 8px 8px 8px;
+  margin: 0;
+  padding: 0;
+`;
+
+const STYLES_CARD_PARAGRAPH = css`
+  font-family: ${Constants.font.code};
+  padding: 24px;
+  font-size: 12px;
+  text-transform: uppercase;
+  text-align: left;
+  color: ${Constants.system.white};
+`;
+
+const STYLES_LINK = css`
+  color: ${Constants.system.white};
+  text-decoration: none;
+  transition: 200ms ease color;
+  display: block;
+  margin-top: 4px;
+
+  :visited {
+    color: ${Constants.system.white};
+  }
+
+  :hover {
+    color: ${Constants.system.brand};
+  }
 `;

 export default class ProfilePage extends React.Component {
@ -37,9 +92,26 @@ export default class ProfilePage extends React.Component {
      >
        <div css={STYLES_ROOT}>
          <WebsitePrototypeHeader />
-          <div style={{ marginTop: "80px" }}>
-            <Profile {...this.props} />
+
+          <div css={STYLES_CARD}>
+            <img css={STYLES_CARD_IMAGE} src={this.props.creator.data.photo} />
+            {this.props.creator.slates && this.props.creator.slates.length ? (
+              <p css={STYLES_CARD_PARAGRAPH}>
+                {this.props.creator.slates.map((row) => {
+                  const url = `/${this.props.creator.username}/${
+                    row.slatename
+                  }`;
+
+                  return (
+                    <a key={url} css={STYLES_LINK} href={url}>
+                      {url}
+                    </a>
+                  );
+                })}
+              </p>
+            ) : null}
          </div>
+
          <WebsitePrototypeFooter />
        </div>
      </WebsitePrototypeWrapper>
--- a/pages/_/slate.js
+++ b/pages/_/slate.js
@ -110,7 +110,6 @@ export default class SlatePage extends React.Component {
          return {
            id: each.id,
            data: each,
-            editing: false,
            component: (
              <SlateMediaObject key={each.id} useImageFallback data={each} />
            ),
@ -127,7 +126,9 @@ export default class SlatePage extends React.Component {
    });

  render() {
-    const title = `${this.props.creator.username}/${this.props.slate.slatename}`;
+    const title = `${this.props.creator.username}/${
+      this.props.slate.slatename
+    }`;
    const url = `https://slate.host/${this.props.creator.username}`;
    const description = this.props.slate.data.body;

@ -158,7 +159,7 @@ export default class SlatePage extends React.Component {
          </WebsitePrototypeHeaderGeneric>
          <div css={STYLES_SLATE}>
            <Slate
-              editing={false}
+              editable={false}
              layouts={this.state.layouts}
              items={this.props.slate.data.objects}
              onSelect={this._handleSelect}
--- a/scenes/SceneDirectory.js
+++ b/scenes/SceneDirectory.js
@ -1,285 +1,19 @@
 import * as React from "react";
 import * as System from "~/components/system";
-import * as Actions from "~/common/actions";
-import * as Constants from "~/common/constants";
-import * as SVG from "~/components/system/svg";

 import { css } from "@emotion/react";

 import ScenePage from "~/components/core/ScenePage";
 import ScenePageHeader from "~/components/core/ScenePageHeader";

-const STYLES_TAB = css`
-  padding: 8px 8px 8px 0px;
-  margin-right: 24px;
-  cursor: pointer;
-  display: inline-block;
-  font-size: ${Constants.typescale.lvl2};
-
-  @media (max-width: ${Constants.sizes.mobile}px) {
-    font-size: ${Constants.typescale.lvl1};
-    margin-right: 12px;
-  }
-`;
-
-const STYLES_TAB_GROUP = css`
-  border-bottom: 1px solid ${Constants.system.gray};
-  margin: 24px 0px 24px 0px;
-`;
-
-const STYLES_USER_ENTRY = css`
-  display: grid;
-  grid-template-columns: 1fr auto;
-  align-items: center;
-  font-size: ${Constants.typescale.lvl1};
-  cursor: pointer;
-`;
-
-const STYLES_USER = css`
-  display: grid;
-  grid-template-columns: auto 1fr;
-  align-items: center;
-`;
-
-const STYLES_ACTION_BUTTON = css`
-  padding: 8px;
-  cursor: pointer;
-  justify-self: end;
-
-  :hover {
-    color: ${Constants.system.brand};
-  }
-`;
-
-const STYLES_PROFILE_IMAGE = css`
-  background-size: cover;
-  background-position: 50% 50%;
-  height: 24px;
-  width: 24px;
-  margin: 8px 24px 8px 8px;
-  border-radius: 50%;
-`;
-
-function UserEntry({ user, button, onClick }) {
-  return (
-    <div key={user.username} css={STYLES_USER_ENTRY}>
-      <div css={STYLES_USER} onClick={onClick}>
-        <div
-          css={STYLES_PROFILE_IMAGE}
-          style={{ backgroundImage: `url(${user.data.photo})` }}
-        />
-        <div>@{user.username}</div>
-      </div>
-      {button}
-    </div>
-  );
-}
-
+// TODO(jim): Figure out the activity story.
 export default class SceneDirectory extends React.Component {
-  state = {
-    loading: false,
-    tab: "requests",
-    viewer: this.props.viewer,
-  };
-
-  _handleUpdate = async (e) => {
-    let response = await this.props.onRehydrate();
-    // const response = await Actions.hydrateAuthenticatedUser();
-
-    if (!response || response.error) {
-      alert("TODO: error fetching authenticated viewer");
-      return null;
-    }
-
-    let viewer = response.data;
-
-    this.setState({ viewer });
-  };
-
-  _handleDelete = async (id) => {
-    const response = await Actions.deleteTrustRelationship({
-      id: id,
-    });
-    await this._handleUpdate();
-  };
-
-  _handleAccept = async (id) => {
-    const response = await Actions.updateTrustRelationship({
-      userId: id,
-    });
-    await this._handleUpdate();
-  };
-
-  _handleFollow = async (id) => {
-    const response = await Actions.createSubscription({
-      userId: id,
-    });
-    await this._handleUpdate();
-  };
-
  render() {
    return (
      <ScenePage>
-        <ScenePageHeader title="Directory" />
-        <div css={STYLES_TAB_GROUP}>
-          <div
-            css={STYLES_TAB}
-            style={{
-              color:
-                this.state.tab === "requests"
-                  ? Constants.system.pitchBlack
-                  : Constants.system.gray,
-            }}
-            onClick={() => this.setState({ tab: "requests" })}
-          >
-            Requests
-          </div>
-          <div
-            css={STYLES_TAB}
-            style={{
-              color:
-                this.state.tab === "peers"
-                  ? Constants.system.pitchBlack
-                  : Constants.system.gray,
-            }}
-            onClick={() => this.setState({ tab: "peers" })}
-          >
-            Trusted
-          </div>
-          <div
-            css={STYLES_TAB}
-            style={{
-              marginRight: "0px",
-              color:
-                this.state.tab === "following"
-                  ? Constants.system.pitchBlack
-                  : Constants.system.gray,
-            }}
-            onClick={() => this.setState({ tab: "following" })}
-          >
-            Following
-          </div>
-        </div>
-        {this.state.tab === "requests"
-          ? this.state.viewer.pendingTrusted
-              .filter((relation) => {
-                return !relation.data.verified;
-              })
-              .map((relation) => {
-                let button = (
-                  <div
-                    css={STYLES_ACTION_BUTTON}
-                    onClick={() => this._handleAccept(relation.owner.id)}
-                  >
-                    Accept
-                  </div>
-                );
-                return (
-                  <UserEntry
-                    user={relation.owner}
-                    button={button}
-                    onClick={() => {
-                      this.props.onAction({
-                        type: "NAVIGATE",
-                        value: this.props.sceneId,
-                        scene: "PROFILE",
-                        data: relation.owner,
-                      });
-                    }}
-                  />
-                );
-              })
-          : null}
-        {this.state.tab === "peers" ? (
-          <div>
-            {this.state.viewer.pendingTrusted
-              .filter((relation) => {
-                return relation.data.verified;
-              })
-              .map((relation) => {
-                let button = (
-                  <div
-                    css={STYLES_ACTION_BUTTON}
-                    onClick={() => this._handleDelete(relation.id)}
-                  >
-                    Remove
-                  </div>
-                );
-                return (
-                  <UserEntry
-                    user={relation.owner}
-                    button={button}
-                    onClick={() => {
-                      this.props.onAction({
-                        type: "NAVIGATE",
-                        value: this.props.sceneId,
-                        scene: "PROFILE",
-                        data: relation.owner,
-                      });
-                    }}
-                  />
-                );
-              })}
-            {this.state.viewer.trusted
-              .filter((relation) => {
-                return relation.data.verified;
-              })
-              .map((relation) => {
-                let button = (
-                  <div
-                    css={STYLES_ACTION_BUTTON}
-                    onClick={() => this._handleDelete(relation.id)}
-                  >
-                    Remove
-                  </div>
-                );
-                return (
-                  <UserEntry
-                    user={relation.user}
-                    button={button}
-                    onClick={() => {
-                      this.props.onAction({
-                        type: "NAVIGATE",
-                        value: this.props.sceneId,
-                        scene: "PROFILE",
-                        data: relation.user,
-                      });
-                    }}
-                  />
-                );
-              })}
-          </div>
-        ) : null}
-        {this.state.tab === "following"
-          ? this.state.viewer.subscriptions
-              .filter((relation) => {
-                return !!relation.target_user_id;
-              })
-              .map((relation) => {
-                let button = (
-                  <div
-                    css={STYLES_ACTION_BUTTON}
-                    onClick={() => this._handleFollow(relation.user.id)}
-                  >
-                    Unfollow
-                  </div>
-                );
-                return (
-                  <UserEntry
-                    user={relation.user}
-                    button={button}
-                    onClick={() => {
-                      this.props.onAction({
-                        type: "NAVIGATE",
-                        value: this.props.sceneId,
-                        scene: "PROFILE",
-                        data: relation.user,
-                      });
-                    }}
-                  />
-                );
-              })
-          : null}
+        <ScenePageHeader title="Directory [WIP]">
+          This scene is currently a work in progress.
+        </ScenePageHeader>
      </ScenePage>
    );
  }
--- a/scenes/SceneProfile.js
+++ b/scenes/SceneProfile.js
@ -1,198 +0,0 @@
-import * as React from "react";
-import * as System from "~/components/system";
-import * as Actions from "~/common/actions";
-import * as Constants from "~/common/constants";
-import * as SVG from "~/components/system/svg";
-
-import { css } from "@emotion/react";
-import { ButtonPrimary } from "~/components/system/components/Buttons";
-
-import ScenePage from "~/components/core/ScenePage";
-import Profile from "~/components/core/Profile";
-import CircleButtonLight from "~/components/core/CircleButtonLight";
-
-const BUTTON_STYLES = {
-  border: `1px solid ${Constants.system.border}`,
-  boxShadow: "none",
-  fontFamily: Constants.font.text,
-  margin: "8px",
-  padding: "8px 16px",
-  minHeight: "30px",
-};
-
-const BUTTON_SECONDARY_STYLE = {
-  ...BUTTON_STYLES,
-  backgroundColor: Constants.system.white,
-  color: Constants.system.brand,
-};
-
-const BUTTON_PRIMARY_STYLE = {
-  ...BUTTON_STYLES,
-  backgroundColor: Constants.system.brand,
-  color: Constants.system.white,
-};
-
-const STATUS_BUTTON_MAP = {
-  trusted: "Remove peer",
-  untrusted: "Add peer",
-  sent: "Cancel request",
-  received: "Accept request",
-};
-
-export default class SceneProfile extends React.Component {
-  state = {
-    loading: false,
-    trustStatus: "untrusted",
-    followStatus: false,
-  };
-
-  componentDidMount = () => {
-    this.setStatus(this.props.viewer);
-  };
-
-  componentDidUpdate(prevProps) {
-    const isNewScene = prevProps.data.username !== this.props.data.username;
-
-    let isUpdated = false;
-    // if (
-    //   this.props.data.data.objects.length !== prevProps.data.data.objects.length
-    // ) {
-    //   isUpdated = true;
-    // }
-
-    // if (this.props.data.data.body !== prevProps.data.data.body) {
-    //   isUpdated = true;
-    // }
-
-    if (isNewScene || isUpdated) {
-      this.setStatus(this.props.viewer);
-    }
-  }
-
-  setStatus = (viewer) => {
-    let newState = { trustStatus: "untrusted", followStatus: false };
-    let trust = viewer.trusted.filter((entry) => {
-      return entry.target_user_id === this.props.data.id;
-    });
-    if (trust.length) {
-      let relation = trust[0];
-      newState.trustId = relation.id;
-      if (relation.data.verified) {
-        newState.trustStatus = "trusted";
-      } else {
-        newState.trustStatus = "sent";
-      }
-    }
-    let pendingTrust = viewer.pendingTrusted.filter((entry) => {
-      return entry.owner_user_id === this.props.data.id;
-    });
-    if (pendingTrust.length) {
-      let relation = pendingTrust[0];
-      newState.trustId = relation.id;
-      if (pendingTrust[0].data.verified) {
-        newState.trustStatus = "trusted";
-      } else {
-        newState.trustStatus = "received";
-      }
-    }
-    if (
-      viewer.subscriptions.filter((entry) => {
-        return entry.target_user_id === this.props.data.id;
-      }).length
-    ) {
-      newState.followStatus = true;
-    }
-    this.setState(newState);
-  };
-
-  _handleUpdate = async (e) => {
-    let response = await this.props.onRehydrate();
-    if (!response || response.error) {
-      alert("TODO: error fetching authenticated viewer");
-      return null;
-    }
-
-    let viewer = response.data;
-
-    this.setStatus(viewer);
-  };
-
-  _handleTrust = async () => {
-    let response;
-    if (
-      this.state.trustStatus === "untrusted" ||
-      this.state.trustStatus === "sent"
-    ) {
-      response = await Actions.createTrustRelationship({
-        userId: this.props.data.id,
-      });
-      console.log(response);
-    } else if (this.state.trustStatus === "received") {
-      response = await Actions.updateTrustRelationship({
-        userId: this.props.data.id,
-      });
-      console.log(response);
-    } else {
-      response = await Actions.deleteTrustRelationship({
-        id: this.state.trustId,
-      });
-      console.log(response);
-    }
-    await this._handleUpdate();
-  };
-
-  _handleFollow = async () => {
-    let response = await Actions.createSubscription({
-      userId: this.props.data.id,
-    });
-    console.log(response);
-    await this._handleUpdate();
-  };
-
-  render() {
-    let buttons = (
-      <div>
-        <ButtonPrimary
-          style={
-            this.state.followStatus
-              ? BUTTON_SECONDARY_STYLE
-              : BUTTON_PRIMARY_STYLE
-          }
-          onClick={this._handleFollow}
-        >
-          {this.state.followStatus ? "Unfollow" : "Follow"}
-        </ButtonPrimary>
-        <ButtonPrimary
-          style={
-            this.state.trustStatus === "untrusted" ||
-            this.state.trustStatus === "received"
-              ? BUTTON_PRIMARY_STYLE
-              : BUTTON_SECONDARY_STYLE
-          }
-          onClick={this._handleTrust}
-        >
-          {STATUS_BUTTON_MAP[this.state.trustStatus]}
-        </ButtonPrimary>
-        {this.state.isTrusted ? (
-          <ButtonPrimary style={BUTTON_STYLE} onClick={this._handleSendMoney}>
-            Send Money
-          </ButtonPrimary>
-        ) : null}
-      </div>
-    );
-    return (
-      <ScenePage style={{ padding: `88px 24px 128px 24px` }}>
-        <Profile
-          onAction={this.props.onAction}
-          creator={this.props.data}
-          sceneId={this.props.sceneId}
-          buttons={
-            this.props.viewer.username === this.props.data.username
-              ? null
-              : buttons
-          }
-        />
-      </ScenePage>
-    );
-  }
-}
--- a/scenes/SceneSlate.js
+++ b/scenes/SceneSlate.js
@ -12,14 +12,6 @@ import Slate, { generateLayout } from "~/components/core/Slate";
 import SlateMediaObject from "~/components/core/SlateMediaObject";
 import CircleButtonGray from "~/components/core/CircleButtonGray";

-const STYLES_USERNAME = css`
-  cursor: pointer;
-
-  :hover {
-    color: ${Constants.system.brand};
-  }
-`;
-
 const moveIndex = (set, fromIndex, toIndex) => {
  const element = set[fromIndex];
  set.splice(fromIndex, 1);
@ -30,17 +22,15 @@ const moveIndex = (set, fromIndex, toIndex) => {

 export default class SceneSlate extends React.Component {
  state = {
-    name: this.props.data.data.name,
-    username: this.props.data.owner ? this.props.data.owner.username : null,
-    slatename: this.props.data.slatename,
-    public: this.props.data.data.public,
-    objects: this.props.data.data.objects,
-    body: this.props.data.data.body,
-    layouts: this.props.data.data.layouts
-      ? this.props.data.data.layouts
-      : { lg: generateLayout(this.props.data.data.objects) },
+    name: this.props.current.data.name,
+    slatename: this.props.current.slatename,
+    public: this.props.current.data.public,
+    objects: this.props.current.data.objects,
+    body: this.props.current.data.body,
+    layouts: this.props.current.data.layouts
+      ? this.props.current.data.layouts
+      : { lg: generateLayout(this.props.current.data.objects) },
    loading: false,
-    editing: this.props.data.data.ownerId === this.props.viewer.id,
  };

  componentDidMount() {
@ -49,41 +39,38 @@ export default class SceneSlate extends React.Component {

  componentDidUpdate(prevProps) {
    const isNewSlateScene =
-      prevProps.data.slatename !== this.props.data.slatename;
+      prevProps.current.slatename !== this.props.current.slatename;

    let isUpdated = false;
    if (
-      this.props.data.data.objects.length !== prevProps.data.data.objects.length
+      this.props.current.data.objects.length !==
+      prevProps.current.data.objects.length
    ) {
      isUpdated = true;
    }

-    if (this.props.data.data.body !== prevProps.data.data.body) {
+    if (this.props.current.data.body !== prevProps.current.data.body) {
      isUpdated = true;
    }

    if (isNewSlateScene || isUpdated) {
-      let layouts = this.props.data.data.layouts;
+      let layouts = this.props.current.data.layouts;
      if (!layouts) {
-        layouts = { lg: generateLayout(this.props.data.data.objects) };
+        layouts = { lg: generateLayout(this.props.current.data.objects) };
      }

      this.setState({
-        username: this.props.data.owner ? this.props.data.owner.username : null,
-        slatename: this.props.data.slatename,
-        public: this.props.data.data.public,
-        objects: this.props.data.data.objects,
-        body: this.props.data.data.body,
-        name: this.props.data.data.name,
+        slatename: this.props.current.slatename,
+        public: this.props.current.data.public,
+        objects: this.props.current.data.objects,
+        body: this.props.current.data.body,
+        name: this.props.current.data.name,
        layouts: layouts,
        loading: false,
-        editing: this.props.viewer.slates
-          .map((slate) => slate.id)
-          .includes(this.props.data.slateId),
      });

      this._handleUpdateCarousel({
-        objects: this.props.data.data.objects,
+        objects: this.props.current.data.objects,
      });
    }
  }
@ -106,7 +93,7 @@ export default class SceneSlate extends React.Component {
    this.setState({ loading: true });

    const response = await Actions.updateSlate({
-      id: this.props.data.id,
+      id: this.props.current.slateId,
      data: {
        objects: objects ? objects : this.state.objects,
        layouts: layouts ? layouts : this.state.layouts,
@ -177,7 +164,6 @@ export default class SceneSlate extends React.Component {
            id: data.id,
            cid,
            data,
-            editing: this.state.editing,
            component: (
              <SlateMediaObject key={each.id} useImageFallback data={data} />
            ),
@ -213,7 +199,7 @@ export default class SceneSlate extends React.Component {
    }

    const response = await Actions.updateSlate({
-      id: this.props.data.slateId,
+      id: this.props.current.slateId,
      data: {
        objects,
        layouts,
@ -259,7 +245,7 @@ export default class SceneSlate extends React.Component {
    return this.props.onAction({
      type: "SIDEBAR",
      value: "SIDEBAR_ADD_FILE_TO_BUCKET",
-      data: this.props.data,
+      data: this.props.current,
    });
  };

@ -267,70 +253,41 @@ export default class SceneSlate extends React.Component {
    return this.props.onAction({
      type: "SIDEBAR",
      value: "SIDEBAR_SINGLE_SLATE_SETTINGS",
-      data: this.props.data,
+      data: this.props.current,
    });
  };

  render() {
-    const {
-      username,
-      slatename,
-      objects,
-      body = "A slate.",
-      name,
-    } = this.state;
+    const { slatename, objects, body = "A slate.", name } = this.state;

    return (
      <ScenePage style={{ padding: `88px 24px 128px 24px` }}>
        <ScenePageHeader
          style={{ padding: `0 24px 0 24px` }}
-          title={
-            username ? (
-              <span>
-                <span
-                  onClick={() =>
-                    this.props.onAction({
-                      type: "NAVIGATE",
-                      value: this.props.sceneId,
-                      scene: "PROFILE",
-                      data: this.props.data.owner,
-                    })
-                  }
-                  css={STYLES_USERNAME}
-                >
-                  {username}
-                </span>{" "}
-                / {slatename}
-              </span>
-            ) : (
-              slatename
-            )
-          }
+          title={name}
          actions={
-            this.state.editing ? (
-              <React.Fragment>
-                <CircleButtonGray
-                  onMouseUp={this._handleAdd}
-                  onTouchEnd={this._handleAdd}
-                  style={{ marginLeft: 12, marginRight: 12 }}
-                >
-                  <SVG.Plus height="16px" />
-                </CircleButtonGray>
-                <CircleButtonGray
-                  onMouseUp={this._handleShowSettings}
-                  onTouchEnd={this._handleShowSettings}
-                >
-                  <SVG.Settings height="16px" />
-                </CircleButtonGray>
-              </React.Fragment>
-            ) : null
+            <React.Fragment>
+              <CircleButtonGray
+                onMouseUp={this._handleAdd}
+                onTouchEnd={this._handleAdd}
+                style={{ marginLeft: 12, marginRight: 12 }}
+              >
+                <SVG.Plus height="16px" />
+              </CircleButtonGray>
+              <CircleButtonGray
+                onMouseUp={this._handleShowSettings}
+                onTouchEnd={this._handleShowSettings}
+              >
+                <SVG.Settings height="16px" />
+              </CircleButtonGray>
+            </React.Fragment>
          }
        >
          {body}
        </ScenePageHeader>
        <Slate
          key={slatename}
-          editing={this.state.editing}
+          editing
          items={objects}
          layouts={this.state.layouts}
          onLayoutChange={this._handleChangeLayout}
--- a/scenes/SceneSlates.js
+++ b/scenes/SceneSlates.js
@ -7,98 +7,72 @@ import { css } from "@emotion/react";
 import ScenePage from "~/components/core/ScenePage";
 import ScenePageHeader from "~/components/core/ScenePageHeader";
 import Section from "~/components/core/Section";
-import SlatePreviewBlock from "~/components/core/SlatePreviewBlock";

 const STYLES_NUMBER = css`
  font-family: ${Constants.font.semiBold};
  font-weight: 400;
 `;

-const STYLES_ACTIONS = css`
-  z-index: ${Constants.zindex.navigation};
-  bottom: 16px;
-  right: 8px;
-  position: absolute;
-  flex-direction: column;
-  display: flex;
-`;
-
-const STYLES_ACTION_BUTTON = css`
-  font-family: ${Constants.font.code};
-  font-size: 10px;
-  text-transform: uppercase;
-  user-select: none;
-  height: 32px;
-  padding: 0 16px 0 16px;
-  border-radius: 32px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  z-index: ${Constants.zindex.modal};
-  background: ${Constants.system.pitchBlack};
-  transition: 200ms ease all;
-  color: ${Constants.system.white};
-  cursor: pointer;
-  margin: auto;
-  margin: 4px 16px 4px 16px;
-  flex-shrink: 0;
-  text-decoration: none;
-  :hover {
-    background-color: ${Constants.system.black};
-  }
-`;
-
 // TODO(jim): Slates design.
 export default class SceneSlates extends React.Component {
  render() {
    // TODO(jim): Refactor later.
-    const slates = this.props.viewer.slates.map((each) => {
-      return {
-        ...each,
-        url: `https://slate.host/${this.props.viewer.username}/${each.slatename}`,
-        public: each.data.public,
-        objects: <span css={STYLES_NUMBER}>{each.data.objects.length}</span>,
-      };
-    });
+    const slates = {
+      columns: [
+        {
+          key: "name",
+          name: "Slate Name",
+          width: "100%",
+          type: "SLATE_LINK",
+        },
+        { key: "url", name: "URL", width: "268px", type: "NEW_WINDOW" },
+        { key: "id", id: "id", name: "Slate ID", width: "296px" },
+        {
+          key: "objects",
+          name: "Objects",
+        },
+        {
+          key: "public",
+          name: "Public",
+          type: "SLATE_PUBLIC_TEXT_TAG",
+          width: "188px",
+        },
+      ],
+      rows: this.props.viewer.slates.map((each) => {
+        return {
+          ...each,
+          name: each.data.name,
+          url: `https://slate.host/${this.props.viewer.username}/${
+            each.slatename
+          }`,
+          public: each.data.public,
+          objects: <span css={STYLES_NUMBER}>{each.data.objects.length}</span>,
+        };
+      }),
+    };

    // TODO(jim): Refactor later.
    const slateButtons = [
      { name: "Create slate", type: "SIDEBAR", value: "SIDEBAR_CREATE_SLATE" },
    ];
-    console.log(this.props);
+
    return (
      <ScenePage>
-        <ScenePageHeader title="Slates">
+        <ScenePageHeader title="Slates [WIP]">
          This scene is currently a work in progress.
        </ScenePageHeader>
-        {this.props.data.children.map((slate) => (
-          <div
-            key={slate.id}
-            onClick={() =>
-              this.props.onAction({
-                type: "NAVIGATE",
-                value: slate.id,
-                data: slate,
-              })
-            }
-          >
-            <SlatePreviewBlock slate={slate} />
-          </div>
-        ))}
-        <div css={STYLES_ACTIONS}>
-          <span
-            css={STYLES_ACTION_BUTTON}
-            onClick={() =>
-              this.props.onAction({
-                name: "Create slate",
-                type: "SIDEBAR",
-                value: "SIDEBAR_CREATE_SLATE",
-              })
-            }
-          >
-            Create slate
-          </span>
-        </div>
+        <Section
+          title="Slates"
+          buttons={slateButtons}
+          onAction={this.props.onAction}
+        >
+          <System.Table
+            data={slates}
+            name="slate"
+            onAction={this.props.onAction}
+            onNavigateTo={this.props.onNavigateTo}
+          />
+        </Section>
      </ScenePage>
    );
  }