From d91de5f2769060e81bd46c696f373064a9bf9033 Mon Sep 17 00:00:00 2001
From: Liam Fitzgerald <liam@urizen.co>
Date: Sat, 1 Aug 2020 11:11:13 +1000
Subject: [PATCH 01/58] lib-hooks: document with comments

---
 pkg/arvo/lib/pull-hook.hoon | 38 ++++++++++++++++++++++--
 pkg/arvo/lib/push-hook.hoon | 58 +++++++++++++++++++++++++++++++++++--
 2 files changed, 92 insertions(+), 4 deletions(-)

diff --git a/pkg/arvo/lib/pull-hook.hoon b/pkg/arvo/lib/pull-hook.hoon
index 6fdbf1007c..19f861f809 100644
--- a/pkg/arvo/lib/pull-hook.hoon
+++ b/pkg/arvo/lib/pull-hook.hoon
@@ -1,3 +1,24 @@
+::  lib/pull-hook/hoon: helper for creating a push hook
+::  
+::   lib/pull-hook is a helper for automatically pulling data from a
+::   corresponding push-hook to a store. 
+::   
+::   ## Interfacing notes:
+::
+::   lib/push-hook provides the inner door with its own separate state.
+::   The inner door may interact with the library by producing cards or
+::   scrying. Do not pass any cards on a wire beginning with /helper as
+::   these wires are reserved by this library. Any watches/pokes/peeks
+::   not listed below will be routed to the inner door.
+::
+::   ##  Subscription paths
+::
+::   /tracking: The set of resources we are pulling
+::
+::   ##  Pokes
+::
+::   %pull-hook-action: Add/remove a resource from pulling.
+::
 /-  *pull-hook
 /+  default-agent, resource
 ::
@@ -5,13 +26,24 @@
 |%
 +$  card   card:agent:gall
 ::
+::  $config: configuration for the pull hook
+::
+::    .store-name: name of the store to proxy subscriptions to.
+::    .update-mark: mark that updates will be tagged with
+::    .push-hook-name: name of the corresponding push-hook
+
 +$  config
   $:  store-name=term
       update=mold
       update-mark=term
       push-hook-name=term
   ==
+::  
+::  $state-0: state for the pull hook
 ::
+::    .tracking: a map of resources we are pulling, and the ships that
+::    we are pulling them from.
+::    .inner-state: state given to internal door
 +$  state-0
   $:  %0
     tracking=(map resource ship)
@@ -37,7 +69,7 @@
   |*  config
   $_  ^|
   |_  bowl:gall
-  ::
+  ::  from agent:gall
   ++  on-init
     *[(list card) _^|(..on-init)]
   ::
@@ -77,7 +109,9 @@
     *[(list card) _^|(..on-init)]
   ::  +on-pull-nack: handle failed pull subscription
   ::
-  ::    This arm is called when a pull subscription fails.
+  ::    This arm is called when a pull subscription fails. lib/pull-hook
+  ::    will automatically delete the resource from .tracking by the
+  ::    time this arm is called.
   ::
   ++  on-pull-nack
     |~  [resource tang]
diff --git a/pkg/arvo/lib/push-hook.hoon b/pkg/arvo/lib/push-hook.hoon
index 776aa0f597..e922283534 100644
--- a/pkg/arvo/lib/push-hook.hoon
+++ b/pkg/arvo/lib/push-hook.hoon
@@ -1,8 +1,42 @@
+::  lib/push-hook/hoon: helper for creating a push hook
+::  
+::   lib/push-hook is a helper for automatically pushing data from a
+::   local store to the corresponding pull-hook on remote ships. It also
+::   proxies remote pokes to the store.
+::
+::   ## Interfacing notes:
+::
+::   lib/push-hook provides the inner door with its own separate state.
+::   The inner door may interact with the library by producing cards or
+::   scrying. Do not pass any cards on a wire beginning with /helper as
+::   these wires are reserved by this library. Any watches/pokes/peeks
+::   not listed below will be routed to the inner door.
+::
+::   ##  Subscription paths
+::
+::   /resource/[resource]: Receive initial state and updates to
+::   .resource. .resource should be encoded with de-path:resource from
+::   /lib/resource. Facts on this path will be of mark
+::   update-mark.config
+::
+::   ##  Pokes
+::
+::   %push-hook-action: Add/remove a resource from pushing.
+::   [update-mark.config]: A poke to proxy to the local store
+::
 /-  *push-hook
 /+  default-agent, resource
 |%
 +$  card  card:agent:gall
 ::
+::  $config: configuration for the push hook
+::  
+::    .store-name: name of the store to proxy pokes and
+::    subscriptions to
+::    .store-path: subscription path to receive updates on
+::    .update-mark: mark that updates will be tagged with
+::    .pull-hook-name: name of the corresponding pull-hook
+::
 +$  config
   $:  store-name=term
       store-path=path
@@ -10,6 +44,12 @@
       update-mark=term
       pull-hook-name=term
   ==
+::
+::  $state-0: state for the push hook
+::
+::    .sharing: resources that the push hook is proxying
+::    .inner-state: state given to internal door
+::
 +$  state-0
   $:  %0
     sharing=(set resource)
@@ -20,6 +60,7 @@
   |*  =config
   $_  ^|
   |_  bowl:gall
+  ::  from agent:gall
   ::
   ++  on-init
     *[(list card) _^|(..on-init)]
@@ -58,14 +99,21 @@
   ++  on-fail
     |~  [term tang]
     *[(list card) _^|(..on-init)]
+  ::
   ::  +resource-for-update: get affected resource from an update
+  ::  
+  ::    Given a vase of the update, the mark of which is
+  ::    update-mark.config, produce the affected resource, if any.
+  ::
   ++  resource-for-update
     |~  vase
     *(unit resource)
   ::
   ::  +on-update: handle update from store
   ::
-  ::    Do extra stuff on store update
+  ::    Given an update from the store, do other things after proxying
+  ::    the update
+  ::
   ++  take-update
     |~  vase
     *[(list card) _^|(..on-init)]
@@ -81,7 +129,13 @@
   ::  +initial-watch: produce initial state for a subscription
   ::
   ::    .resource is the resource being subscribed to.
-  ::    .path is any additional information in the subscription wire
+  ::    .path is any additional information in the subscription wire.
+  ::    This would typically be used to encode state that the subscriber
+  ::    already has. For example, a chat client might encode
+  ::    the number of messages that it already has, or the date it last
+  ::    received an update.
+  ::
+  ::    If +initial-watch crashes, the subscription fails.
   ::
   ++  initial-watch
     |~  [path resource]

From 531d53ddfc2b52512544f5206af47f8d28441a91 Mon Sep 17 00:00:00 2001
From: Liam Fitzgerald <liam@urizen.co>
Date: Wed, 5 Aug 2020 13:55:12 +1000
Subject: [PATCH 02/58] lib-hooks: address mark review

---
 pkg/arvo/lib/pull-hook.hoon | 57 ++++++++++++------------
 pkg/arvo/lib/push-hook.hoon | 88 ++++++++++++++++++-------------------
 2 files changed, 73 insertions(+), 72 deletions(-)

diff --git a/pkg/arvo/lib/pull-hook.hoon b/pkg/arvo/lib/pull-hook.hoon
index 19f861f809..5afd0275d7 100644
--- a/pkg/arvo/lib/pull-hook.hoon
+++ b/pkg/arvo/lib/pull-hook.hoon
@@ -1,11 +1,10 @@
-::  lib/pull-hook/hoon: helper for creating a push hook
+::  lib/pull-hook: helper for creating a push hook
 ::  
 ::   lib/pull-hook is a helper for automatically pulling data from a
 ::   corresponding push-hook to a store. 
 ::   
 ::   ## Interfacing notes:
 ::
-::   lib/push-hook provides the inner door with its own separate state.
 ::   The inner door may interact with the library by producing cards or
 ::   scrying. Do not pass any cards on a wire beginning with /helper as
 ::   these wires are reserved by this library. Any watches/pokes/peeks
@@ -28,10 +27,10 @@
 ::
 ::  $config: configuration for the pull hook
 ::
-::    .store-name: name of the store to proxy subscriptions to.
+::    .store-name: name of the store to send subscription updates to.
 ::    .update-mark: mark that updates will be tagged with
 ::    .push-hook-name: name of the corresponding push-hook
-
+::
 +$  config
   $:  store-name=term
       update=mold
@@ -44,6 +43,7 @@
 ::    .tracking: a map of resources we are pulling, and the ships that
 ::    we are pulling them from.
 ::    .inner-state: state given to internal door
+::
 +$  state-0
   $:  %0
     tracking=(map resource ship)
@@ -69,6 +69,28 @@
   |*  config
   $_  ^|
   |_  bowl:gall
+  ::  +on-pull-nack: handle failed pull subscription
+  ::
+  ::    This arm is called when a pull subscription fails. lib/pull-hook
+  ::    will automatically delete the resource from .tracking by the
+  ::    time this arm is called.
+  ::
+  ++  on-pull-nack
+    |~  [resource tang]
+    *[(list card) _^|(..on-init)]
+  ::  +on-pull-kick: produce any additional resubscribe path
+  ::
+  ::    If non-null, the produced path is appended to the original
+  ::    subscription path. This should be used to encode extra
+  ::    information onto the path in order to reduce the payload of a
+  ::    kick and resubscribe.
+  ::
+  ::    If null, a resubscribe is not attempted
+  ::
+  ++  on-pull-kick
+    |~  resource
+    *(unit path)
+  ::
   ::  from agent:gall
   ++  on-init
     *[(list card) _^|(..on-init)]
@@ -107,28 +129,6 @@
   ++  on-fail
     |~  [term tang]
     *[(list card) _^|(..on-init)]
-  ::  +on-pull-nack: handle failed pull subscription
-  ::
-  ::    This arm is called when a pull subscription fails. lib/pull-hook
-  ::    will automatically delete the resource from .tracking by the
-  ::    time this arm is called.
-  ::
-  ++  on-pull-nack
-    |~  [resource tang]
-    *[(list card) _^|(..on-init)]
-  ::  +on-pull-kick: produce any additional resubscribe path
-  ::
-  ::    If non-null, the produced path is appended to the original
-  ::    subscription path. This should be used to encode extra
-  ::    information onto the path in order to reduce the payload of a
-  ::    kick and resubscribe.
-  ::
-  ::    If null, a resubscribe is not attempted
-  ::
-  ++  on-pull-kick
-    |~  resource
-    *(unit path)
-  ::  ::
   --
 ++  agent
   |*  =config
@@ -243,7 +243,10 @@
         =^  cards  pull-hook
           (on-fail:og term tang)
         [cards this]
-      ++  on-peek   on-peek:def
+      ++  on-peek   
+        |=  =path
+        ^-  (unit (unit cage))
+        (on-peek:og path)
     --
   |_  =bowl:gall
   +*  og   ~(. pull-hook bowl)
diff --git a/pkg/arvo/lib/push-hook.hoon b/pkg/arvo/lib/push-hook.hoon
index e922283534..1ddc07a76a 100644
--- a/pkg/arvo/lib/push-hook.hoon
+++ b/pkg/arvo/lib/push-hook.hoon
@@ -1,4 +1,4 @@
-::  lib/push-hook/hoon: helper for creating a push hook
+::  lib/push-hook: helper for creating a push hook
 ::  
 ::   lib/push-hook is a helper for automatically pushing data from a
 ::   local store to the corresponding pull-hook on remote ships. It also
@@ -6,7 +6,6 @@
 ::
 ::   ## Interfacing notes:
 ::
-::   lib/push-hook provides the inner door with its own separate state.
 ::   The inner door may interact with the library by producing cards or
 ::   scrying. Do not pass any cards on a wire beginning with /helper as
 ::   these wires are reserved by this library. Any watches/pokes/peeks
@@ -15,7 +14,7 @@
 ::   ##  Subscription paths
 ::
 ::   /resource/[resource]: Receive initial state and updates to
-::   .resource. .resource should be encoded with de-path:resource from
+::   .resource. .resource should be encoded with en-path:resource from
 ::   /lib/resource. Facts on this path will be of mark
 ::   update-mark.config
 ::
@@ -60,6 +59,47 @@
   |*  =config
   $_  ^|
   |_  bowl:gall
+  ::
+  ::  +resource-for-update: get affected resource from an update
+  ::  
+  ::    Given a vase of the update, the mark of which is
+  ::    update-mark.config, produce the affected resource, if any.
+  ::
+  ++  resource-for-update
+    |~  vase
+    *(unit resource)
+  ::
+  ::  +take-update: handle update from store
+  ::
+  ::    Given an update from the store, do other things after proxying
+  ::    the update
+  ::
+  ++  take-update
+    |~  vase
+    *[(list card) _^|(..on-init)]
+  ::  +should-proxy-update: should forward update to store
+  ::
+  ::    If %.y is produced, then the update is forwarded to the local
+  ::    store. If %.n is produced then the update is not forwarded and
+  ::    the poke fails.
+  ::
+  ++  should-proxy-update
+    |~  vase
+    *?
+  ::  +initial-watch: produce initial state for a subscription
+  ::
+  ::    .resource is the resource being subscribed to.
+  ::    .path is any additional information in the subscription wire.
+  ::    This would typically be used to encode state that the subscriber
+  ::    already has. For example, a chat client might encode
+  ::    the number of messages that it already has, or the date it last
+  ::    received an update.
+  ::
+  ::    If +initial-watch crashes, the subscription fails.
+  ::
+  ++  initial-watch
+    |~  [path resource]
+    *vase
   ::  from agent:gall
   ::
   ++  on-init
@@ -99,48 +139,6 @@
   ++  on-fail
     |~  [term tang]
     *[(list card) _^|(..on-init)]
-  ::
-  ::  +resource-for-update: get affected resource from an update
-  ::  
-  ::    Given a vase of the update, the mark of which is
-  ::    update-mark.config, produce the affected resource, if any.
-  ::
-  ++  resource-for-update
-    |~  vase
-    *(unit resource)
-  ::
-  ::  +on-update: handle update from store
-  ::
-  ::    Given an update from the store, do other things after proxying
-  ::    the update
-  ::
-  ++  take-update
-    |~  vase
-    *[(list card) _^|(..on-init)]
-  ::  +should-proxy-update: should forward update to store
-  ::
-  ::    If %.y is produced, then the update is forwarded to the local
-  ::    store. If %.n is produced then the update is not forwarded and
-  ::    the poke fails.
-  ::
-  ++  should-proxy-update
-    |~  vase
-    *?
-  ::  +initial-watch: produce initial state for a subscription
-  ::
-  ::    .resource is the resource being subscribed to.
-  ::    .path is any additional information in the subscription wire.
-  ::    This would typically be used to encode state that the subscriber
-  ::    already has. For example, a chat client might encode
-  ::    the number of messages that it already has, or the date it last
-  ::    received an update.
-  ::
-  ::    If +initial-watch crashes, the subscription fails.
-  ::
-  ++  initial-watch
-    |~  [path resource]
-    *vase
-  ::
   --
 ++  agent
   |*  =config

From f1fd99a8987e021e8e1a491de2793d8d6c61d0e0 Mon Sep 17 00:00:00 2001
From: Matilde Park <matilde.park@sunshinegardens.org>
Date: Wed, 5 Aug 2020 12:27:48 -0400
Subject: [PATCH 03/58] links: fix direct loading of link entry

If you go directly to a link's page, it will never load, because we
don't look for 'link-update' in our data, post-global store. This checks
properly.
---
 pkg/interface/src/api/links.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/pkg/interface/src/api/links.ts b/pkg/interface/src/api/links.ts
index de4af1e904..c6ce04e9e6 100644
--- a/pkg/interface/src/api/links.ts
+++ b/pkg/interface/src/api/links.ts
@@ -44,8 +44,8 @@ export default class LinksApi extends BaseApi<StoreState> {
     this.fetchLink(
       endpoint,
       (res) => {
-        if (res.data.submission) {
-          callback(res.data.submission);
+        if (res.data?.['link-update']?.submission) {
+          callback(res.data?.['link-update']?.submission);
         } else {
           console.error('unexpected submission response', res);
         }

From d2579b16583d338ee8685681559f9f818b8ddd2b Mon Sep 17 00:00:00 2001
From: Matilde Park <matilde.park@sunshinegardens.org>
Date: Fri, 14 Aug 2020 16:25:08 -0400
Subject: [PATCH 04/58] links: remove members page

---
 pkg/interface/src/views/apps/links/app.js     | 51 +-----------
 .../links/components/lib/invite-element.js    | 78 -------------------
 .../apps/links/components/lib/links-tabbar.js | 20 +----
 .../src/views/apps/links/components/member.js | 70 -----------------
 4 files changed, 3 insertions(+), 216 deletions(-)
 delete mode 100644 pkg/interface/src/views/apps/links/components/lib/invite-element.js
 delete mode 100644 pkg/interface/src/views/apps/links/components/member.js

diff --git a/pkg/interface/src/views/apps/links/app.js b/pkg/interface/src/views/apps/links/app.js
index baa7629d8a..e184aa7c0b 100644
--- a/pkg/interface/src/views/apps/links/app.js
+++ b/pkg/interface/src/views/apps/links/app.js
@@ -7,7 +7,6 @@ import './css/custom.css';
 
 import { Skeleton } from './components/skeleton';
 import { NewScreen } from './components/new';
-import { MemberScreen } from './components/member';
 import { SettingsScreen } from './components/settings';
 import { MessageScreen } from './components/lib/message-screen';
 import { Links } from './components/links-list';
@@ -18,7 +17,6 @@ import {
   base64urlDecode
 } from '../../../logic/lib/util';
 
-
 export class LinksApp extends Component {
   constructor(props) {
     super(props);
@@ -41,7 +39,6 @@ export class LinksApp extends Component {
     this.props.subscription.stopApp('link');
   }
 
-
   render() {
     const { props } = this;
 
@@ -69,7 +66,6 @@ export class LinksApp extends Component {
     const invites = props.invites ?
       props.invites : {};
 
-
     const listening = props.linkListening;
 
     const { api, sidebarShown } = this.props;
@@ -133,46 +129,6 @@ export class LinksApp extends Component {
             autoJoin();
           }}
         />
-        <Route exact path="/~link/(popout)?/:resource/members"
-          render={(props) => {
-            const popout = props.match.url.includes('/popout/');
-            const resourcePath = '/' + props.match.params.resource;
-            const resource = associations.link[resourcePath] || { metadata: {} };
-
-            const contactDetails = contacts[resource['group-path']] || {};
-            const group = groups[resource['group-path']] || new Set([]);
-            const amOwner = amOwnerOfGroup(resource['group-path']);
-
-            return (
-              <Skeleton
-                associations={associations}
-                invites={invites}
-                groups={groups}
-                selected={resourcePath}
-                sidebarShown={sidebarShown}
-                links={links}
-                listening={listening}
-                api={api}
-              >
-                <MemberScreen
-                  sidebarShown={sidebarShown}
-                  resource={resource}
-                  contacts={contacts}
-                  contactDetails={contactDetails}
-                  groupPath={resource['group-path']}
-                  group={group}
-                  groups={groups}
-                  associations={associations}
-                  amOwner={amOwner}
-                  resourcePath={resourcePath}
-                  popout={popout}
-                  api={api}
-                  {...props}
-                />
-              </Skeleton>
-            );
-          }}
-        />
         <Route exact path="/~link/(popout)?/:resource/settings"
           render={ (props) => {
             const popout = props.match.url.includes('/popout/');
@@ -283,11 +239,8 @@ export class LinksApp extends Component {
               const page = props.match.params.page || 0;
               const url = base64urlDecode(props.match.params.encodedUrl);
 
-              const data = links[resourcePath]
-                ? links[resourcePath][page]
-                  ? links[resourcePath][page][index]
-                  : {}
-                : {};
+              const data = links?.[resourcePath]?.[page]?.[index] || {};
+
               const coms = !comments[resourcePath]
                 ? undefined
                 : comments[resourcePath][url];
diff --git a/pkg/interface/src/views/apps/links/components/lib/invite-element.js b/pkg/interface/src/views/apps/links/components/lib/invite-element.js
deleted file mode 100644
index 94da5d5752..0000000000
--- a/pkg/interface/src/views/apps/links/components/lib/invite-element.js
+++ /dev/null
@@ -1,78 +0,0 @@
-import React, { Component } from 'react';
-import { InviteSearch } from '../../../../components/InviteSearch';
-import { Spinner } from '../../../../components/Spinner';
-
-export class InviteElement extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      members: [],
-      error: false,
-      success: false,
-      awaiting: false
-    };
-    this.setInvite = this.setInvite.bind(this);
-  }
-
-  modifyMembers() {
-    const { props, state } = this;
-
-    const aud = state.members.map(mem => `~${mem}`);
-
-    if (state.members.length === 0) {
-      this.setState({
-        error: true,
-        success: false
-      });
-      return;
-    }
-
-    this.setState({ awaiting: true });
-
-    this.setState({
-      error: false,
-      success: true,
-      members: []
-    }, () => {
-      props.api.links.inviteToCollection(props.resourcePath, aud).then(() => {
-        this.setState({ awaiting: false });
-      });
-    });
-  }
-
-  setInvite(invite) {
-    this.setState({ members: invite.ships });
-  }
-
-  render() {
-    const { props, state } = this;
-
-    let modifyButtonClasses = 'mt4 db f9 ba pa2 white-d bg-gray0-d b--black b--gray2-d pointer';
-    if (state.error) {
-      modifyButtonClasses = modifyButtonClasses + ' gray3';
-    }
-
-    return (
-      <div>
-        <InviteSearch
-          groups={{}}
-          contacts={props.contacts}
-          groupResults={false}
-          shipResults={true}
-          invites={{
-            groups: [],
-            ships: this.state.members
-          }}
-          setInvite={this.setInvite}
-        />
-        <button
-          onClick={this.modifyMembers.bind(this)}
-          className={modifyButtonClasses}
-        >
-          Invite
-        </button>
-        <Spinner awaiting={this.state.awaiting} text="Inviting to collection..." classes="mt3" />
-      </div>
-    );
-  }
-}
diff --git a/pkg/interface/src/views/apps/links/components/lib/links-tabbar.js b/pkg/interface/src/views/apps/links/components/lib/links-tabbar.js
index 31ed9833c8..9c46ffc919 100644
--- a/pkg/interface/src/views/apps/links/components/lib/links-tabbar.js
+++ b/pkg/interface/src/views/apps/links/components/lib/links-tabbar.js
@@ -6,17 +6,11 @@ export class LinksTabBar extends Component {
   render() {
     const props = this.props;
 
-    let memColor = '',
-        setColor = '';
+    let setColor = '';
 
     if (props.location.pathname.includes('/settings')) {
-      memColor = 'gray3';
       setColor = 'black white-d';
-    } else if (props.location.pathname.includes('/members')) {
-      memColor = 'black white-d';
-      setColor = 'gray3';
     } else {
-      memColor = 'gray3';
       setColor = 'gray3';
     }
 
@@ -26,18 +20,6 @@ export class LinksTabBar extends Component {
 
     return (
       <div className="dib flex-shrink-0 flex-grow-1">
-        {props.amOwner ? (
-          <div className={'dib pt2 f9 pl6 lh-solid'}>
-            <Link
-              className={'no-underline ' + memColor}
-              to={makeRoutePath(props.resourcePath, props.popout) + '/members'}
-            >
-              Members
-            </Link>
-          </div>
-        ) : (
-          <div className="dib" style={{ width: 0 }}></div>
-        )}
         <div className={'dib pt2 f9 pl6 pr6 lh-solid'}>
           <Link
             className={'no-underline ' + setColor}
diff --git a/pkg/interface/src/views/apps/links/components/member.js b/pkg/interface/src/views/apps/links/components/member.js
deleted file mode 100644
index 74966fe71e..0000000000
--- a/pkg/interface/src/views/apps/links/components/member.js
+++ /dev/null
@@ -1,70 +0,0 @@
-import React, { Component } from 'react';
-
-import { Link } from 'react-router-dom';
-
-import { LoadingScreen } from './loading';
-import { LinksTabBar } from './lib/links-tabbar';
-import { MemberElement } from './lib/member-element';
-import { SidebarSwitcher } from '../../../components/SidebarSwitch';
-import { makeRoutePath } from '../../../../logic/lib/util';
-import { GroupView } from '../../../components/Group';
-
-export class MemberScreen extends Component {
-  render() {
-    const { props } = this;
-
-    if (!props.groupPath) {
-      return <LoadingScreen />;
-    }
-
-    return (
-      <div className='h-100 w-100 overflow-x-hidden flex flex-column white-d'>
-        <div
-          className='w-100 dn-m dn-l dn-xl inter pt4 pb6 pl3 f8'
-          style={{ height: '1rem' }}
-        >
-          <Link to='/~link'>{'⟵ All Collections'}</Link>
-        </div>
-        <div
-          className={`pl4 pt2 bb b--gray4 b--gray1-d bg-gray0-d flex relative
-          overflow-x-scroll overflow-x-auto-l overflow-x-auto-xl flex-shrink-0`}
-          style={{ height: 48 }}
-        >
-          <SidebarSwitcher
-            sidebarShown={this.props.sidebarShown}
-            popout={this.props.popout}
-            api={this.props.api}
-          />
-          <Link
-            to={makeRoutePath(props.resourcePath, props.popout)}
-            className='pt2 white-d'
-          >
-            <h2
-              className='dib f9 fw4 lh-solid v-top'
-              style={{ width: 'max-content' }}
-            >
-              {props.resource.metadata.title}
-            </h2>
-          </Link>
-          <LinksTabBar
-            {...props}
-            groupPath={props.groupPath}
-            resourcePath={props.resourcePath}
-            amOwner={props.amOwner}
-            popout={props.popout}
-          />
-        </div>
-        <div className='w-100 pl3 mt0 mt4-m mt4-l mt4-xl cf pr6'>
-          <GroupView
-            group={props.group}
-            permissions
-            resourcePath={props.groupPath}
-            contacts={props.contacts}
-            groups={props.groups}
-            associations={props.associations}
-          />
-        </div>
-      </div>
-    );
-  }
-}

From 6046936bef68af494fac64d13bed4df283c4da2c Mon Sep 17 00:00:00 2001
From: Matilde Park <matilde.park@sunshinegardens.org>
Date: Fri, 14 Aug 2020 16:42:17 -0400
Subject: [PATCH 05/58] links: simplify comment-item component

---
 .../apps/links/components/lib/comment-item.js | 33 ++++++++-----------
 .../apps/links/components/lib/comments.js     |  6 ++--
 2 files changed, 16 insertions(+), 23 deletions(-)

diff --git a/pkg/interface/src/views/apps/links/components/lib/comment-item.js b/pkg/interface/src/views/apps/links/components/lib/comment-item.js
index 3ef26e5fd0..3ac005a11a 100644
--- a/pkg/interface/src/views/apps/links/components/lib/comment-item.js
+++ b/pkg/interface/src/views/apps/links/components/lib/comment-item.js
@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import { Sigil } from '../../../../../logic/lib/sigil';
 import { cite } from '../../../../../logic/lib/util';
 import moment from 'moment';
+import { Box, Text, Row } from '@tlon/indigo-react';
 
 export class CommentItem extends Component {
   constructor(props) {
@@ -33,36 +34,30 @@ export class CommentItem extends Component {
   render() {
     const props = this.props;
 
-    const member = props.member || false;
-
-    const pending = props.pending ? 'o-60' : '';
-
     const img = (props.avatar)
       ? <img src={props.avatar} height={36} width={36} className="dib" />
       : <Sigil
         ship={'~' + props.ship}
         size={36}
         color={'#' + props.color}
-        classes={(member ? 'mix-blend-diff' : '')}
+        classes={(props.member ? 'mix-blend-diff' : '')}
         />;
 
     return (
-      <div className={'w-100 pv3 ' + pending}>
-        <div className="flex bg-white bg-gray0-d">
-        {img}
-          <p className="gray2 f9 flex items-center ml2">
-            <span className={'black white-d ' + props.nameClass}
-            title={props.ship}
-            >
+      <Box width="100%" py={3} opacity={props.pending ? '0.6' : '1'}>
+        <Row backgroundColor='white'>
+          {img}
+          <Row fontSize={0} alignItems="center" ml={2}>
+            <Text mono={!props.hasNickname} title={props.ship}>
               {props.nickname ? props.nickname : cite(props.ship)}
-            </span>
-            <span className="ml2">
+            </Text>
+            <Text gray ml={2}>
               {this.state.timeSinceComment}
-            </span>
-          </p>
-        </div>
-        <p className="inter f8 pv3 white-d">{props.content}</p>
-      </div>
+            </Text>
+          </Row>
+        </Row>
+        <Text display="block" py={3} fontSize={1}>{props.content}</Text>
+      </Box>
     );
   }
 }
diff --git a/pkg/interface/src/views/apps/links/components/lib/comments.js b/pkg/interface/src/views/apps/links/components/lib/comments.js
index a62c2074f4..c81207b04d 100644
--- a/pkg/interface/src/views/apps/links/components/lib/comments.js
+++ b/pkg/interface/src/views/apps/links/components/lib/comments.js
@@ -51,8 +51,6 @@ export class Comments extends Component {
 
       const { nickname, color, member, avatar } = getContactDetails(contacts[ship]);
 
-      const nameClass = nickname ? 'inter' : 'mono';
-
       return(
         <CommentItem
           key={time}
@@ -60,10 +58,10 @@ export class Comments extends Component {
           time={time}
           content={udon}
           nickname={nickname}
-          nameClass={nameClass}
+          hasNickname={Boolean(nickname)}
           color={color}
           avatar={avatar}
-          member={member}
+          member={member || false}
         />
       );
     });

From ecfcb55c17cba20622ef00bb289add435abf5061 Mon Sep 17 00:00:00 2001
From: Matilde Park <matilde@tlon.io>
Date: Wed, 19 Aug 2020 21:03:01 -0400
Subject: [PATCH 06/58] interface: componentise metadata settings

---
 .../views/apps/chat/components/settings.js    | 12 ++++----
 .../metadata/color.js}                        |  6 +---
 .../metadata/input.js}                        |  0
 .../metadata/settings.js}                     | 28 ++++++++++---------
 4 files changed, 21 insertions(+), 25 deletions(-)
 rename pkg/interface/src/views/{apps/chat/components/lib/metadata-color.js => components/metadata/color.js} (92%)
 rename pkg/interface/src/views/{apps/chat/components/lib/metadata-input.js => components/metadata/input.js} (100%)
 rename pkg/interface/src/views/{apps/chat/components/lib/metadata-settings.js => components/metadata/settings.js} (81%)

diff --git a/pkg/interface/src/views/apps/chat/components/settings.js b/pkg/interface/src/views/apps/chat/components/settings.js
index 9b1b339367..cdb22f5b5f 100644
--- a/pkg/interface/src/views/apps/chat/components/settings.js
+++ b/pkg/interface/src/views/apps/chat/components/settings.js
@@ -1,15 +1,11 @@
 import React, { Component, Fragment } from 'react';
 import { deSig } from '~/logic/lib/util';
-import { Link } from 'react-router-dom';
 
 import { ChatHeader } from './lib/chat-header';
-import { MetadataSettings } from './lib/metadata-settings';
+import { MetadataSettings } from '~/views/components/metadata/settings';
 import { DeleteButton } from './lib/delete-button';
 import { GroupifyButton } from './lib/groupify-button';
 import { Spinner } from '~/views/components/Spinner';
-import { ChatTabBar } from './lib/chat-tabbar';
-import SidebarSwitcher from '~/views/components/SidebarSwitch';
-
 
 export class SettingsScreen extends Component {
   constructor(props) {
@@ -95,6 +91,8 @@ export class SettingsScreen extends Component {
           changeLoading={this.changeLoading}
           api={api}
           association={association}
+          resource="chat"
+          app="chat"
           station={station} />
         <Spinner
           awaiting={this.state.awaiting}
@@ -121,13 +119,13 @@ export class SettingsScreen extends Component {
     const isInPopout = popout ? "popout/" : "";
     const title =
       ( association &&
-        ('metadata' in association) && 
+        ('metadata' in association) &&
         (association.metadata.title !== '')
       ) ? association.metadata.title : station.substr(1);
 
     return (
       <div className="h-100 w-100 overflow-x-hidden flex flex-column white-d">
-        <ChatHeader 
+        <ChatHeader
           match={match}
           location={location}
           api={api}
diff --git a/pkg/interface/src/views/apps/chat/components/lib/metadata-color.js b/pkg/interface/src/views/components/metadata/color.js
similarity index 92%
rename from pkg/interface/src/views/apps/chat/components/lib/metadata-color.js
rename to pkg/interface/src/views/components/metadata/color.js
index 35ca0d4253..06b43f6689 100644
--- a/pkg/interface/src/views/apps/chat/components/lib/metadata-color.js
+++ b/pkg/interface/src/views/components/metadata/color.js
@@ -1,10 +1,6 @@
 import React, { Component } from 'react';
 
-import { uxToHex } from '~/logic/lib/util';
-
-
 export class MetadataColor extends Component {
-
   constructor(props) {
     super(props);
     this.state = {
@@ -45,7 +41,7 @@ export class MetadataColor extends Component {
     return (
       <div className={'cf w-100 mb3 ' + ((props.isDisabled) ? 'o-30' : '')}>
         <p className="f8 lh-copy">Change color</p>
-        <p className="f9 gray2 db mb4">Give this chat a color when viewing group channels</p>
+        <p className="f9 gray2 db mb4">Give this {props.resource} a color when viewing group channels</p>
         <div className="relative w-100 flex"
           style={{ maxWidth: '10rem' }}
         >
diff --git a/pkg/interface/src/views/apps/chat/components/lib/metadata-input.js b/pkg/interface/src/views/components/metadata/input.js
similarity index 100%
rename from pkg/interface/src/views/apps/chat/components/lib/metadata-input.js
rename to pkg/interface/src/views/components/metadata/input.js
diff --git a/pkg/interface/src/views/apps/chat/components/lib/metadata-settings.js b/pkg/interface/src/views/components/metadata/settings.js
similarity index 81%
rename from pkg/interface/src/views/apps/chat/components/lib/metadata-settings.js
rename to pkg/interface/src/views/components/metadata/settings.js
index 942135cfcc..d8b6adf329 100644
--- a/pkg/interface/src/views/apps/chat/components/lib/metadata-settings.js
+++ b/pkg/interface/src/views/components/metadata/settings.js
@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 
-import { MetadataColor } from './metadata-color';
-import { MetadataInput } from './metadata-input';
+import { MetadataColor } from './color';
+import { MetadataInput } from './input';
 import { uxToHex } from '~/logic/lib/util';
 
 
@@ -11,13 +11,14 @@ export const MetadataSettings = (props) => {
     association,
     changeLoading,
     api,
-    station
+    resource,
+    app
   } = props;
 
-  const title = 
+  const title =
     (props.association && 'metadata' in props.association) ?
     association.metadata.title : '';
-  const description = 
+  const description =
     (props.association && 'metadata' in props.association) ?
     association.metadata.description : '';
   const color =
@@ -28,13 +29,13 @@ export const MetadataSettings = (props) => {
     <div className="cf mt6">
       <MetadataInput
         title='Rename'
-        description='Change the name of this chat'
+        description={`Change the name of this ${resource}`}
         isDisabled={!isOwner}
         initialValue={title}
         setValue={(val) => {
-          changeLoading(false, true, 'Editing chat...', () => {
+          changeLoading(false, true, `Editing ${resource}...`, () => {
             api.metadata.metadataAdd(
-              'chat',
+              app,
               association['app-path'],
               association['group-path'],
               val,
@@ -48,13 +49,13 @@ export const MetadataSettings = (props) => {
         }} />
         <MetadataInput
           title='Change description'
-          description='Change the description of this chat'
+          description={`Change the description of this ${resource}`}
           isDisabled={!isOwner}
           initialValue={description}
           setValue={(val) => {
             changeLoading(false, true, 'Editing chat...', () => {
               api.metadata.metadataAdd(
-                'chat',
+                app,
                 association['app-path'],
                 association['group-path'],
                 association.metadata.title,
@@ -67,12 +68,13 @@ export const MetadataSettings = (props) => {
             });
           }} />
       <MetadataColor
-        initialValue={color} 
+        initialValue={color}
         isDisabled={!isOwner}
+        resource={resource}
         setValue={(val) => {
-          changeLoading(false, true, 'Editing chat...', () => {
+          changeLoading(false, true, `Editing ${resource}...`, () => {
             props.api.metadata.metadataAdd(
-              'chat',
+              app,
               association['app-path'],
               association['group-path'],
               association.metadata.title,

From 0dbd879443b325cac7764af94fdbb66c3a0c535a Mon Sep 17 00:00:00 2001
From: Matilde Park <matilde@tlon.io>
Date: Wed, 19 Aug 2020 21:17:33 -0400
Subject: [PATCH 07/58] links: use componentised metadata

---
 .../views/apps/chat/components/settings.js    |   2 +-
 .../views/apps/links/components/settings.js   | 205 ++----------------
 .../src/views/components/metadata/settings.js |   4 +-
 3 files changed, 27 insertions(+), 184 deletions(-)

diff --git a/pkg/interface/src/views/apps/chat/components/settings.js b/pkg/interface/src/views/apps/chat/components/settings.js
index cdb22f5b5f..c450b9e794 100644
--- a/pkg/interface/src/views/apps/chat/components/settings.js
+++ b/pkg/interface/src/views/apps/chat/components/settings.js
@@ -93,7 +93,7 @@ export class SettingsScreen extends Component {
           association={association}
           resource="chat"
           app="chat"
-          station={station} />
+        />
         <Spinner
           awaiting={this.state.awaiting}
           classes="absolute right-2 bottom-2 ba pa2 b--gray1-d"
diff --git a/pkg/interface/src/views/apps/links/components/settings.js b/pkg/interface/src/views/apps/links/components/settings.js
index 8d0153e46b..d0f0517f74 100644
--- a/pkg/interface/src/views/apps/links/components/settings.js
+++ b/pkg/interface/src/views/apps/links/components/settings.js
@@ -8,39 +8,24 @@ import { Spinner } from '~/views/components/Spinner';
 import { LinksTabBar } from './lib/links-tabbar';
 import SidebarSwitcher from '~/views/components/SidebarSwitch';
 
+import { MetadataSettings } from '~/views/components/metadata/settings';
+
 export class SettingsScreen extends Component {
   constructor(props) {
     super(props);
 
     this.state = {
       isLoading: false,
-      title: '',
-      description: '',
-      color: '',
-      disabled: false,
+      awaiting: false,
       type: 'Editing'
     };
 
-    this.changeTitle = this.changeTitle.bind(this);
-    this.changeDescription = this.changeDescription.bind(this);
-    this.changeColor = this.changeColor.bind(this);
-    this.submitColor = this.submitColor.bind(this);
     this.renderDelete = this.renderDelete.bind(this);
-    this.renderMetadataSettings = this.renderMetadataSettings.bind(this);
     this.markAllAsSeen = this.markAllAsSeen.bind(this);
+    this.changeLoading = this.changeLoading.bind(this);
   }
 
-  componentDidMount() {
-    if ((this.props.resource) && ('metadata' in this.props.resource)) {
-      this.setState({
-        title: this.props.resource.metadata.title,
-        description: this.props.resource.metadata.description,
-        color: `#${uxToHex(this.props.resource.metadata.color || '0x0')}`
-      });
-    }
-  }
-
-  componentDidUpdate(prevProps, prevState) {
+  componentDidUpdate() {
     const { props, state } = this;
 
     if (Boolean(state.isLoading) && !props.resource) {
@@ -50,64 +35,14 @@ export class SettingsScreen extends Component {
         props.history.push('/~link');
       });
     }
-
-    if (((props.resource) && ('metadata' in props.resource))
-      && (prevProps !== props)) {
-      this.setState({
-        title: props.resource.metadata.title,
-        description: props.resource.metadata.description,
-        color: `#${uxToHex(this.props.resource.metadata.color || '0x0')}`
-      });
-    }
   }
 
-  changeTitle() {
-    this.setState({ title: event.target.value });
-  }
-
-  changeDescription() {
-    this.setState({ description: event.target.value });
-  }
-
-  changeColor() {
-    this.setState({ color: event.target.value });
-  }
-
-  submitColor() {
-    const { props, state } = this;
-    const { resource } = props;
-
-    if (!('metadata' in resource)) {
-      resource.metadata = {};
-    }
-
-    // submit color if valid
-    let color = state.color;
-    if (color.startsWith('#')) {
-      color = state.color.substr(1);
-    }
-    const hexExp = /([0-9A-Fa-f]{6})/;
-    const hexTest = hexExp.exec(color);
-    let currentColor = '000000';
-    if (props.resource && 'metadata' in props.resource) {
-      currentColor = uxToHex(props.resource.metadata.color);
-    }
-    if (hexTest && (hexTest[1] !== currentColor)) {
-      if (props.amOwner) {
-        this.setState({ disabled: true });
-        props.api.metadataAdd(
-          'link',
-          props.resourcePath,
-          props.groupPath,
-          resource.metadata.title,
-          resource.metadata.description,
-          resource.metadata['date-created'],
-          color
-        ).then(() => {
-          this.setState({ disabled: false });
-        });
-      }
-    }
+  changeLoading(isLoading, awaiting, type, closure) {
+    this.setState({
+      isLoading,
+      awaiting,
+      type
+    }, closure);
   }
 
   removeCollection() {
@@ -115,7 +50,7 @@ export class SettingsScreen extends Component {
 
     this.setState({
       isLoading: true,
-      disabled: true,
+      awaiting: true,
       type: 'Removing'
     });
     props.api.links.removeCollection(props.resourcePath)
@@ -131,7 +66,7 @@ export class SettingsScreen extends Component {
 
     this.setState({
       isLoading: true,
-      disabled: true,
+      awaiting: true,
       type: 'Deleting'
     });
     props.api.links.deleteCollection(props.resourcePath)
@@ -175,7 +110,7 @@ export class SettingsScreen extends Component {
             Delete this collection, for you and all group members.
           </p>
           <a onClick={this.deleteCollection.bind(this)}
-             className="dib f9 ba pa2 b--red2 red2 pointer bg-gray0-d"
+             className="dib f9 ba pa2 b--red2 red2 pointer bg-gray0-d mb4"
           >
             Delete collection
           </a>
@@ -184,105 +119,6 @@ export class SettingsScreen extends Component {
     }
   }
 
-  renderMetadataSettings() {
-    const { props, state } = this;
-    const { resource } = props;
-
-    if (!('metadata' in resource)) {
-      resource.metadata = {};
-    }
-
-    return(
-      <div>
-        <div className={'w-100 pb6 fl mt3 ' + ((props.amOwner) ? '' : 'o-30')}>
-        <p className="f8 mt3 lh-copy">Rename</p>
-        <p className="f9 gray2 db mb4">Change the name of this collection</p>
-        <div className="relative w-100 flex"
-        style={{ maxWidth: '29rem' }}
-        >
-          <input
-            className={'f8 ba b--gray3 b--gray2-d bg-gray0-d white-d ' +
-            'focus-b--black focus-b--white-d pa3 db w-100 flex-auto mr3'}
-            value={this.state.title}
-            disabled={!props.amOwner || this.state.disabled}
-            onChange={this.changeTitle}
-            onBlur={() => {
-              if (props.amOwner) {
-                this.setState({ disabled: true });
-                props.api.metadata.metadataAdd(
-                  'link',
-                  props.resourcePath,
-                  props.groupPath,
-                  state.title,
-                  resource.metadata.description,
-                  resource.metadata['date-created'],
-                  uxToHex(resource.metadata.color)
-                ).then(() => {
-                  this.setState({ disabled: false });
-                });
-              }
-            }}
-          />
-          </div>
-          <p className="f8 mt3 lh-copy">Change description</p>
-          <p className="f9 gray2 db mb4">
-            Change the description of this collection
-          </p>
-          <div className="relative w-100 flex"
-            style={{ maxWidth: '29rem' }}
-          >
-            <input
-              className={'f8 ba b--gray3 b--gray2-d bg-gray0-d white-d ' +
-                'focus-b--black focus-b--white-d pa3 db w-100 flex-auto mr3'}
-              value={this.state.description}
-              disabled={!props.amOwner || this.state.disabled}
-              onChange={this.changeDescription}
-              onBlur={() => {
-                if (props.amOwner) {
-                  this.setState({ disabled: true });
-                  props.api.metadata.metadataAdd(
-                    'link',
-                    props.resourcePath,
-                    props.groupPath,
-                    resource.metadata.title,
-                    state.description,
-                    resource.metadata['date-created'],
-                    uxToHex(resource.metadata.color)
-                  ).then(() => {
-                    this.setState({ disabled: false });
-                  });
-                }
-              }}
-            />
-          </div>
-          <p className="f8 mt3 lh-copy">Change color</p>
-          <p className="f9 gray2 db mb4">Give this collection a color when viewing group channels</p>
-          <div className="relative w-100 flex"
-            style={{ maxWidth: '10rem' }}
-          >
-            <div className="absolute"
-              style={{
-                height: 16,
-                width: 16,
-                backgroundColor: state.color,
-                top: 13,
-                left: 11
-              }}
-            />
-            <input
-              className={'pl7 f8 ba b--gray3 b--gray2-d bg-gray0-d white-d ' +
-                'focus-b--black focus-b--white-d pa3 db w-100 flex-auto mr3'}
-              value={this.state.color}
-              disabled={!props.amOwner || this.state.disabled}
-              onChange={this.changeColor}
-              onBlur={this.submitColor}
-            />
-          </div>
-        </div>
-      </div>
-    );
-  }
-
   render() {
     const { props, state } = this;
 
@@ -367,11 +203,18 @@ export class SettingsScreen extends Component {
             </a>
           {this.renderRemove()}
           {this.renderDelete()}
-          {this.renderMetadataSettings()}
+          <MetadataSettings
+            isOwner={props.amOwner}
+            changeLoading={this.changeLoading}
+            api={props.api}
+            association={props.resource}
+            resource="collection"
+            app="link"
+          />
           <Spinner
-            awaiting={this.state.disabled}
+            awaiting={this.state.awaiting}
             classes="absolute right-1 bottom-1 pa2 ba b--black b--gray0-d white-d"
-            text={`${this.state.type} collection...`}
+            text={this.state.type}
           />
         </div>
       </div>
diff --git a/pkg/interface/src/views/components/metadata/settings.js b/pkg/interface/src/views/components/metadata/settings.js
index d8b6adf329..86c64d66eb 100644
--- a/pkg/interface/src/views/components/metadata/settings.js
+++ b/pkg/interface/src/views/components/metadata/settings.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React from 'react';
 
 import { MetadataColor } from './color';
 import { MetadataInput } from './input';
@@ -53,7 +53,7 @@ export const MetadataSettings = (props) => {
           isDisabled={!isOwner}
           initialValue={description}
           setValue={(val) => {
-            changeLoading(false, true, 'Editing chat...', () => {
+            changeLoading(false, true, `Editing ${resource}...`, () => {
               api.metadata.metadataAdd(
                 app,
                 association['app-path'],

From 1fd147f6cb89cda5495c4524151303d58514dda5 Mon Sep 17 00:00:00 2001
From: Matilde Park <matilde@tlon.io>
Date: Wed, 19 Aug 2020 21:37:20 -0400
Subject: [PATCH 08/58] chat, links: componentise tabBar

---
 .../apps/chat/components/lib/chat-header.js   | 53 ++++++++++---------
 .../apps/links/components/lib/links-tabbar.js | 48 -----------------
 .../src/views/apps/links/components/link.js   |  9 +++-
 .../chat-link-tabbar.js}                      | 13 ++---
 4 files changed, 42 insertions(+), 81 deletions(-)
 delete mode 100644 pkg/interface/src/views/apps/links/components/lib/links-tabbar.js
 rename pkg/interface/src/views/{apps/chat/components/lib/chat-tabbar.js => components/chat-link-tabbar.js} (78%)

diff --git a/pkg/interface/src/views/apps/chat/components/lib/chat-header.js b/pkg/interface/src/views/apps/chat/components/lib/chat-header.js
index df43d08ac6..ab63978f26 100644
--- a/pkg/interface/src/views/apps/chat/components/lib/chat-header.js
+++ b/pkg/interface/src/views/apps/chat/components/lib/chat-header.js
@@ -1,58 +1,61 @@
-import React, { Component, Fragment } from "react";
-import { Link } from "react-router-dom";
-
-import { ChatTabBar } from "./chat-tabbar";
-import { SidebarSwitcher } from "~/views/components/SidebarSwitch";
-import { deSig } from "~/logic/lib/util";
+import React, { Fragment } from 'react';
+import { Link } from 'react-router-dom';
 
+import { TabBar } from '~/views/components/chat-link-tabbar';
+import { SidebarSwitcher } from '~/views/components/SidebarSwitch';
+import { deSig } from '~/logic/lib/util';
 
 export const ChatHeader = (props) => {
-  const isInPopout = props.popout ? "popout/" : "";
+  const isInPopout = props.popout ? 'popout/' : '';
   const group = Array.from(props.group.members);
   let title = props.station.substr(1);
-  if (props.association && 
-    "metadata" in props.association && 
-    props.association.metadata.tile !== "") {
-    title = props.association.metadata.title
+  if (props.association &&
+    'metadata' in props.association &&
+    props.association.metadata.tile !== '') {
+    title = props.association.metadata.title;
   }
 
   return (
     <Fragment>
       <div
         className="w-100 dn-m dn-l dn-xl inter pt4 pb6 pl3 f8"
-        style={{ height: "1rem" }}>
-        <Link to="/~chat/">{"⟵ All Chats"}</Link>
+        style={{ height: '1rem' }}
+      >
+        <Link to="/~chat/">{'⟵ All Chats'}</Link>
       </div>
       <div
         className={
-          "pl4 pt2 bb b--gray4 b--gray1-d bg-gray0-d flex relative " +
-          "overflow-x-auto overflow-y-hidden flex-shrink-0 "
+          'pl4 pt2 bb b--gray4 b--gray1-d bg-gray0-d flex relative ' +
+          'overflow-x-auto overflow-y-hidden flex-shrink-0 '
         }
-        style={{ height: 48 }}>
+        style={{ height: 48 }}
+      >
         <SidebarSwitcher
           sidebarShown={props.sidebarShown}
           popout={props.popout}
           api={props.api}
         />
         <Link
-          to={"/~chat/" + isInPopout + "room" + props.station}
-          className="pt2 white-d">
+          to={'/~chat/' + isInPopout + 'room' + props.station}
+          className="pt2 white-d"
+        >
           <h2
             className={
-              "dib f9 fw4 lh-solid v-top " +
-              (title === props.station.substr(1) ? "mono" : "")
+              'dib f9 fw4 lh-solid v-top ' +
+              (title === props.station.substr(1) ? 'mono' : '')
             }
-            style={{ width: "max-content" }}>
+            style={{ width: 'max-content' }}
+          >
             {title}
           </h2>
         </Link>
-        <ChatTabBar
+        <TabBar
           location={props.location}
-          station={props.station}
-          isOwner={deSig(props.match.params.ship) === window.ship}
+          popoutHref={`/~chat/popout/room${props.station}`}
+          settings={`/~chat/${isInPopout}settings${props.station}`}
           popout={props.popout}
         />
       </div>
     </Fragment>
   );
-}
+};
diff --git a/pkg/interface/src/views/apps/links/components/lib/links-tabbar.js b/pkg/interface/src/views/apps/links/components/lib/links-tabbar.js
deleted file mode 100644
index bc6664a08d..0000000000
--- a/pkg/interface/src/views/apps/links/components/lib/links-tabbar.js
+++ /dev/null
@@ -1,48 +0,0 @@
-import React, { Component } from 'react';
-import { Link } from 'react-router-dom';
-import { makeRoutePath } from '~/logic/lib/util';
-
-export class LinksTabBar extends Component {
-  render() {
-    const props = this.props;
-
-    let setColor = '';
-
-    if (props.location.pathname.includes('/settings')) {
-      setColor = 'black white-d';
-    } else {
-      setColor = 'gray3';
-    }
-
-    const hidePopoutIcon = (props.popout)
-    ? 'dn-m dn-l dn-xl'
-    : 'dib-m dib-l dib-xl';
-
-    return (
-      <div className="dib flex-shrink-0 flex-grow-1">
-        <div className={'dib pt2 f9 pl6 pr6 lh-solid'}>
-          <Link
-            className={'no-underline ' + setColor}
-            to={makeRoutePath(props.resourcePath, props.popout) + '/settings'}
-          >
-            Settings
-          </Link>
-        </div>
-        <a href={makeRoutePath(props.resourcePath, true, props.page)}
-          target="_blank"
-          rel="noopener noreferrer"
-          className="dib fr pt2 pr1"
-        >
-          <img
-            className={'flex-shrink-0 pr3 dn ' + hidePopoutIcon}
-            src="/~link/img/popout.png"
-            height="16"
-            width="16"
-          />
-        </a>
-      </div>
-    );
-  }
-}
-
-export default LinksTabBar;
diff --git a/pkg/interface/src/views/apps/links/components/link.js b/pkg/interface/src/views/apps/links/components/link.js
index a9e1c57db8..bf4ba15057 100644
--- a/pkg/interface/src/views/apps/links/components/link.js
+++ b/pkg/interface/src/views/apps/links/components/link.js
@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { LinksTabBar } from './lib/links-tabbar';
+import { TabBar } from '~/views/components/chat-link-tabbar';
 import { LinkPreview } from './lib/link-detail-preview';
 import { SidebarSwitcher } from '~/views/components/SidebarSwitch';
 import { Link } from 'react-router-dom';
@@ -147,7 +147,12 @@ export class LinkDetail extends Component {
           >
             {`<- ${props.resource.metadata.title}`}
           </Link>
-          <LinksTabBar {...props} popout={props.popout} resourcePath={props.resourcePath} />
+          <TabBar
+          location={props.location}
+          popout={props.popout}
+          popoutHref={makeRoutePath(props.resourcePath, true, props.page)}
+          settings={makeRoutePath(props.resourcePath, props.popout) + '/settings'}
+          />
         </div>
         <div className="w-100 mt2 flex justify-center overflow-y-scroll ph4 pb4">
           <div className="w-100 mw7">
diff --git a/pkg/interface/src/views/apps/chat/components/lib/chat-tabbar.js b/pkg/interface/src/views/components/chat-link-tabbar.js
similarity index 78%
rename from pkg/interface/src/views/apps/chat/components/lib/chat-tabbar.js
rename to pkg/interface/src/views/components/chat-link-tabbar.js
index 69df556d31..da6e48dff7 100644
--- a/pkg/interface/src/views/apps/chat/components/lib/chat-tabbar.js
+++ b/pkg/interface/src/views/components/chat-link-tabbar.js
@@ -1,10 +1,11 @@
-import React, { Component } from 'react';
+import React from 'react';
 import { Link } from 'react-router-dom';
 
-export const ChatTabBar = (props) => {
+export const TabBar = (props) => {
   const {
     location,
-    station
+    settings,
+    popoutHref
   } = props;
   let setColor = '', popout = '';
 
@@ -22,11 +23,11 @@ export const ChatTabBar = (props) => {
       <div className={'dib pt2 f9 pl6 pr6 lh-solid'}>
         <Link
           className={'no-underline ' + setColor}
-          to={'/~chat/' + popout + 'settings' + station}>
+          to={settings}>
           Settings
         </Link>
       </div>
-      <a href={'/~chat/popout/room' + station} rel="noopener noreferrer"
+      <a href={popoutHref} rel="noopener noreferrer"
          target="_blank"
          className="dib fr pr1"
          style={{ paddingTop: '8px' }}>
@@ -38,4 +39,4 @@ export const ChatTabBar = (props) => {
       </a>
     </div>
   );
-}
+};

From ffadf5718dbad49e31b574433f015783b9c250a1 Mon Sep 17 00:00:00 2001
From: Matilde Park <matilde@tlon.io>
Date: Wed, 19 Aug 2020 21:44:45 -0400
Subject: [PATCH 09/58] links: use tabbar in links-list, settings

---
 .../views/apps/links/components/links-list.js  | 12 ++++++------
 .../views/apps/links/components/settings.js    | 18 ++++++++++++++----
 2 files changed, 20 insertions(+), 10 deletions(-)

diff --git a/pkg/interface/src/views/apps/links/components/links-list.js b/pkg/interface/src/views/apps/links/components/links-list.js
index 577b3ee057..822b558af3 100644
--- a/pkg/interface/src/views/apps/links/components/links-list.js
+++ b/pkg/interface/src/views/apps/links/components/links-list.js
@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 
 import { LoadingScreen } from './loading';
 import { MessageScreen } from './lib/message-screen';
-import { LinksTabBar } from './lib/links-tabbar';
+import { TabBar } from '~/views/components/chat-link-tabbar';
 import { SidebarSwitcher } from '~/views/components/SidebarSwitch';
 import { Link } from 'react-router-dom';
 import { LinkItem } from './lib/link-item';
@@ -127,11 +127,11 @@ export class Links extends Component {
              {props.resource.metadata.title}
            </h2>
          </Link>
-          <LinksTabBar
-          {...props}
-          popout={props.popout}
-          page={props.page}
-          resourcePath={props.resourcePath}
+          <TabBar
+            location={props.location}
+            popout={props.popout}
+            popoutHref={makeRoutePath(props.resourcePath, true, props.page)}
+            settings={makeRoutePath(props.resourcePath, props.popout) + '/settings'}
           />
         </div>
         <div className="w-100 mt6 flex justify-center overflow-y-scroll ph4 pb4">
diff --git a/pkg/interface/src/views/apps/links/components/settings.js b/pkg/interface/src/views/apps/links/components/settings.js
index d0f0517f74..cde12519d0 100644
--- a/pkg/interface/src/views/apps/links/components/settings.js
+++ b/pkg/interface/src/views/apps/links/components/settings.js
@@ -5,7 +5,7 @@ import { Link } from 'react-router-dom';
 
 import { LoadingScreen } from './loading';
 import { Spinner } from '~/views/components/Spinner';
-import { LinksTabBar } from './lib/links-tabbar';
+import { TabBar } from '~/views/components/chat-link-tabbar';
 import SidebarSwitcher from '~/views/components/SidebarSwitch';
 
 import { MetadataSettings } from '~/views/components/metadata/settings';
@@ -154,7 +154,12 @@ export class SettingsScreen extends Component {
                 {props.resource.metadata.title}
               </h2>
             </Link>
-            <LinksTabBar {...props} />
+            <TabBar
+              location={props.location}
+              popout={props.popout}
+              popoutHref={makeRoutePath(props.resourcePath, true, props.page)}
+              settings={makeRoutePath(props.resourcePath, props.popout) + '/settings'}
+            />
           </div>
           <div className="w-100 pl3 mt4 cf">
             <h2 className="f8 pb2">Removing...</h2>
@@ -190,8 +195,13 @@ export class SettingsScreen extends Component {
               {props.resource.metadata.title}
             </h2>
           </Link>
-          <LinksTabBar {...props} />
-        </div>
+          <TabBar
+            location={props.location}
+            popout={props.popout}
+            popoutHref={makeRoutePath(props.resourcePath, true, props.page)}
+            settings={makeRoutePath(props.resourcePath, props.popout) + '/settings'}
+          />
+          </div>
         <div className="w-100 pl3 mt4 cf">
           <h2 className="f8 pb2">Collection Settings</h2>
           <p className="f8 mt3 lh-copy db">Mark all links as read</p>

From c383d31c24f75a00fd0acb50fb8d4dfde37a1450 Mon Sep 17 00:00:00 2001
From: Tyler Brown Cifu Shuster <tyler@fivepaths.com>
Date: Fri, 21 Aug 2020 16:14:10 -0700
Subject: [PATCH 10/58] chat: updated Leave Group copy

---
 .../apps/chat/components/lib/delete-button.js | 97 ++++++++++---------
 .../views/apps/chat/components/settings.js    |  2 +
 2 files changed, 52 insertions(+), 47 deletions(-)

diff --git a/pkg/interface/src/views/apps/chat/components/lib/delete-button.js b/pkg/interface/src/views/apps/chat/components/lib/delete-button.js
index cb7b75ae75..1abb19f7e9 100644
--- a/pkg/interface/src/views/apps/chat/components/lib/delete-button.js
+++ b/pkg/interface/src/views/apps/chat/components/lib/delete-button.js
@@ -1,51 +1,54 @@
-import React, { Component } from 'react';
+import React, { memo } from 'react';
 
+export const DeleteButton = memo(({ isOwner, station, changeLoading, association, contacts, api }) => {
+  const leaveButtonClasses = (!isOwner) ? 'pointer' : 'c-default';
+  const deleteButtonClasses = (isOwner) ? 
+    'b--red2 red2 pointer bg-gray0-d' :
+    'b--gray3 gray3 bg-gray0-d c-default';
 
-export const DeleteButton = (props) => {
-    const { isOwner, station, changeLoading, api } = props;
-    const leaveButtonClasses = (!isOwner) ? 'pointer' : 'c-default';
-    const deleteButtonClasses = (isOwner) ? 
-      'b--red2 red2 pointer bg-gray0-d' :
-      'b--gray3 gray3 bg-gray0-d c-default';
-
-    const deleteChat = () => {
-      changeLoading(
-        true,
-        true,
-        isOwner ? 'Deleting chat...' : 'Leaving chat...',
-        () => {
-          api.chat.delete(station);
-        }
-      );
-    };
-
-    return (
-      <div className="w-100 cf">
-        <div className={'w-100 fl mt3 ' + ((isOwner) ? 'o-30' : '')}>
-          <p className="f8 mt3 lh-copy db">Leave Chat</p>
-          <p className="f9 gray2 db mb4">
-            Remove this chat from your chat list.{' '}
-            You will need to request for access again.
-          </p>
-          <a onClick={(!isOwner) ? deleteChat : null}
-             className={
-               'dib f9 black gray4-d bg-gray0-d ba pa2 b--black b--gray1-d ' +
-               leaveButtonClasses
-             }>
-            Leave this chat
-          </a>
-        </div>
-        <div className={'w-100 fl mt3 ' + ((!isOwner) ? 'o-30' : '')}>
-          <p className="f8 mt3 lh-copy db">Delete Chat</p>
-            <p className="f9 gray2 db mb4">
-              Permanently delete this chat.{' '}
-              All current members will no longer see this chat.
-            </p>
-            <a onClick={(isOwner) ? deleteChat : null}
-             className={'dib f9 ba pa2 ' + deleteButtonClasses}
-            >Delete this chat</a>
-        </div>
-      </div>
+  const deleteChat = () => {
+    changeLoading(
+      true,
+      true,
+      isOwner ? 'Deleting chat...' : 'Leaving chat...',
+      () => {
+        api.chat.delete(station);
+      }
     );
-};
+  };
 
+  const groupPath = association['group-path'];
+  const unmanagedVillage = !contacts[groupPath];
+
+  return (
+    <div className="w-100 cf">
+      <div className={'w-100 fl mt3 ' + ((isOwner) ? 'o-30' : '')}>
+        <p className="f8 mt3 lh-copy db">Leave Chat</p>
+        <p className="f9 gray2 db mb4">
+          Remove this chat from your chat list.{' '}
+          {unmanagedVillage 
+            ? 'You will need to request for access again'
+            : 'You will need to join again from the group page.'
+          }
+        </p>
+        <a onClick={(!isOwner) ? deleteChat : null}
+           className={
+             'dib f9 black gray4-d bg-gray0-d ba pa2 b--black b--gray1-d ' +
+             leaveButtonClasses
+           }>
+          Leave this chat
+        </a>
+      </div>
+      <div className={'w-100 fl mt3 ' + ((!isOwner) ? 'o-30' : '')}>
+        <p className="f8 mt3 lh-copy db">Delete Chat</p>
+          <p className="f9 gray2 db mb4">
+            Permanently delete this chat.{' '}
+            All current members will no longer see this chat.
+          </p>
+          <a onClick={(isOwner) ? deleteChat : null}
+           className={'dib f9 ba pa2 ' + deleteButtonClasses}
+          >Delete this chat</a>
+      </div>
+    </div>
+  );
+})
\ No newline at end of file
diff --git a/pkg/interface/src/views/apps/chat/components/settings.js b/pkg/interface/src/views/apps/chat/components/settings.js
index 9b1b339367..6250ef7861 100644
--- a/pkg/interface/src/views/apps/chat/components/settings.js
+++ b/pkg/interface/src/views/apps/chat/components/settings.js
@@ -89,6 +89,8 @@ export class SettingsScreen extends Component {
           isOwner={isOwner}
           changeLoading={this.changeLoading}
           station={station}
+          association={association}
+          contacts={contacts}
           api={api} />
         <MetadataSettings
           isOwner={isOwner}

From ddb61adbd1286e7a094f7c15a6d32d8b9f0ebaa4 Mon Sep 17 00:00:00 2001
From: Fang <git@fang.io>
Date: Thu, 27 Aug 2020 16:18:10 +0200
Subject: [PATCH 11/58] lib: take json as argument to server json-response

No reason conversion to octs has to happen outside of this function.
---
 pkg/arvo/app/chat-view.hoon       | 1 -
 pkg/arvo/app/dbug.hoon            | 4 +---
 pkg/arvo/app/language-server.hoon | 2 +-
 pkg/arvo/app/lens.hoon            | 4 ++--
 pkg/arvo/app/publish.hoon         | 7 ++-----
 pkg/arvo/lib/server.hoon          | 4 ++--
 6 files changed, 8 insertions(+), 14 deletions(-)

diff --git a/pkg/arvo/app/chat-view.hoon b/pkg/arvo/app/chat-view.hoon
index 15b7bdf403..5f0bfb18a3 100644
--- a/pkg/arvo/app/chat-view.hoon
+++ b/pkg/arvo/app/chat-view.hoon
@@ -193,7 +193,6 @@
     =/  pax  t.t.t.t.site.url
     =/  envelopes  (envelope-scry [(scot %ud start) (scot %ud end) pax])
     %-  json-response:gen
-    %-  json-to-octs
     %-  update:enjs:store
     [%messages pax start end envelopes]
   ==
diff --git a/pkg/arvo/app/dbug.hoon b/pkg/arvo/app/dbug.hoon
index 5b2d517b2a..80c5fc1406 100644
--- a/pkg/arvo/app/dbug.hoon
+++ b/pkg/arvo/app/dbug.hoon
@@ -148,9 +148,7 @@
   ::
   =;  json=(unit json)
     ?~  json  not-found:gen
-    %-  json-response:gen
-    =,  html
-    (as-octt:mimes (en-json u.json))
+    (json-response:gen u.json)
   =,  enjs:format
   ?+  site  ~
     ::  /apps.json: {appname: running?}
diff --git a/pkg/arvo/app/language-server.hoon b/pkg/arvo/app/language-server.hoon
index 3ad37f5166..0b2e5c31e4 100644
--- a/pkg/arvo/app/language-server.hoon
+++ b/pkg/arvo/app/language-server.hoon
@@ -113,7 +113,7 @@
 ++  json-response
   |=  [eyre-id=@ta jon=json]
   ^-  (list card)
-  (give-simple-payload:app eyre-id (json-response:gen (json-to-octs jon)))
+  (give-simple-payload:app eyre-id (json-response:gen jon))
 ::
 ++  give-rpc-notification
   |=  res=out:notification:lsp-sur
diff --git a/pkg/arvo/app/lens.hoon b/pkg/arvo/app/lens.hoon
index 73004cb27b..8c86f8f8d6 100644
--- a/pkg/arvo/app/lens.hoon
+++ b/pkg/arvo/app/lens.hoon
@@ -136,7 +136,7 @@
     ::
     :_  this
     %+  give-simple-payload:app  eyre-id.u.job.state
-    (json-response:gen (json-to-octs jon))
+    (json-response:gen jon)
   ::
   ++  take-sole-effect
     |=  fec=sole-effect
@@ -186,7 +186,7 @@
     %+  give-simple-payload:app  eyre-id.u.job.state
     ?-  -.u.out
         %json
-      (json-response:gen (json-to-octs json.u.out))
+      (json-response:gen json.u.out)
     ::
         %mime
       =/  headers
diff --git a/pkg/arvo/app/publish.hoon b/pkg/arvo/app/publish.hoon
index 00b5075bfb..9761db7837 100644
--- a/pkg/arvo/app/publish.hoon
+++ b/pkg/arvo/app/publish.hoon
@@ -2347,7 +2347,6 @@
   ::  all notebooks, short form
       [[[~ %json] [%'publish-view' %notebooks ~]] ~]
     %-  json-response:gen
-    %-  json-to-octs
     (notebooks-map:enjs our.bol books)
   ::
   ::  notes pagination
@@ -2366,7 +2365,6 @@
     ?~  length
       not-found:gen
     %-  json-response:gen
-    %-  json-to-octs
     :-  %o
     (notes-page:enjs notes.u.book u.start u.length)
   ::
@@ -2390,7 +2388,6 @@
     ?~  length
       not-found:gen
     %-  json-response:gen
-    %-  json-to-octs
     (comments-page:enjs comments.u.note u.start u.length)
   ::
   ::  single notebook with initial 50 notes in short form, as json
@@ -2409,7 +2406,7 @@
       (~(put by p.notebook-json) %subscribers (get-subscribers-json book-name))
     =.  p.notebook-json
       (~(put by p.notebook-json) %writers (get-writers-json u.host book-name))
-    (json-response:gen (json-to-octs (pairs notebook+notebook-json ~)))
+    (json-response:gen (pairs notebook+notebook-json ~))
   ::
   ::  single note, with initial 50 comments, as json
       [[[~ %json] [%'publish-view' @ @ @ ~]] ~]
@@ -2424,7 +2421,7 @@
     ?~  note  not-found:gen
     =/  jon=json
       o+(note-presentation:enjs u.book note-name u.note)
-    (json-response:gen (json-to-octs jon))
+    (json-response:gen jon)
   ==
 ::
 --
diff --git a/pkg/arvo/lib/server.hoon b/pkg/arvo/lib/server.hoon
index d51fa12c8d..1f450c3e50 100644
--- a/pkg/arvo/lib/server.hoon
+++ b/pkg/arvo/lib/server.hoon
@@ -92,9 +92,9 @@
     [[200 [['content-type' 'text/javascript'] max-1-da ~]] `octs]
   ::
   ++  json-response
-    |=  =octs
+    |=  =json
     ^-  simple-payload:http
-    [[200 ['content-type' 'application/json']~] `octs]
+    [[200 ['content-type' 'application/json']~] `(json-to-octs json)]
   ::
   ++  css-response
     |=  =octs

From 20c94d34feb7d9db58d0f6d6c84b767a3eab921b Mon Sep 17 00:00:00 2001
From: Logan Allen <loganallc@gmail.com>
Date: Thu, 27 Aug 2020 11:46:46 -0500
Subject: [PATCH 12/58] interface: added graph reducer, store state, and
 subscription

---
 .../src/logic/reducers/graph-update.js        | 141 ++++++++++++++++++
 pkg/interface/src/logic/store/store.ts        |   4 +
 pkg/interface/src/logic/store/type.ts         |   2 +
 .../src/logic/subscription/global.ts          |  17 ++-
 pkg/interface/src/views/apps/links/app.js     |   2 +
 5 files changed, 162 insertions(+), 4 deletions(-)
 create mode 100644 pkg/interface/src/logic/reducers/graph-update.js

diff --git a/pkg/interface/src/logic/reducers/graph-update.js b/pkg/interface/src/logic/reducers/graph-update.js
new file mode 100644
index 0000000000..aef331b816
--- /dev/null
+++ b/pkg/interface/src/logic/reducers/graph-update.js
@@ -0,0 +1,141 @@
+import _ from 'lodash';
+
+
+const OrderedMap = (arr = []) => {
+  let map = new Map(arr);
+//  map[Symbol.iterator] = function* () {
+//      yield* [...this.entries()].sort((a, b) => a[1] - b[1]);
+//  };
+  return map;
+};
+
+export const GraphReducer = (json, state) => {
+  const data = _.get(json, 'graph-update', false);
+  if (data) {
+    keys(data, state);
+    addGraph(data, state);
+    addNodes(data, state);
+  }
+};
+
+const keys = (json, state) => {
+  const data = _.get(json, 'keys', false);
+  if (data) {
+    state.graphKeys = new Set(data.map((res) => {
+      return res.ship + '/' + res.name;
+    }));
+  }
+};
+
+const addGraph = (json, state) => {
+  const data = _.get(json, 'add-graph', false);
+  if (data) {
+    if (!('graphs' in state)) {
+      state.graphs = {};
+    }
+
+    let resource = data.resource.ship + '/' + data.resource.name;
+    if (!(resource in state.graphs)) {
+      state.graphs[resource] = new OrderedMap();
+    }
+
+    for (let i in data.graph) {
+      let item = data.graph[i];
+      let index = item[0].split('/').slice(1).map((ind) => {
+        return parseInt(ind, 10);
+      });
+
+      if (index.length === 0) { break; }
+      
+      let node = _processNode(item[1]);
+      state.graphs[resource].set(index[index.length - 1], node);
+    }
+    state.graphKeys.add(resource);
+  }
+};
+
+const _processNode = (node) => {
+    //  is empty
+    if (!node.children) {
+      node.children = new OrderedMap();
+      return node;
+    }
+
+    //  is graph
+    let converted = new OrderedMap();
+    for (let i in node.children) {
+      let item = node.children[i];
+      let index = item[0].split('/').slice(1).map((ind) => {
+        return parseInt(ind, 10);
+      });
+
+      if (index.length === 0) { break; }
+      
+      converted.set(
+        index[index.length - 1],
+        _processNode(item[1])
+      );
+    }
+    node.children = converted;
+    return node;
+  }
+
+const removeGraph = (json, state) => {
+  const data = _.get(json, 'remove-graph', false);
+  if (data) {
+    if (!('graphs' in state)) {
+      state.graphs = {};
+    }
+    let resource = data.resource.ship + '/' + data.resource.name;
+    delete state.graphs[resource];
+  }
+};
+
+const addNodes = (json, state) => {
+  const data = _.get(json, 'add-nodes', false);
+  if (data) {
+    if (!('graphs' in state)) { return; }
+
+    let resource = data.resource.ship + '/' + data.resource.name;
+    if (!(resource in state.graphs)) { return; }
+
+    for (let i in data.nodes) {
+      let item = data.nodes[i];
+      if (item[0].split('/').length === 0) { return; }
+
+      let index = item[0].split('/').slice(1).map((ind) => {
+        return parseInt(ind, 10);
+      });
+
+      if (index.length === 0) { return; }
+
+      //  TODO: support adding nodes with children
+      item[1].children = new Map();
+      
+      state.graphs[resource] = _addNode(
+        state.graphs[resource],
+        index,
+        item[1]
+      );
+    }
+  }
+};
+
+const _addNode = (graph, index, node) => {
+  //  set child of graph
+  if (index.length === 1) {
+    graph.set(index[0], node);
+    return graph;
+  }
+
+  // set parent of graph
+  let parNode = graph.get(index[0]);
+  if (!parNode) {
+    console.error('parent node does not exist, cannot add child');
+    return;
+  }
+  parNode.children = _addNode(parNode.children, index.slice(1), node);
+  graph.set(index[0], parNode);
+  return graph;
+};
+
diff --git a/pkg/interface/src/logic/store/store.ts b/pkg/interface/src/logic/store/store.ts
index 1b9d7aeb00..8926231cc7 100644
--- a/pkg/interface/src/logic/store/store.ts
+++ b/pkg/interface/src/logic/store/store.ts
@@ -9,6 +9,7 @@ import { Cage } from '~/types/cage';
 import ContactReducer from '../reducers/contact-update';
 import LinkUpdateReducer from '../reducers/link-update';
 import S3Reducer from '../reducers/s3-update';
+import { GraphReducer } from '../reducers/graph-update';
 import GroupReducer from '../reducers/group-update';
 import PermissionReducer from '../reducers/permission-update';
 import PublishUpdateReducer from '../reducers/publish-update';
@@ -64,6 +65,8 @@ export default class GlobalStore extends BaseStore<StoreState> {
       },
       groups: {},
       groupKeys: new Set(),
+      graphs: {},
+      graphKeys: new Set(),
       launch: {
         firstTime: false,
         tileOrdering: [],
@@ -106,5 +109,6 @@ export default class GlobalStore extends BaseStore<StoreState> {
     this.launchReducer.reduce(data, this.state);
     this.linkListenReducer.reduce(data, this.state);
     this.connReducer.reduce(data, this.state);
+    GraphReducer(data, this.state);
   }
 }
diff --git a/pkg/interface/src/logic/store/type.ts b/pkg/interface/src/logic/store/type.ts
index 620ea71136..525ec23a23 100644
--- a/pkg/interface/src/logic/store/type.ts
+++ b/pkg/interface/src/logic/store/type.ts
@@ -35,6 +35,8 @@ export interface StoreState {
   groupKeys: Set<Path>;
   permissions: Permissions;
   s3: S3State;
+  graphs: Object;
+  graphKeys: Set<String>;
 
 
   // App specific states
diff --git a/pkg/interface/src/logic/subscription/global.ts b/pkg/interface/src/logic/subscription/global.ts
index 6a3bb37015..8a07dde076 100644
--- a/pkg/interface/src/logic/subscription/global.ts
+++ b/pkg/interface/src/logic/subscription/global.ts
@@ -27,12 +27,18 @@ const groupSubscriptions: AppSubscription[] = [
   ['/synced', 'contact-hook']
 ];
 
-type AppName = 'publish' | 'chat' | 'link' | 'groups';
+const graphSubscriptions: AppSubscription[] = [
+  ['/keys', 'graph-store'],
+  ['/updates', 'graph-store']
+];
+
+type AppName = 'publish' | 'chat' | 'link' | 'groups' | 'graph';
 const appSubscriptions: Record<AppName, AppSubscription[]> = {
   chat: chatSubscriptions,
   publish: publishSubscriptions,
   link: linkSubscriptions,
-  groups: groupSubscriptions
+  groups: groupSubscriptions,
+  graph: graphSubscriptions
 };
 
 export default class GlobalSubscription extends BaseSubscription<StoreState> {
@@ -40,8 +46,10 @@ export default class GlobalSubscription extends BaseSubscription<StoreState> {
     chat: [],
     publish: [],
     link: [],
-    groups: []
+    groups: [],
+    graph: []
   };
+
   start() {
     this.subscribe('/all', 'invite-store');
     this.subscribe('/groups', 'group-store');
@@ -67,7 +75,8 @@ export default class GlobalSubscription extends BaseSubscription<StoreState> {
       console.log(`${app} already started`);
       return;
     }
-    this.openSubscriptions[app] = appSubscriptions[app].map(([path, agent]) => this.subscribe(path, agent));
+    this.openSubscriptions[app] =
+      appSubscriptions[app].map(([path, agent]) => this.subscribe(path, agent));
   }
 
   stopApp(app: AppName) {
diff --git a/pkg/interface/src/views/apps/links/app.js b/pkg/interface/src/views/apps/links/app.js
index 30b4965479..606e4ae05d 100644
--- a/pkg/interface/src/views/apps/links/app.js
+++ b/pkg/interface/src/views/apps/links/app.js
@@ -31,6 +31,7 @@ export class LinksApp extends Component {
 
     this.props.api.links.getPage('', 0);
     this.props.subscription.startApp('link');
+    this.props.subscription.startApp('graph');
     if (!this.props.sidebarShown) {
       this.props.api.local.sidebarToggle();
     }
@@ -38,6 +39,7 @@ export class LinksApp extends Component {
 
   componentWillUnmount() {
     this.props.subscription.stopApp('link');
+    this.props.subscription.stopApp('graph');
   }
 
 

From 3c0dc59747d7889f0396c2c838155d8d236a0147 Mon Sep 17 00:00:00 2001
From: Matilde Park <matilde.park@sunshinegardens.org>
Date: Thu, 27 Aug 2020 15:11:03 -0400
Subject: [PATCH 13/58] profile: log out of all sessions

This was hidden in urbit-os-v1.0.44 until we could ensure it actually
logged you out of all sessions. It requires a hidden input to function,
so it's added here.

Fixes #2649.
---
 .../src/views/apps/profile/components/lib/Security.tsx    | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/pkg/interface/src/views/apps/profile/components/lib/Security.tsx b/pkg/interface/src/views/apps/profile/components/lib/Security.tsx
index d40ae8aef9..0fdfaac529 100644
--- a/pkg/interface/src/views/apps/profile/components/lib/Security.tsx
+++ b/pkg/interface/src/views/apps/profile/components/lib/Security.tsx
@@ -24,18 +24,18 @@ export default function SecuritySettings({ api }: SecuritySettingsProps) {
           </Button>
         </form>
       </Box>
-      {/* <Box color="black" fontSize={0} mt={4} fontWeight={700}>
+      <Box color="black" fontSize={0} mt={4} fontWeight={700}>
         Log out of all sessions
-      </Box> */}
-      {/* Restore after testing sending 'all' in POST body
+      </Box>
       <Box fontSize={0} mt={2} color="gray">
         You will be logged out of all browsers that have currently logged into your Urbit.
         <form method="post" action="/~/logout">
+          <input type="hidden" name="all" />
           <Button error narrow mt={4} border={1}>
             Logout
           </Button>
         </form>
-      </Box> */}
+      </Box>
     </Box>
   );
 }

From c08509535fe9ab7a815f1f9aec524c6e0d59b98f Mon Sep 17 00:00:00 2001
From: Matilde Park <matilde.park@sunshinegardens.org>
Date: Thu, 27 Aug 2020 15:35:20 -0400
Subject: [PATCH 14/58] publish: fix unread counts for long titles

Fixes #3283.
---
 .../src/views/apps/publish/components/lib/NotebookItem.tsx     | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/pkg/interface/src/views/apps/publish/components/lib/NotebookItem.tsx b/pkg/interface/src/views/apps/publish/components/lib/NotebookItem.tsx
index 621725b41a..4a03475e78 100644
--- a/pkg/interface/src/views/apps/publish/components/lib/NotebookItem.tsx
+++ b/pkg/interface/src/views/apps/publish/components/lib/NotebookItem.tsx
@@ -18,6 +18,7 @@ function UnreadCount(props: { unread: number }) {
       fontWeight="700"
       py={1}
       borderRadius={1}
+      flexShrink='0'
       color="white"
       bg="lightGray"
     >
@@ -41,7 +42,7 @@ export function NotebookItem(props: NotebookItemProps) {
         justifyContent="space-between"
         alignItems="center"
       >
-        <Box py={1}>{props.title}</Box>
+        <Box py='1' pr='1'>{props.title}</Box>
         {props.unreadCount > 0 && <UnreadCount unread={props.unreadCount} />}
       </HoverBox>
     </Link>

From f2eeb7a14f5846d70ba7d298fe86817a36dca6ad Mon Sep 17 00:00:00 2001
From: Matilde Park <matilde.park@sunshinegardens.org>
Date: Thu, 27 Aug 2020 15:49:48 -0400
Subject: [PATCH 15/58] chat: break up inline code

Doesn't affect %code messages.

Fixes #3358.
---
 pkg/interface/src/views/apps/chat/css/custom.css | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/pkg/interface/src/views/apps/chat/css/custom.css b/pkg/interface/src/views/apps/chat/css/custom.css
index 56babb6232..052fb06282 100644
--- a/pkg/interface/src/views/apps/chat/css/custom.css
+++ b/pkg/interface/src/views/apps/chat/css/custom.css
@@ -252,6 +252,10 @@ blockquote {
     font-family: 'Inter';
 }
 
+code {
+  white-space: normal;
+}
+
 code, pre.code {
   background-color: var(--light-gray);
 }

From a4b945b4a3be737717d13119a145bc30c64d9cc4 Mon Sep 17 00:00:00 2001
From: Matilde Park <matilde.park@sunshinegardens.org>
Date: Thu, 27 Aug 2020 16:42:02 -0400
Subject: [PATCH 16/58] chat: hideAvatars hides chat input avatar

Fixes #3386.
---
 pkg/interface/src/views/apps/chat/components/chat.tsx        | 1 +
 .../src/views/apps/chat/components/lib/chat-input.js         | 5 ++++-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/pkg/interface/src/views/apps/chat/components/chat.tsx b/pkg/interface/src/views/apps/chat/components/chat.tsx
index b7d9a0e58d..2901e7167d 100644
--- a/pkg/interface/src/views/apps/chat/components/chat.tsx
+++ b/pkg/interface/src/views/apps/chat/components/chat.tsx
@@ -149,6 +149,7 @@ export class ChatScreen extends Component<ChatScreenProps, ChatScreenState> {
           deleteMessage={() => this.setState({
             messages: this.state.messages.set(props.station, "")
           })}
+          hideAvatars={props.hideAvatars}
         />
       </div>
     );
diff --git a/pkg/interface/src/views/apps/chat/components/lib/chat-input.js b/pkg/interface/src/views/apps/chat/components/lib/chat-input.js
index 4e49680a12..c4919cefce 100644
--- a/pkg/interface/src/views/apps/chat/components/lib/chat-input.js
+++ b/pkg/interface/src/views/apps/chat/components/lib/chat-input.js
@@ -201,7 +201,10 @@ export class ChatInput extends Component {
     const sigilClass = props.ownerContact
       ? '' : 'mix-blend-diff';
 
-    const avatar = (props.ownerContact && (props.ownerContact.avatar !== null))
+    const avatar = (
+        props.ownerContact &&
+        ((props.ownerContact.avatar !== null) && !props.hideAvatars)
+      )
       ? <img src={props.ownerContact.avatar} height={24} width={24} className="dib" />
       : <Sigil
         ship={window.ship}

From bbf854d9566354db135193f654a2098faae8b243 Mon Sep 17 00:00:00 2001
From: Logan Allen <loganallc@gmail.com>
Date: Thu, 27 Aug 2020 17:31:36 -0500
Subject: [PATCH 17/58] graph-store: updated scry interface to return
 %graph-store marks so as to properly do %json conversion

---
 pkg/arvo/app/graph-store.hoon | 74 ++++++++++++++++++++++-------------
 pkg/arvo/lib/graph-store.hoon | 12 ++++--
 2 files changed, 54 insertions(+), 32 deletions(-)

diff --git a/pkg/arvo/app/graph-store.hoon b/pkg/arvo/app/graph-store.hoon
index ab9a6b9710..16b18bb632 100644
--- a/pkg/arvo/app/graph-store.hoon
+++ b/pkg/arvo/app/graph-store.hoon
@@ -447,16 +447,29 @@
   |^
   ?>  (team:title our.bowl src.bowl)
   ?+  path  (on-peek:def path)
-      [%x %keys ~]         ``noun+!>(~(key by graphs))
-      [%x %tags ~]         ``noun+!>(~(key by tag-queries))
-      [%x %tag-queries ~]  ``noun+!>(tag-queries)
+      [%x %keys ~]
+    :-  ~  :-  ~  :-  %graph-update
+    !>(`update:store`[%0 now.bowl [%keys ~(key by graphs)]])
+  ::
+      [%x %tags ~]
+    :-  ~  :-  ~  :-  %graph-update
+    !>(`update:store`[%0 now.bowl [%tags ~(key by tag-queries)]])
+  ::
+      [%x %tag-queries ~]
+    :-  ~  :-  ~  :-  %graph-update
+    !>(`update:store`[%0 now.bowl [%tag-queries tag-queries]])
+  ::
       [%x %graph @ @ ~]
     =/  =ship   (slav %p i.t.t.path)
     =/  =term   i.t.t.t.path
     =/  result=(unit marked-graph:store)
       (~(get by graphs) [ship term])
     ?~  result  [~ ~]
-    ``noun+!>(u.result)
+    :-  ~  :-  ~  :-  %graph-update
+    !>  ^-  update:store
+    :+  %0
+      now.bowl
+    [%add-graph [ship term] `graph:store`p.u.result q.u.result]
   ::
       [%x %graph-subset @ @ @ @ ~]
     =/  =ship  (slav %p i.t.t.path)
@@ -466,7 +479,16 @@
     =/  graph=(unit marked-graph:store)
       (~(get by graphs) [ship term])
     ?~  graph  [~ ~]
-    ``noun+!>(`graph:store`(subset:orm p.u.graph start end))
+    :-  ~  :-  ~  :-  %graph-update
+    !>  ^-  update:store
+    :+  %0  now.bowl
+    :+  %add-nodes
+      [ship term]
+    %-  ~(gas by *(map index:store node:store))
+    %+  turn  (tap:orm `graph:store`(subset:orm p.u.graph start end))
+    |=  [=atom =node:store]
+    ^-  [index:store node:store]
+    [~[atom] node]
   ::
       [%x %node @ @ @ *]
     =/  =ship  (slav %p i.t.t.path)
@@ -475,28 +497,13 @@
       (turn t.t.t.t.path |=(=cord (slav %ud cord)))
     =/  node=(unit node:store)  (get-node ship term index)
     ?~  node  [~ ~]
-    ``noun+!>(u.node)
-  ::
-      [%x %post @ @ @ *]
-    =/  =ship         (slav %p i.t.t.path)
-    =/  =term         i.t.t.t.path
-    =/  =index:store
-      (turn t.t.t.t.path |=(=cord (slav %ud cord)))
-    =/  node=(unit node:store)  (get-node ship term index)
-    ?~  node  [~ ~]
-    ``noun+!>(post.u.node)
-  ::
-      [%x %node-children @ @ @ *]
-    =/  =ship  (slav %p i.t.t.path)
-    =/  =term  i.t.t.t.path
-    =/  =index:store
-      (turn t.t.t.t.path |=(=cord (slav %ud cord)))
-    =/  node=(unit node:store)  (get-node ship term index)
-    ?~  node  [~ ~]
-    ?-  -.children.u.node
-        %empty  [~ ~]
-        %graph  ``noun+!>(p.children.u.node)
-    ==
+    :-  ~  :-  ~  :-  %graph-update
+    !>  ^-  update:store
+    :+  %0
+      now.bowl
+    :+  %add-nodes
+      [ship term]
+    (~(gas by *(map index:store node:store)) [index u.node] ~)
   ::
       [%x %node-children-subset @ @ @ @ @ *]
     =/  =ship  (slav %p i.t.t.path)
@@ -509,7 +516,18 @@
     ?~  node  [~ ~]
     ?-  -.children.u.node
         %empty  [~ ~]
-        %graph  ``noun+!>(`graph:store`(subset:orm p.children.u.node start end))
+        %graph
+      :-  ~  :-  ~  :-  %graph-update
+      !>  ^-  update:store
+      :+  %0
+        now.bowl
+      :+  %add-nodes
+        [ship term]
+      %-  ~(gas by *(map index:store node:store))
+      %+  turn  (tap:orm `graph:store`(subset:orm p.children.u.node start end))
+      |=  [=atom =node:store]
+      ^-  [index:store node:store]
+      [(snoc index atom) node]
     ==
   ::
       [%x %update-log @ @ ~]
diff --git a/pkg/arvo/lib/graph-store.hoon b/pkg/arvo/lib/graph-store.hoon
index bf099c89f6..4ed56c4a72 100644
--- a/pkg/arvo/lib/graph-store.hoon
+++ b/pkg/arvo/lib/graph-store.hoon
@@ -247,20 +247,24 @@
     |%
     ++  decode
       %-  of
-      :~  [%add-graph add-graph]
-          [%remove-graph remove-graph]
-          [%add-nodes add-nodes]
+      :~  [%add-nodes add-nodes]
           [%remove-nodes remove-nodes]
           [%add-signatures add-signatures]
           [%remove-signatures remove-signatures]
+        ::
+          [%add-graph add-graph]
+          [%remove-graph remove-graph]
+        ::
           [%add-tag add-tag]
           [%remove-tag remove-tag]
+        ::
           [%archive-graph archive-graph]
           [%unarchive-graph unarchive-graph]
+          [%run-updates run-updates]
+        ::
           [%keys keys]
           [%tags tags]
           [%tag-queries tag-queries]
-          [%run-updates run-updates]
       ==
     ::
     ++  add-graph

From c9bfe272e3967517ef9892b8295ff052e157aebd Mon Sep 17 00:00:00 2001
From: Logan Allen <loganallc@gmail.com>
Date: Thu, 27 Aug 2020 17:34:46 -0500
Subject: [PATCH 18/58] interface: added graph API and stubbed out graph scries

---
 pkg/interface/src/logic/api/global.ts     |  10 +-
 pkg/interface/src/logic/api/graph.ts      | 149 ++++++++++++++++++++++
 pkg/interface/src/views/apps/links/app.js |   8 --
 3 files changed, 157 insertions(+), 10 deletions(-)
 create mode 100644 pkg/interface/src/logic/api/graph.ts

diff --git a/pkg/interface/src/logic/api/global.ts b/pkg/interface/src/logic/api/global.ts
index 7adc461662..d724e0073c 100644
--- a/pkg/interface/src/logic/api/global.ts
+++ b/pkg/interface/src/logic/api/global.ts
@@ -11,6 +11,7 @@ import GroupsApi from './groups';
 import LaunchApi from './launch';
 import LinksApi from './links';
 import PublishApi from './publish';
+import GraphApi from './graph';
 import S3Api from './s3';
 
 export default class GlobalApi extends BaseApi<StoreState> {
@@ -24,10 +25,15 @@ export default class GlobalApi extends BaseApi<StoreState> {
   links = new LinksApi(this.ship, this.channel, this.store);
   publish = new PublishApi(this.ship, this.channel, this.store);
   s3 = new S3Api(this.ship, this.channel, this.store);
+  graph = new GraphApi(this.ship, this.channel, this.store);
 
 
-  constructor(public ship: Patp, public channel: any, public store: GlobalStore) {
-    super(ship,channel,store);
+  constructor(
+    public ship: Patp,
+    public channel: any,
+    public store: GlobalStore
+  ) {
+    super(ship, channel, store);
   }
 }
 
diff --git a/pkg/interface/src/logic/api/graph.ts b/pkg/interface/src/logic/api/graph.ts
new file mode 100644
index 0000000000..4058e787eb
--- /dev/null
+++ b/pkg/interface/src/logic/api/graph.ts
@@ -0,0 +1,149 @@
+import BaseApi from './base';
+import { StoreState } from '../store/type';
+import { Patp, Path, PatpNoSig } from '~/types/noun';
+
+
+export const createPost = (contents: Object[], parentIndex: string) => {
+  return {
+    author: `~${window.ship}`,
+    index: parentIndex + '/' + Date.now(),
+    'time-sent': Date.now(),
+    contents,
+    hash: null,
+    signatures: []
+  };
+};
+
+export default class GraphApi extends BaseApi<StoreState> {
+
+  private storeAction(action: any): Promise<any> {
+    return this.action('graph-store', 'graph-update', action)
+  }
+
+  addGraph(ship: Patp, name: string, graph: any, mark: any) {
+    this.storeAction({
+      'add-graph': {
+        resource: { ship, name },
+        graph,
+        mark
+      }
+    });
+  }
+
+  removeGraph(ship: Patp, name: string) {
+    this.storeAction({
+      'remove-graph': {
+        resource: { ship, name }
+      }
+    });
+  }
+
+  addPost(ship: Patp, name: string, post: Object) {
+    let nodes = {};
+    nodes[post.index] = {
+      post,
+      children: { empty: null }
+    };
+
+    this.storeAction({
+      'add-nodes': {
+        resource: { ship, name },
+        nodes
+      }
+    });
+  }
+
+  addNodes(ship: Patp, name: string, nodes: Object) {
+    this.storeAction({
+      'add-nodes': {
+        resource: { ship, name },
+        nodes
+      }
+    });
+  }
+
+  removeNodes(ship: Patp, name: string, indices: string[]) {
+    this.storeAction({
+      'remove-nodes': {
+        resource: { ship, name },
+        indices
+      }
+    });
+  }
+
+  getKeys() {
+    this.scry<any>('graph-store', '/keys')
+      .then((keys) => {
+        console.log(keys);
+      });
+  }
+
+  getTags() {
+    this.scry<any>('graph-store', '/tags')
+      .then((tags) => {
+        console.log(tags);
+      });
+  }
+
+  getTagQueries() {
+    this.scry<any>('graph-store', '/tag-queries')
+      .then((tagQueries) => {
+        console.log(tagQueries);
+      });
+  }
+
+  getGraph(ship: string, resource: string) {
+    this.scry<any>('graph-store', `/graph/${ship}/${resource}`)
+      .then((graph) => {
+        console.log(graph);
+      });
+  }
+
+  getGraphSubset(ship: string, resource: string, start: string, end: start) {
+    this.scry<any>(
+      'graph-store',
+      `/graph-subset/${ship}/${resource}/${start}/${end}`
+    ).then((subset) => {
+      console.log(subset);
+    });
+  }
+
+  getNode(ship: string, resource: string, index: string) {
+    this.scry<any>(
+      'graph-store',
+      `/node/${ship}/${resource}/${index}`
+    ).then((node) => {
+      console.log(node);
+    });
+  }
+
+  getPost(ship: string, resource: string, index: string) {
+    this.scry<any>(
+      'graph-store',
+      `/post/${ship}/${resource}/${index}`
+    ).then((post) => {
+      console.log(post);
+    });
+  }
+
+  getNodeChildren(ship: string, resource: string, index: string) {
+    this.scry<any>(
+      'graph-store',
+      `/node-children/${ship}/${resource}/${index}`
+    ).then((children) => {
+      console.log(children);
+    });
+  }
+
+  getNodeChildrenSubset(ship: string, resource: string,
+                        start: string, end: string, index: string) {
+    this.scry<any>(
+      'graph-store',
+      `/node-children-subset/${ship}/${resource}/${start}/${end}/${index}`
+    ).then((subset) => {
+      console.log(subset);
+    });
+  }
+
+}
+
diff --git a/pkg/interface/src/views/apps/links/app.js b/pkg/interface/src/views/apps/links/app.js
index 606e4ae05d..99fae44aa9 100644
--- a/pkg/interface/src/views/apps/links/app.js
+++ b/pkg/interface/src/views/apps/links/app.js
@@ -42,20 +42,14 @@ export class LinksApp extends Component {
     this.props.subscription.stopApp('graph');
   }
 
-
   render() {
     const { props } = this;
-
     const contacts = props.contacts ? props.contacts : {};
-
     const groups = props.groups ? props.groups : {};
-
     const associations = props.associations ? props.associations : { link: {}, contacts: {} };
     const links = props.links ? props.links : {};
     const comments = props.linkComments ? props.linkComments : {};
-
     const seen = props.linksSeen ? props.linksSeen : {};
-
     const totalUnseen = _.reduce(
       links,
       (acc, collection) => acc + collection.unseenCount,
@@ -65,9 +59,7 @@ export class LinksApp extends Component {
     const invites = props.invites ?
       props.invites : {};
 
-
     const listening = props.linkListening;
-
     const { api, sidebarShown, hideAvatars, hideNicknames } = this.props;
 
     return (

From b51046d258d783f46d403eecdb50f4ff74086513 Mon Sep 17 00:00:00 2001
From: Tyler Brown Cifu Shuster <tyler@fivepaths.com>
Date: Thu, 27 Aug 2020 16:17:25 -0700
Subject: [PATCH 19/58] chat: only show other participant in dms

---
 .../src/views/apps/chat/components/lib/group-item.js | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/pkg/interface/src/views/apps/chat/components/lib/group-item.js b/pkg/interface/src/views/apps/chat/components/lib/group-item.js
index 1f0e200b96..495e16812d 100644
--- a/pkg/interface/src/views/apps/chat/components/lib/group-item.js
+++ b/pkg/interface/src/views/apps/chat/components/lib/group-item.js
@@ -1,11 +1,13 @@
 import React, { Component } from 'react';
 import { Link } from 'react-router-dom';
 import { ChannelItem } from './channel-item';
+import { deSig } from "~/logic/lib/util";
 
 export class GroupItem extends Component {
   render() {
     const { props } = this;
     const association = props.association ? props.association : {};
+    const DEFAULT_TITLE_REGEX = new RegExp(`(( <-> )?~${deSig(window.ship)}( <-> )?)`);
 
     let title = association['app-path'] ? association['app-path'] : 'Direct Messages';
     if (association.metadata && association.metadata.title) {
@@ -47,9 +49,13 @@ export class GroupItem extends Component {
         each in props.chatMetadata &&
         props.chatMetadata[each].metadata
       ) {
-        title = props.chatMetadata[each].metadata.title
-          ? props.chatMetadata[each].metadata.title
-          : each.substr(1);
+        if (props.chatMetadata[each].metadata.title) {
+          title = props.chatMetadata[each].metadata.title
+        }
+      }
+      
+      if (DEFAULT_TITLE_REGEX.test(title) && props.index === "dm") {
+        title = title.replace(DEFAULT_TITLE_REGEX, '');
       }
       const selected = props.station === each;
 

From 4c758372d6db823e5bd1ad07848592568521c93e Mon Sep 17 00:00:00 2001
From: Philip Monk <phil@pcmonk.me>
Date: Thu, 27 Aug 2020 21:14:47 -0700
Subject: [PATCH 20/58] clay: minimal -diff thread

Barebones 2-way diff thread.  Further development should include:

- recognize at least %txt and %hoon diff types as (urge:clay cord) and
print them prettily

- check if they're directories and recurse through them, noting files
that exist in one or the other and diffing ones that exist in both

- support 3-way diffs.  Since we know the desks they're on, we can find
a mergebase (see how +trouble gets the base-hash in #3378) and do a
3-way diff.

- extend the above to support all the useful diffs, including
diff3(a,b), diff2(mergebase(a,b),a) and any other useful ones.
---
 pkg/arvo/ted/diff.hoon | 30 ++++++++++++++++++++++++++++++
 1 file changed, 30 insertions(+)
 create mode 100644 pkg/arvo/ted/diff.hoon

diff --git a/pkg/arvo/ted/diff.hoon b/pkg/arvo/ted/diff.hoon
new file mode 100644
index 0000000000..cd9cdc796a
--- /dev/null
+++ b/pkg/arvo/ted/diff.hoon
@@ -0,0 +1,30 @@
+/-  spider
+/+  strandio
+=,  strand=strand:spider
+^-  thread:spider
+|=  arg=vase
+=/  m  (strand ,vase)
+^-  form:m
+|^
+=+  !<([=a=path =b=path ~] arg)
+=/  a-mark=mark  -:(flop a-path)
+=/  b-mark=mark  -:(flop b-path)
+?.  =(a-mark b-mark)
+  (strand-fail:strandio %files-not-same-type ~)
+=/  a-beam  (need (de-beam:format a-path))
+;<  =a=cage     bind:m  (get-file a-path)
+;<  =b=cage     bind:m  (get-file b-path)
+;<  =dais:clay  bind:m  (build-mark:strandio -.a-beam a-mark)
+(pure:m (~(diff dais q.a-cage) q.b-cage))
+::
+++  get-file
+  |=  =path
+  =/  m  (strand ,cage)
+  ^-  form:m
+  =/  beam  (need (de-beam:format path))
+  ;<  =riot:clay  bind:m
+    (warp:strandio p.beam q.beam ~ %sing %x r.beam (flop s.beam))
+  ?~  riot
+    (strand-fail:strandio %file-not-found >path< ~)
+  (pure:m r.u.riot)
+--

From 90a6282b4ee8f45f066525c35a6cdf2fee6e3648 Mon Sep 17 00:00:00 2001
From: Logan Allen <loganallc@gmail.com>
Date: Fri, 28 Aug 2020 13:40:17 -0500
Subject: [PATCH 21/58] interface: integrated and tested all scries with
 reducer

---
 pkg/interface/src/logic/api/graph.ts          | 57 +++++++------------
 .../src/logic/reducers/graph-update.js        | 12 ++--
 pkg/interface/src/views/apps/links/app.js     |  1 +
 3 files changed, 29 insertions(+), 41 deletions(-)

diff --git a/pkg/interface/src/logic/api/graph.ts b/pkg/interface/src/logic/api/graph.ts
index 4058e787eb..d583322021 100644
--- a/pkg/interface/src/logic/api/graph.ts
+++ b/pkg/interface/src/logic/api/graph.ts
@@ -3,7 +3,7 @@ import { StoreState } from '../store/type';
 import { Patp, Path, PatpNoSig } from '~/types/noun';
 
 
-export const createPost = (contents: Object[], parentIndex: string) => {
+export const createPost = (contents: Object[], parentIndex: string = '') => {
   return {
     author: `~${window.ship}`,
     index: parentIndex + '/' + Date.now(),
@@ -74,37 +74,47 @@ export default class GraphApi extends BaseApi<StoreState> {
   getKeys() {
     this.scry<any>('graph-store', '/keys')
       .then((keys) => {
-        console.log(keys);
+        this.store.handleEvent({
+          data: keys
+        });
       });
   }
 
   getTags() {
     this.scry<any>('graph-store', '/tags')
       .then((tags) => {
-        console.log(tags);
+        this.store.handleEvent({
+          data: tags
+        });
       });
   }
 
   getTagQueries() {
     this.scry<any>('graph-store', '/tag-queries')
       .then((tagQueries) => {
-        console.log(tagQueries);
+        this.store.handleEvent({
+          data: tagQueries
+        });
       });
   }
 
   getGraph(ship: string, resource: string) {
     this.scry<any>('graph-store', `/graph/${ship}/${resource}`)
       .then((graph) => {
-        console.log(graph);
+        this.store.handleEvent({
+          data: graph
+        });
       });
   }
 
   getGraphSubset(ship: string, resource: string, start: string, end: start) {
     this.scry<any>(
       'graph-store',
-      `/graph-subset/${ship}/${resource}/${start}/${end}`
+      `/graph-subset/${ship}/${resource}/${end}/${start}`
     ).then((subset) => {
-      console.log(subset);
+      this.store.handleEvent({
+        data: subset
+      });
     });
   }
 
@@ -113,37 +123,10 @@ export default class GraphApi extends BaseApi<StoreState> {
       'graph-store',
       `/node/${ship}/${resource}/${index}`
     ).then((node) => {
-      console.log(node);
+      this.store.handleEvent({
+        data: node
+      });
     });
   }
-
-  getPost(ship: string, resource: string, index: string) {
-    this.scry<any>(
-      'graph-store',
-      `/post/${ship}/${resource}/${index}`
-    ).then((post) => {
-      console.log(post);
-    });
-  }
-
-  getNodeChildren(ship: string, resource: string, index: string) {
-    this.scry<any>(
-      'graph-store',
-      `/node-children/${ship}/${resource}/${index}`
-    ).then((children) => {
-      console.log(children);
-    });
-  }
-
-  getNodeChildrenSubset(ship: string, resource: string,
-                        start: string, end: string, index: string) {
-    this.scry<any>(
-      'graph-store',
-      `/node-children-subset/${ship}/${resource}/${start}/${end}/${index}`
-    ).then((subset) => {
-      console.log(subset);
-    });
-  }
-
 }
 
diff --git a/pkg/interface/src/logic/reducers/graph-update.js b/pkg/interface/src/logic/reducers/graph-update.js
index aef331b816..5b8dbcb5cd 100644
--- a/pkg/interface/src/logic/reducers/graph-update.js
+++ b/pkg/interface/src/logic/reducers/graph-update.js
@@ -22,7 +22,13 @@ const keys = (json, state) => {
   const data = _.get(json, 'keys', false);
   if (data) {
     state.graphKeys = new Set(data.map((res) => {
-      return res.ship + '/' + res.name;
+      let resource = res.ship + '/' + res.name;
+
+      if (!(resource in state.graphs)) {
+        state.graphs[resource] = new OrderedMap();
+      }
+
+      return resource;
     }));
   }
 };
@@ -35,9 +41,7 @@ const addGraph = (json, state) => {
     }
 
     let resource = data.resource.ship + '/' + data.resource.name;
-    if (!(resource in state.graphs)) {
-      state.graphs[resource] = new OrderedMap();
-    }
+    state.graphs[resource] = new OrderedMap();
 
     for (let i in data.graph) {
       let item = data.graph[i];
diff --git a/pkg/interface/src/views/apps/links/app.js b/pkg/interface/src/views/apps/links/app.js
index 99fae44aa9..5b8cc3d8ce 100644
--- a/pkg/interface/src/views/apps/links/app.js
+++ b/pkg/interface/src/views/apps/links/app.js
@@ -13,6 +13,7 @@ import { SettingsScreen } from './components/settings';
 import { MessageScreen } from './components/lib/message-screen';
 import { Links } from './components/links-list';
 import { LinkDetail } from './components/link';
+
 import {
   makeRoutePath,
   amOwnerOfGroup,

From 7519838cd205e3d3887dfc8b4181750c2d6f5b5e Mon Sep 17 00:00:00 2001
From: Liam Fitzgerald <liam@urizen.co>
Date: Tue, 1 Sep 2020 00:38:11 +1000
Subject: [PATCH 22/58] interface: update title eagerly

---
 pkg/interface/src/views/apps/chat/app.tsx    | 2 +-
 pkg/interface/src/views/apps/links/app.js    | 2 +-
 pkg/interface/src/views/apps/publish/app.tsx | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/pkg/interface/src/views/apps/chat/app.tsx b/pkg/interface/src/views/apps/chat/app.tsx
index 2a3a761757..cadf3e265e 100644
--- a/pkg/interface/src/views/apps/chat/app.tsx
+++ b/pkg/interface/src/views/apps/chat/app.tsx
@@ -108,7 +108,7 @@ export default class ChatApp extends React.Component<ChatAppProps, {}> {
 
     return (
       <>
-        <Helmet>
+        <Helmet defer={false}>
           <title>{totalUnreads > 0 ? `(${totalUnreads}) ` : ''}OS1 - Chat</title>
         </Helmet>
         <Switch>
diff --git a/pkg/interface/src/views/apps/links/app.js b/pkg/interface/src/views/apps/links/app.js
index 30b4965479..a8e6deeb8c 100644
--- a/pkg/interface/src/views/apps/links/app.js
+++ b/pkg/interface/src/views/apps/links/app.js
@@ -70,7 +70,7 @@ export class LinksApp extends Component {
 
     return (
       <>
-        <Helmet>
+        <Helmet defer={false}>
           <title>{totalUnseen > 0 ? `(${totalUnseen}) ` : ''}OS1 - Links</title>
         </Helmet>
         <Switch>
diff --git a/pkg/interface/src/views/apps/publish/app.tsx b/pkg/interface/src/views/apps/publish/app.tsx
index 2dc2055875..59aafff85e 100644
--- a/pkg/interface/src/views/apps/publish/app.tsx
+++ b/pkg/interface/src/views/apps/publish/app.tsx
@@ -71,7 +71,7 @@ export default function PublishApp(props: PublishAppProps) {
 
   return (
     <>
-      <Helmet>
+      <Helmet defer={false}>
         <title>{unreadTotal > 0 ? `(${unreadTotal}) ` : ""}OS1 - Publish</title>
       </Helmet>
       <Route

From bafe213d458566b0910bdb0e993fab6e73591df4 Mon Sep 17 00:00:00 2001
From: Liam Fitzgerald <liam@urizen.co>
Date: Tue, 1 Sep 2020 01:13:33 +1000
Subject: [PATCH 23/58] publish: check roles correctly for tags

---
 .../publish/components/lib/Subscribers.tsx    | 25 +++++++++++--------
 pkg/interface/src/views/components/Group.tsx  |  4 +--
 2 files changed, 16 insertions(+), 13 deletions(-)

diff --git a/pkg/interface/src/views/apps/publish/components/lib/Subscribers.tsx b/pkg/interface/src/views/apps/publish/components/lib/Subscribers.tsx
index 4ff86c82bf..069e851f33 100644
--- a/pkg/interface/src/views/apps/publish/components/lib/Subscribers.tsx
+++ b/pkg/interface/src/views/apps/publish/components/lib/Subscribers.tsx
@@ -1,11 +1,12 @@
 import React, { Component } from 'react';
 import { GroupView } from '~/views/components/Group';
-import { resourceFromPath } from '~/logic/lib/group';
+import { resourceFromPath, roleForShip } from '~/logic/lib/group';
 import {Notebook} from '~/types/publish-update';
 import GlobalApi from '~/logic/api/global';
 import {Groups} from '~/types/group-update';
 import {Associations} from '~/types/metadata-update';
 import {Rolodex} from '~/types/contact-update';
+import {Box, Button} from '@tlon/indigo-react';
 
 interface SubscribersProps {
   notebook: Notebook;
@@ -71,16 +72,20 @@ export class Subscribers extends Component<SubscribersProps> {
         addDesc: 'Allow user to write to this notebook'
       },
     ];
-    
+
+    if(!group) {
+      return null;
+    }
+
+    const role = roleForShip(group, window.ship)
 
     return (
-      <div>
-        <button
-           onClick={this.addAll}
-           className={'dib f9 black gray4-d bg-gray0-d ba pa2 mb4 b--black b--gray1-d pointer'}
-        >
-          Add all members as writers
-        </button>
+      <Box>
+        { role === 'admin' && (
+          <Button mb={3} border onClick={this.addAll}>
+            Add all members as writers
+          </Button>
+        )}
         <GroupView
           permissions
           resourcePath={path}
@@ -92,7 +97,7 @@ export class Subscribers extends Component<SubscribersProps> {
           associations={this.props.associations}
           api={this.props.api}
         />
-      </div>
+      </Box>
     );
   }
 }
diff --git a/pkg/interface/src/views/components/Group.tsx b/pkg/interface/src/views/components/Group.tsx
index e364c0aeb4..0b8dc9bf31 100644
--- a/pkg/interface/src/views/components/Group.tsx
+++ b/pkg/interface/src/views/components/Group.tsx
@@ -143,10 +143,8 @@ export class GroupView extends Component<
   }
 
   isAdmin(): boolean {
-    const us = `~${window.ship}`;
     const role = roleForShip(this.props.group, window.ship);
-    const resource = resourceFromPath(this.props.resourcePath);
-    return resource.ship == us || role === 'admin';
+    return role === 'admin';
   }
 
   optionsForShip(ship: Patp, missing: GroupViewAppTag[]) {

From 149ffd32e64569cfa63a13fb15b96bbe03ff29a2 Mon Sep 17 00:00:00 2001
From: Liam Fitzgerald <liam@urizen.co>
Date: Tue, 1 Sep 2020 01:25:51 +1000
Subject: [PATCH 24/58] publish: make input form expand to screen

---
 .../src/views/apps/publish/components/lib/MarkdownField.tsx    | 2 +-
 .../src/views/apps/publish/components/lib/NoteForm.tsx         | 3 ++-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/pkg/interface/src/views/apps/publish/components/lib/MarkdownField.tsx b/pkg/interface/src/views/apps/publish/components/lib/MarkdownField.tsx
index efd4f0e475..b60af6a5cf 100644
--- a/pkg/interface/src/views/apps/publish/components/lib/MarkdownField.tsx
+++ b/pkg/interface/src/views/apps/publish/components/lib/MarkdownField.tsx
@@ -12,7 +12,7 @@ export const MarkdownField = ({ id, ...rest }: { id: string; } & Parameters<type
   const [{ value }, { error, touched }, { setValue, setTouched }] = useField(id);
 
   return (
-    <Box width="100%" display="flex" flexDirection="column" {...rest}>
+    <Box height="100%" width="100%" display="flex" flexDirection="column" {...rest}>
       <MarkdownEditor
         onFocus={() => setTouched(true)}
         onBlur={() => setTouched(false)}
diff --git a/pkg/interface/src/views/apps/publish/components/lib/NoteForm.tsx b/pkg/interface/src/views/apps/publish/components/lib/NoteForm.tsx
index cc83d248d9..e4cc1f8ae6 100644
--- a/pkg/interface/src/views/apps/publish/components/lib/NoteForm.tsx
+++ b/pkg/interface/src/views/apps/publish/components/lib/NoteForm.tsx
@@ -31,10 +31,11 @@ export function PostForm(props: PostFormProps) {
   return (
     <Box
       width="100%"
+      height="100%"
       p={[2, 4]}
       display="grid"
       justifyItems="start"
-      gridAutoRows="min-content"
+      gridTemplateRows={["64px 64px 1fr", "64px 1fr"]}
       gridTemplateColumns={["100%", "1fr 1fr"]}
       gridColumnGap={2}
       gridRowGap={2}

From 11b913b7468ea4fedd3f2c08939cae0d31bdb311 Mon Sep 17 00:00:00 2001
From: Liam Fitzgerald <liam@urizen.co>
Date: Tue, 1 Sep 2020 02:17:47 +1000
Subject: [PATCH 25/58] chat: cite patps in DM title

---
 pkg/interface/src/views/apps/chat/components/new-dm.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/pkg/interface/src/views/apps/chat/components/new-dm.js b/pkg/interface/src/views/apps/chat/components/new-dm.js
index 5e69eaa6f7..3f2798b16b 100644
--- a/pkg/interface/src/views/apps/chat/components/new-dm.js
+++ b/pkg/interface/src/views/apps/chat/components/new-dm.js
@@ -3,7 +3,7 @@ import { Spinner } from '~/views/components/Spinner';
 import { Link } from 'react-router-dom';
 import { InviteSearch } from '~/views/components/InviteSearch';
 import urbitOb from 'urbit-ob';
-import { deSig } from '~/logic/lib/util';
+import { deSig, cite } from '~/logic/lib/util';
 
 export class NewDmScreen extends Component {
   constructor(props) {
@@ -91,7 +91,7 @@ export class NewDmScreen extends Component {
 
       const aud = state.ship !== window.ship ? [`~${state.ships[0]}`] : [];
 
-      let title = `~${window.ship} <-> ~${state.ships[0]}`;
+      let title = `${cite(window.ship)} <-> ${cite(state.ships[0])}`;
 
       if (state.title !== '') {
         title = state.title;

From b5df4e1d71579ac5138f6a070f62faa9e3fda846 Mon Sep 17 00:00:00 2001
From: Logan Allen <loganallc@gmail.com>
Date: Mon, 31 Aug 2020 15:45:52 -0500
Subject: [PATCH 26/58] interface: added remove operations to graph reducer

---
 .../src/logic/reducers/graph-update.js        | 117 ++++++++++--------
 1 file changed, 68 insertions(+), 49 deletions(-)

diff --git a/pkg/interface/src/logic/reducers/graph-update.js b/pkg/interface/src/logic/reducers/graph-update.js
index 5b8dbcb5cd..c8253f229c 100644
--- a/pkg/interface/src/logic/reducers/graph-update.js
+++ b/pkg/interface/src/logic/reducers/graph-update.js
@@ -1,20 +1,14 @@
 import _ from 'lodash';
 
 
-const OrderedMap = (arr = []) => {
-  let map = new Map(arr);
-//  map[Symbol.iterator] = function* () {
-//      yield* [...this.entries()].sort((a, b) => a[1] - b[1]);
-//  };
-  return map;
-};
-
 export const GraphReducer = (json, state) => {
   const data = _.get(json, 'graph-update', false);
   if (data) {
     keys(data, state);
     addGraph(data, state);
+    removeGraph(data, state);
     addNodes(data, state);
+    removeNodes(data, state);
   }
 };
 
@@ -25,7 +19,7 @@ const keys = (json, state) => {
       let resource = res.ship + '/' + res.name;
 
       if (!(resource in state.graphs)) {
-        state.graphs[resource] = new OrderedMap();
+        state.graphs[resource] = new Map();
       }
 
       return resource;
@@ -34,39 +28,16 @@ const keys = (json, state) => {
 };
 
 const addGraph = (json, state) => {
-  const data = _.get(json, 'add-graph', false);
-  if (data) {
-    if (!('graphs' in state)) {
-      state.graphs = {};
-    }
 
-    let resource = data.resource.ship + '/' + data.resource.name;
-    state.graphs[resource] = new OrderedMap();
-
-    for (let i in data.graph) {
-      let item = data.graph[i];
-      let index = item[0].split('/').slice(1).map((ind) => {
-        return parseInt(ind, 10);
-      });
-
-      if (index.length === 0) { break; }
-      
-      let node = _processNode(item[1]);
-      state.graphs[resource].set(index[index.length - 1], node);
-    }
-    state.graphKeys.add(resource);
-  }
-};
-
-const _processNode = (node) => {
+  const _processNode = (node) => {
     //  is empty
     if (!node.children) {
-      node.children = new OrderedMap();
+      node.children = new Map();
       return node;
     }
 
     //  is graph
-    let converted = new OrderedMap();
+    let converted = new Map();
     for (let i in node.children) {
       let item = node.children[i];
       let index = item[0].split('/').slice(1).map((ind) => {
@@ -82,8 +53,33 @@ const _processNode = (node) => {
     }
     node.children = converted;
     return node;
+  };
+
+  const data = _.get(json, 'add-graph', false);
+  if (data) {
+    if (!('graphs' in state)) {
+      state.graphs = {};
+    }
+
+    let resource = data.resource.ship + '/' + data.resource.name;
+    state.graphs[resource] = new Map();
+
+    for (let i in data.graph) {
+      let item = data.graph[i];
+      let index = item[0].split('/').slice(1).map((ind) => {
+        return parseInt(ind, 10);
+      });
+
+      if (index.length === 0) { break; }
+      
+      let node = _processNode(item[1]);
+      state.graphs[resource].set(index[index.length - 1], node);
+    }
+    state.graphKeys.add(resource);
   }
 
+};
+
 const removeGraph = (json, state) => {
   const data = _.get(json, 'remove-graph', false);
   if (data) {
@@ -96,6 +92,24 @@ const removeGraph = (json, state) => {
 };
 
 const addNodes = (json, state) => {
+  const _addNode = (graph, index, node) => {
+    //  set child of graph
+    if (index.length === 1) {
+      graph.set(index[0], node);
+      return graph;
+    }
+
+    // set parent of graph
+    let parNode = graph.get(index[0]);
+    if (!parNode) {
+      console.error('parent node does not exist, cannot add child');
+      return;
+    }
+    parNode.children = _addNode(parNode.children, index.slice(1), node);
+    graph.set(index[0], parNode);
+    return graph;
+  };
+
   const data = _.get(json, 'add-nodes', false);
   if (data) {
     if (!('graphs' in state)) { return; }
@@ -125,21 +139,26 @@ const addNodes = (json, state) => {
   }
 };
 
-const _addNode = (graph, index, node) => {
-  //  set child of graph
-  if (index.length === 1) {
-    graph.set(index[0], node);
-    return graph;
-  }
+const removeNodes = (json, state) => {
+  const data = _.get(json, 'remove-nodes', false);
+  if (data) {
+    console.log(data);
+    if (!(data.resource in state.graphs)) { return; }
 
-  // set parent of graph
-  let parNode = graph.get(index[0]);
-  if (!parNode) {
-    console.error('parent node does not exist, cannot add child');
-    return;
+    data.indices.forEach((index) => {
+      console.log(index);
+      if (index.split('/').length === 0) { return; }
+      let indexArr = index.split('/').slice(1).map((ind) => {
+        return parseInt(ind, 10);
+      });
+
+      if (indexArr.length === 1) {
+        state.graphs[data.resource].delete(indexArr[0]);
+      } else {
+        // TODO: recursive
+      }
+
+    });
   }
-  parNode.children = _addNode(parNode.children, index.slice(1), node);
-  graph.set(index[0], parNode);
-  return graph;
 };
 

From 97e84f96f24c52793c2502d8b2d9c43d91c5e4ec Mon Sep 17 00:00:00 2001
From: Matilde Park <matilde@tlon.io>
Date: Tue, 1 Sep 2020 14:43:05 -0400
Subject: [PATCH 27/58] leap: move leap to its own subfolder

---
 pkg/interface/src/views/App.js                        | 11 +++++------
 .../src/views/components/{ => leap}/Omnibox.js        |  0
 .../src/views/components/{ => leap}/OmniboxInput.js   |  0
 .../src/views/components/{ => leap}/OmniboxResult.js  |  0
 4 files changed, 5 insertions(+), 6 deletions(-)
 rename pkg/interface/src/views/components/{ => leap}/Omnibox.js (100%)
 rename pkg/interface/src/views/components/{ => leap}/OmniboxInput.js (100%)
 rename pkg/interface/src/views/components/{ => leap}/OmniboxResult.js (100%)

diff --git a/pkg/interface/src/views/App.js b/pkg/interface/src/views/App.js
index 497c5677b9..e72d0b1d16 100644
--- a/pkg/interface/src/views/App.js
+++ b/pkg/interface/src/views/App.js
@@ -1,7 +1,7 @@
 import { hot } from 'react-hot-loader/root';
 import 'react-hot-loader';
 import * as React from 'react';
-import { BrowserRouter as Router, Route, withRouter, Switch } from 'react-router-dom';
+import { BrowserRouter as Router, withRouter } from 'react-router-dom';
 import styled, { ThemeProvider, createGlobalStyle } from 'styled-components';
 import { sigil as sigiljs, stringRenderer } from 'urbit-sigil-js';
 import Helmet from 'react-helmet';
@@ -16,8 +16,7 @@ import dark from './themes/old-dark';
 
 import { Content } from './components/Content';
 import StatusBar from './components/StatusBar';
-import Omnibox from './components/Omnibox';
-import ErrorComponent from './components/Error';
+import Omnibox from './components/leap/Omnibox';
 
 import GlobalStore from '~/logic/store/store';
 import GlobalSubscription from '~/logic/subscription/global';
@@ -36,7 +35,7 @@ const Root = styled.div`
     background-size: cover;
     ` : p.background?.type === 'color' ? `
     background-color: ${p.background.color};
-    ` : ``
+    ` : ''
   }
   display: flex;
   flex-flow: column nowrap;
@@ -135,7 +134,8 @@ class App extends React.Component {
             ship={this.ship}
             api={this.api}
             subscription={this.subscription}
-            {...state} />
+            {...state}
+          />
           </Router>
         </Root>
       </ThemeProvider>
@@ -143,6 +143,5 @@ class App extends React.Component {
   }
 }
 
-
 export default process.env.NODE_ENV === 'production' ? App : hot(App);
 
diff --git a/pkg/interface/src/views/components/Omnibox.js b/pkg/interface/src/views/components/leap/Omnibox.js
similarity index 100%
rename from pkg/interface/src/views/components/Omnibox.js
rename to pkg/interface/src/views/components/leap/Omnibox.js
diff --git a/pkg/interface/src/views/components/OmniboxInput.js b/pkg/interface/src/views/components/leap/OmniboxInput.js
similarity index 100%
rename from pkg/interface/src/views/components/OmniboxInput.js
rename to pkg/interface/src/views/components/leap/OmniboxInput.js
diff --git a/pkg/interface/src/views/components/OmniboxResult.js b/pkg/interface/src/views/components/leap/OmniboxResult.js
similarity index 100%
rename from pkg/interface/src/views/components/OmniboxResult.js
rename to pkg/interface/src/views/components/leap/OmniboxResult.js

From 37786327f473ff9e9240ed5c74d30cc1088c8363 Mon Sep 17 00:00:00 2001
From: Matilde Park <matilde@tlon.io>
Date: Tue, 1 Sep 2020 16:01:29 -0400
Subject: [PATCH 28/58] leap: add "other" actions, prepopulate results

---
 pkg/interface/src/logic/lib/omnibox.js        | 17 ++++-
 .../src/views/components/leap/Omnibox.js      | 32 +++++++--
 .../views/components/leap/OmniboxResult.js    | 70 +++++++++++++------
 3 files changed, 86 insertions(+), 33 deletions(-)

diff --git a/pkg/interface/src/logic/lib/omnibox.js b/pkg/interface/src/logic/lib/omnibox.js
index 60dc95c01f..49bf777261 100644
--- a/pkg/interface/src/logic/lib/omnibox.js
+++ b/pkg/interface/src/logic/lib/omnibox.js
@@ -4,7 +4,8 @@ import defaultApps from './default-apps';
     ['commands', []],
     ['subscriptions', []],
     ['groups', []],
-    ['apps', []]
+    ['apps', []],
+    ['other', []]
   ]);
 
 // result schematic
@@ -41,8 +42,6 @@ const commandIndex = function () {
       }
     });
 
-  commands.push(result('Profile', '/~profile', 'profile', null));
-
   return commands;
 };
 
@@ -54,6 +53,9 @@ const appIndex = function (apps) {
     .filter((e) => {
       return apps[e]?.type?.basic;
     })
+    .sort((a,b) => {
+      return a.localeCompare(b);
+    })
     .map((e) => {
       const obj = result(
         apps[e].type.basic.title,
@@ -70,6 +72,14 @@ const appIndex = function (apps) {
   return applications;
 };
 
+const otherIndex = function() {
+  const other = [];
+  other.push(result('Profile and Settings', '/~profile/identity', 'profile', null));
+  other.push(result('Log Out', '/~/logout', 'logout', null));
+
+  return other;
+};
+
 export default function index(associations, apps) {
   // all metadata from all apps is indexed
   // into subscriptions and groups
@@ -118,6 +128,7 @@ export default function index(associations, apps) {
   indexes.set('subscriptions', subscriptions);
   indexes.set('groups', groups);
   indexes.set('apps', appIndex(apps));
+  indexes.set('other', otherIndex());
 
   return indexes;
 };
diff --git a/pkg/interface/src/views/components/leap/Omnibox.js b/pkg/interface/src/views/components/leap/Omnibox.js
index 624229d20a..190220f961 100644
--- a/pkg/interface/src/views/components/leap/Omnibox.js
+++ b/pkg/interface/src/views/components/leap/Omnibox.js
@@ -26,11 +26,15 @@ export class Omnibox extends Component {
     this.renderResults = this.renderResults.bind(this);
   }
 
-  componentDidUpdate(prevProps) {
+  componentDidUpdate(prevProps, prevState) {
     if (prevProps !== this.props) {
       this.setState({ index: index(this.props.associations, this.props.apps.tiles) });
     }
 
+    if (prevProps && (prevProps.apps !== this.props.apps) && (this.state.query === '')) {
+      this.setState({ results: this.initialResults() });
+    }
+
     if (prevProps && this.props.show && prevProps.show !== this.props.show) {
       Mousetrap.bind('escape', () => this.props.api.local.setOmnibox());
       document.addEventListener('mousedown', this.handleClickOutside);
@@ -48,7 +52,7 @@ export class Omnibox extends Component {
   }
 
   getSearchedCategories() {
-    return ['apps', 'commands', 'groups', 'subscriptions'];
+    return ['apps', 'commands', 'groups', 'subscriptions', 'other'];
   }
 
   control(evt) {
@@ -91,7 +95,18 @@ export class Omnibox extends Component {
   }
 
   initialResults() {
-    return new Map(this.getSearchedCategories().map(category => [category, []]));
+    return new Map(this.getSearchedCategories().map((category) => {
+      if (!this.state) {
+        return [category, []];
+      }
+      if (category === 'apps') {
+        return ['apps', this.state.index.get('apps')];
+      }
+      if (category === 'other') {
+        return ['other', this.state.index.get('other')];
+      }
+      return [category, []];
+    }));
   }
 
   navigate(link) {
@@ -202,10 +217,12 @@ export class Omnibox extends Component {
       {this.getSearchedCategories()
         .map(category => Object({ category, categoryResults: state.results.get(category) }))
         .filter(category => category.categoryResults.length > 0)
-        .map(({ category, categoryResults }, i) => (
-          <Box key={i} width='max(50vw, 300px)' maxWidth='600px'>
+        .map(({ category, categoryResults }, i) => {
+          const categoryTitle = (category === 'other')
+            ? null : <Text gray ml={2}>{category.charAt(0).toUpperCase() + category.slice(1)}</Text>;
+          return (<Box key={i} width='max(50vw, 300px)' maxWidth='600px'>
             <Rule borderTopWidth="0.5px" color="washedGray" />
-            <Text gray ml={2}>{category.charAt(0).toUpperCase() + category.slice(1)}</Text>
+            {categoryTitle}
             {categoryResults.map((result, i2) => (
               <OmniboxResult
                 key={i2}
@@ -218,7 +235,8 @@ export class Omnibox extends Component {
                 dark={props.dark} />
             ))}
           </Box>
-        ))
+        );
+      })
       }
     </Box>;
   }
diff --git a/pkg/interface/src/views/components/leap/OmniboxResult.js b/pkg/interface/src/views/components/leap/OmniboxResult.js
index 589ab12b75..c8ccda3ed3 100644
--- a/pkg/interface/src/views/components/leap/OmniboxResult.js
+++ b/pkg/interface/src/views/components/leap/OmniboxResult.js
@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import { Row, Icon, Text } from '@tlon/indigo-react';
 import defaultApps from '~/logic/lib/default-apps';
+import Sigil from '~/logic/lib/sigil';
 
 export class OmniboxResult extends Component {
   constructor(props) {
@@ -24,35 +25,58 @@ export class OmniboxResult extends Component {
       }
   }
 
-  setHover(boolean) {
-    this.setState({ hovered: boolean });
-  }
-  render() {
-    const { icon, text, subtext, link, navigate, selected, dark } = this.props;
-
-    let invertGraphic = {};
+  getIcon(icon, dark, selected, link) {
+    // graphicStyle is only necessary for pngs
+    //
+    //TODO can be removed after indigo-react 1.2
+    //which includes icons for apps
+    let graphicStyle = {};
 
     if (icon.toLowerCase() !== 'dojo') {
-      invertGraphic = (!dark && this.state.hovered) ||
-      selected === link ||
-      (dark && !(this.state.hovered || selected === link))
-        ? { filter: 'invert(1)', paddingTop: 2 }
-        : { filter: 'invert(0)', paddingTop: 2 };
-    } else {
-      invertGraphic =
-        (!dark && this.state.hovered) ||
+      graphicStyle = (!dark && this.state.hovered) ||
         selected === link ||
         (dark && !(this.state.hovered || selected === link))
-          ? { filter: 'invert(0)', paddingTop: 2 }
-          : { filter: 'invert(1)', paddingTop: 2 };
+        ? { filter: 'invert(1)' }
+        : { filter: 'invert(0)' };
+    } else {
+      graphicStyle =
+        (!dark && this.state.hovered) ||
+          selected === link ||
+          (dark && !(this.state.hovered || selected === link))
+          ? { filter: 'invert(0)' }
+          : { filter: 'invert(1)' };
     }
 
+    const iconFill = this.state.hovered || selected === link ? 'white' : 'black';
+    const sigilFill = this.state.hovered || selected === link ? '#3a8ff7' : '#ffffff';
+
     let graphic = <div />;
     if (defaultApps.includes(icon.toLowerCase()) || icon.toLowerCase() === 'links') {
-      graphic = <img className="mr2 v-mid" height="12" width="12" src={`/~landscape/img/${icon.toLowerCase()}.png`} style={invertGraphic} />;
+      graphic =
+        <img className="mr2 v-mid dib" height="16"
+          width="16" src={`/~landscape/img/${icon.toLowerCase()}.png`}
+          style={graphicStyle}
+        />;
+    } else if (icon === 'logout') {
+      graphic = <Icon display="inline-block" verticalAlign="middle" icon='ArrowWest' mr='2' size='16px' fill={iconFill} />;
+    } else if (icon === 'profile') {
+      graphic = <Sigil color={sigilFill} classes='dib v-mid mr2' ship={window.ship} size={16} />;
     } else {
-      graphic = <Icon verticalAlign="middle" mr={2} size="12px" />;
+      graphic = <Icon verticalAlign="middle" mr='2' size="16px" fill={iconFill} />;
     }
+
+    return graphic;
+  }
+
+  setHover(boolean) {
+    this.setState({ hovered: boolean });
+  }
+
+  render() {
+    const { icon, text, subtext, link, navigate, selected, dark } = this.props;
+
+    const graphic = this.getIcon(icon, dark, selected, link);
+
     return (
         <Row
           py='2'
@@ -72,18 +96,18 @@ export class OmniboxResult extends Component {
           {this.state.hovered || selected === link ? (
             <>
             {graphic}
-              <Text color='white' mr='1' style={{ 'flex-shrink': 0 }}>
+              <Text display="inline-block" verticalAlign="middle" color='white' mr='1' style={{ 'flex-shrink': 0 }}>
                 {text}
               </Text>
-              <Text pr='2' color='white' width='100%' textAlign='right'>
+            <Text pr='2' display="inline-block" verticalAlign="middle" color='white' width='100%' textAlign='right'>
                 {subtext}
               </Text>
             </>
           ) : (
             <>
             {graphic}
-              <Text mr='1' style={{ 'flex-shrink': 0 }}>{text}</Text>
-              <Text pr='2' gray width='100%' textAlign='right'>
+              <Text mr='1' display="inline-block" verticalAlign="middle" style={{ 'flex-shrink': 0 }}>{text}</Text>
+              <Text pr='2' display="inline-block" verticalAlign="middle" gray width='100%' textAlign='right'>
                 {subtext}
               </Text>
             </>

From e2df23eca65731982e59d26ca045ff77b1615a51 Mon Sep 17 00:00:00 2001
From: Matilde Park <matilde@tlon.io>
Date: Tue, 1 Sep 2020 16:08:50 -0400
Subject: [PATCH 29/58] leap: show group's name, not the host ship

---
 pkg/interface/src/logic/lib/omnibox.js             | 5 +++--
 pkg/interface/src/views/components/leap/Omnibox.js | 4 +---
 2 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/pkg/interface/src/logic/lib/omnibox.js b/pkg/interface/src/logic/lib/omnibox.js
index 49bf777261..ee616ddc93 100644
--- a/pkg/interface/src/logic/lib/omnibox.js
+++ b/pkg/interface/src/logic/lib/omnibox.js
@@ -1,4 +1,5 @@
 import defaultApps from './default-apps';
+import { cite } from '~/logic/lib/util';
 
   const indexes = new Map([
     ['commands', []],
@@ -109,7 +110,7 @@ export default function index(associations, apps) {
             title,
             `/~${app}${each['app-path']}`,
             app.charAt(0).toUpperCase() + app.slice(1),
-            shipStart.slice(0, shipStart.indexOf('/'))
+            cite(shipStart.slice(0, shipStart.indexOf('/')))
           );
           groups.push(obj);
         } else {
@@ -117,7 +118,7 @@ export default function index(associations, apps) {
             title,
             `/~${each['app-name']}/join${each['app-path']}`,
             app.charAt(0).toUpperCase() + app.slice(1),
-            shipStart.slice(0, shipStart.indexOf('/'))
+            (associations?.contacts?.[each['group-path']]?.metadata?.title || null)
           );
           subscriptions.push(obj);
         }
diff --git a/pkg/interface/src/views/components/leap/Omnibox.js b/pkg/interface/src/views/components/leap/Omnibox.js
index 190220f961..4a4b484ace 100644
--- a/pkg/interface/src/views/components/leap/Omnibox.js
+++ b/pkg/interface/src/views/components/leap/Omnibox.js
@@ -6,8 +6,6 @@ import Mousetrap from 'mousetrap';
 import OmniboxInput from './OmniboxInput';
 import OmniboxResult from './OmniboxResult';
 
-import { cite } from '~/logic/lib/util';
-
 export class Omnibox extends Component {
   constructor(props) {
     super(props);
@@ -228,7 +226,7 @@ export class Omnibox extends Component {
                 key={i2}
                 icon={result.app}
                 text={result.title}
-                subtext={cite(result.host)}
+                subtext={result.host}
                 link={result.link}
                 navigate={() => this.navigate(result.link)}
                 selected={this.state.selected}

From 24753dd0c89c083820ba437da6d7f0f8dc986437 Mon Sep 17 00:00:00 2001
From: Matilde Park <matilde@tlon.io>
Date: Tue, 1 Sep 2020 16:23:42 -0400
Subject: [PATCH 30/58] leap: better compensate for long titles

---
 .../views/components/leap/OmniboxResult.js    | 35 ++++++++++++++++---
 1 file changed, 31 insertions(+), 4 deletions(-)

diff --git a/pkg/interface/src/views/components/leap/OmniboxResult.js b/pkg/interface/src/views/components/leap/OmniboxResult.js
index c8ccda3ed3..89dde65f1f 100644
--- a/pkg/interface/src/views/components/leap/OmniboxResult.js
+++ b/pkg/interface/src/views/components/leap/OmniboxResult.js
@@ -96,18 +96,45 @@ export class OmniboxResult extends Component {
           {this.state.hovered || selected === link ? (
             <>
             {graphic}
-              <Text display="inline-block" verticalAlign="middle" color='white' mr='1' style={{ 'flex-shrink': 0 }}>
+              <Text
+                display="inline-block"
+                verticalAlign="middle"
+                color='white'
+                maxWidth="60%"
+                style={{ 'flex-shrink': 0 }}
+                mr='1'>
                 {text}
               </Text>
-            <Text pr='2' display="inline-block" verticalAlign="middle" color='white' width='100%' textAlign='right'>
+            <Text pr='2'
+            display="inline-block"
+            verticalAlign="middle"
+            color='white'
+            width='100%'
+            textAlign='right'
+            >
                 {subtext}
               </Text>
             </>
           ) : (
             <>
             {graphic}
-              <Text mr='1' display="inline-block" verticalAlign="middle" style={{ 'flex-shrink': 0 }}>{text}</Text>
-              <Text pr='2' display="inline-block" verticalAlign="middle" gray width='100%' textAlign='right'>
+              <Text
+                mr='1'
+                display="inline-block"
+                verticalAlign="middle"
+                maxWidth="60%"
+                style={{ 'flex-shrink': 0 }}
+              >
+              {text}
+            </Text>
+              <Text
+                pr='2'
+                display="inline-block"
+                verticalAlign="middle"
+                gray
+                width='100%'
+                textAlign='right'
+              >
                 {subtext}
               </Text>
             </>

From baf2226e3dc5e81bff991e02c509307883ae32e8 Mon Sep 17 00:00:00 2001
From: Tyler Brown Cifu Shuster <tyler@fivepaths.com>
Date: Tue, 1 Sep 2020 17:17:28 -0700
Subject: [PATCH 31/58] chat: break up inline code while maintaining multiline
 codeblocks

---
 pkg/interface/src/views/apps/chat/css/custom.css | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/pkg/interface/src/views/apps/chat/css/custom.css b/pkg/interface/src/views/apps/chat/css/custom.css
index 052fb06282..6294427bd0 100644
--- a/pkg/interface/src/views/apps/chat/css/custom.css
+++ b/pkg/interface/src/views/apps/chat/css/custom.css
@@ -252,12 +252,13 @@ blockquote {
     font-family: 'Inter';
 }
 
-code {
-  white-space: normal;
+pre, code {
+  background-color: var(--light-gray);
 }
 
-code, pre.code {
-  background-color: var(--light-gray);
+pre code {
+  background-color: transparent;
+  white-space: pre-wrap;
 }
 
 code, .code, .chat.code .react-codemirror2 .CodeMirror * {

From 630b79ad372fe0dcd183a00550265eca11bcca71 Mon Sep 17 00:00:00 2001
From: Tyler Brown Cifu Shuster <tyler@fivepaths.com>
Date: Sun, 23 Aug 2020 21:40:31 -0700
Subject: [PATCH 32/58] links: added s3 integration

---
 pkg/interface/src/logic/store/links.js        |   4 +
 .../apps/chat/components/lib/chat-input.js    |  52 +++++----
 .../apps/chat/components/lib/s3-upload.js     | 105 ------------------
 .../groups/components/lib/contact-card.js     |  12 +-
 pkg/interface/src/views/apps/links/app.js     |   3 +-
 .../apps/links/components/lib/link-submit.js  | 103 ++++++++++-------
 .../views/apps/links/components/links-list.js |   2 +-
 .../src/views/apps/links/components/new.js    |   5 +-
 pkg/interface/src/views/components/Spinner.js |   2 +-
 .../lib => components}/s3-upload.js           |  72 +++++++-----
 10 files changed, 159 insertions(+), 201 deletions(-)
 delete mode 100644 pkg/interface/src/views/apps/chat/components/lib/s3-upload.js
 rename pkg/interface/src/views/{apps/groups/components/lib => components}/s3-upload.js (54%)

diff --git a/pkg/interface/src/logic/store/links.js b/pkg/interface/src/logic/store/links.js
index d8d7fd7dd4..eb395603fa 100644
--- a/pkg/interface/src/logic/store/links.js
+++ b/pkg/interface/src/logic/store/links.js
@@ -6,6 +6,7 @@ import InviteReducer from '../reducers/invite-update';
 import LinkReducer from '../reducers/link-update';
 import ListenReducer from '../reducers/listen-update';
 import LocalReducer from '../reducers/local';
+import S3Reducer from '../reducers/s3-update';
 
 import BaseStore from './base';
 
@@ -21,6 +22,7 @@ export default class LinksStore extends BaseStore {
     this.localReducer = new LocalReducer();
     this.linkReducer = new LinkReducer();
     this.listenReducer = new ListenReducer();
+    this.s3Reducer = new S3Reducer();
   }
 
   initialState() {
@@ -37,6 +39,7 @@ export default class LinksStore extends BaseStore {
       comments: {},
       seen: {},
       permissions: {},
+      s3: {},
       sidebarShown: true
     };
   }
@@ -50,6 +53,7 @@ export default class LinksStore extends BaseStore {
     this.localReducer.reduce(data, this.state);
     this.linkReducer.reduce(data, this.state);
     this.listenReducer.reduce(data, this.state);
+    this.s3Reducer.reduce(data, this.state);
   }
 }
 
diff --git a/pkg/interface/src/views/apps/chat/components/lib/chat-input.js b/pkg/interface/src/views/apps/chat/components/lib/chat-input.js
index c4919cefce..1cc8990422 100644
--- a/pkg/interface/src/views/apps/chat/components/lib/chat-input.js
+++ b/pkg/interface/src/views/apps/chat/components/lib/chat-input.js
@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import ChatEditor from './chat-editor';
-import { S3Upload } from './s3-upload'
+import { S3Upload } from '~/views/components/s3-upload'
 ;
 import { uxToHex } from '~/logic/lib/util';
 import { Sigil } from '~/logic/lib/sigil';
@@ -221,10 +221,10 @@ export class ChatInput extends Component {
            style={{ flexGrow: 1 }}>
         <div className="fl"
              style={{
-               marginTop: 6,
-               flexBasis: 24,
-               height: 24
-             }}>
+                marginTop: 6,
+                flexBasis: 24,
+                height: 24
+              }}>
           {avatar}
         </div>
         <ChatEditor
@@ -235,32 +235,40 @@ export class ChatInput extends Component {
           placeholder='Message...' />
         <div className="ml2 mr2"
              style={{
-               height: '16px',
-               width: '16px',
-               flexBasis: 16,
-               marginTop: 10
-             }}>
+                height: '16px',
+                width: '16px',
+                flexBasis: 16,
+                marginTop: 10
+              }}>
           <S3Upload
             configuration={props.s3.configuration}
             credentials={props.s3.credentials}
             uploadSuccess={this.uploadSuccess.bind(this)}
             uploadError={this.uploadError.bind(this)}
-          />
+            accept="image/*"
+          >
+            <img
+              className="invert-d"
+              src="/~chat/img/ImageUpload.png"
+              width="16"
+              height="16"
+            />
+          </S3Upload>
         </div>
         <div style={{
-               height: '16px',
-               width: '16px',
-               flexBasis: 16,
-               marginTop: 10
+            height: '16px',
+            width: '16px',
+            flexBasis: 16,
+            marginTop: 10
           }}>
           <img style={{
-                 filter: state.inCodeMode && 'invert(100%)',
-                 height: '14px',
-                 width: '14px',
-               }}
-               onClick={this.toggleCode}
-               src="/~chat/img/CodeEval.png"
-               className="contrast-10-d bg-white bg-none-d ba b--gray1-d br1" />
+              filter: state.inCodeMode && 'invert(100%)',
+              height: '14px',
+              width: '14px',
+            }}
+            onClick={this.toggleCode}
+            src="/~chat/img/CodeEval.png"
+            className="contrast-10-d bg-white bg-none-d ba b--gray1-d br1" />
         </div>
       </div>
     );
diff --git a/pkg/interface/src/views/apps/chat/components/lib/s3-upload.js b/pkg/interface/src/views/apps/chat/components/lib/s3-upload.js
deleted file mode 100644
index b497413cfd..0000000000
--- a/pkg/interface/src/views/apps/chat/components/lib/s3-upload.js
+++ /dev/null
@@ -1,105 +0,0 @@
-import React, { Component } from 'react';
-import S3Client from '~/logic/lib/s3';
-
-export class S3Upload extends Component {
-  constructor(props) {
-    super(props);
-    this.s3 = new S3Client();
-    this.setCredentials(props.credentials, props.configuration);
-    this.inputRef = React.createRef();
-  }
-
-  isReady(creds, config) {
-    return (
-      Boolean(creds) &&
-      'endpoint' in creds &&
-      'accessKeyId' in creds &&
-      'secretAccessKey' in creds &&
-      creds.endpoint !== '' &&
-      creds.accessKeyId !== '' &&
-      creds.secretAccessKey !== '' &&
-      Boolean(config) &&
-      'currentBucket' in config &&
-      config.currentBucket !== ''
-    );
-  }
-
-  componentDidUpdate(prevProps) {
-    const { props } = this;
-    this.setCredentials(props.credentials, props.configuration);
-  }
-
-  setCredentials(credentials, configuration) {
-    if (!this.isReady(credentials, configuration)) {
- return;
-}
-    this.s3.setCredentials(
-      credentials.endpoint,
-      credentials.accessKeyId,
-      credentials.secretAccessKey
-    );
-  }
-
-  getFileUrl(endpoint, filename) {
-    return endpoint + '/' + filename;
-  }
-
-  onChange() {
-    const { props } = this;
-    if (!this.inputRef.current) {
- return;
-}
-    const files = this.inputRef.current.files;
-    if (files.length <= 0) {
- return;
-}
-
-    const file = files.item(0);
-    const bucket = props.configuration.currentBucket;
-
-    this.s3.upload(bucket, file.name, file).then((data) => {
-      if (!data || !('Location' in data)) {
-        return;
-      }
-      this.props.uploadSuccess(data.Location);
-    }).catch((err) => {
-      console.error(err);
-      this.props.uploadError(err);
-    });
-  }
-
-  onClick() {
-    if (!this.inputRef.current) {
-      return;
-    }
-    this.inputRef.current.click();
-  }
-
-  render() {
-    const { props } = this;
-    if (!this.isReady(props.credentials, props.configuration)) {
-      return <div></div>;
-    } else {
-      const classes = props.className ?
-        'pointer ' + props.className : 'pointer';
-      return (
-        <div className={classes}>
-          <input className="dn"
-                 type="file"
-                 id="fileElement"
-                 ref={this.inputRef}
-                 accept="image/*"
-                 onChange={this.onChange.bind(this)}
-          />
-          <img className="invert-d"
-               src="/~chat/img/ImageUpload.png"
-               width="16"
-               height="16"
-               onClick={this.onClick.bind(this)}
-          />
-        </div>
-      );
-    }
-  }
-}
-
diff --git a/pkg/interface/src/views/apps/groups/components/lib/contact-card.js b/pkg/interface/src/views/apps/groups/components/lib/contact-card.js
index 572f2f2f06..40d44ae690 100644
--- a/pkg/interface/src/views/apps/groups/components/lib/contact-card.js
+++ b/pkg/interface/src/views/apps/groups/components/lib/contact-card.js
@@ -5,7 +5,7 @@ import { Link } from 'react-router-dom';
 import { EditElement } from './edit-element';
 import { Spinner } from '~/views/components/Spinner';
 import { uxToHex } from '~/logic/lib/util';
-import { S3Upload } from './s3-upload';
+import { S3Upload } from '~/views/components/s3-upload';
 
 export class ContactCard extends Component {
   constructor(props) {
@@ -492,7 +492,15 @@ export class ContactCard extends Component {
               credentials={props.s3.credentials}
               uploadSuccess={this.uploadSuccess.bind(this)}
               uploadError={this.uploadError.bind(this)}
-            />
+              accept="image/*"
+            >
+              <img
+                className="invert-d"
+                src="/~chat/img/ImageUpload.png"
+                width="32"
+                height="32"
+              />
+            </S3Upload>
           </span>
           <EditElement
             className="fr w-80"
diff --git a/pkg/interface/src/views/apps/links/app.js b/pkg/interface/src/views/apps/links/app.js
index 73b134a9e3..718a09363a 100644
--- a/pkg/interface/src/views/apps/links/app.js
+++ b/pkg/interface/src/views/apps/links/app.js
@@ -59,7 +59,7 @@ export class LinksApp extends Component {
       props.invites : {};
 
     const listening = props.linkListening;
-    const { api, sidebarShown, hideAvatars, hideNicknames } = this.props;
+    const { api, sidebarShown, hideAvatars, hideNicknames, s3 } = this.props;
 
     return (
       <>
@@ -256,6 +256,7 @@ export class LinksApp extends Component {
                     api={api}
                     hideNicknames={hideNicknames}
                     hideAvatars={hideAvatars}
+                    s3={s3}
                   />
                   </Skeleton>
                 );
diff --git a/pkg/interface/src/views/apps/links/components/lib/link-submit.js b/pkg/interface/src/views/apps/links/components/lib/link-submit.js
index 780df3d88e..042ce804e5 100644
--- a/pkg/interface/src/views/apps/links/components/lib/link-submit.js
+++ b/pkg/interface/src/views/apps/links/components/lib/link-submit.js
@@ -1,5 +1,8 @@
 import React, { Component } from 'react';
+
+import { S3Upload } from '~/views/components/s3-upload';
 import { Spinner } from '~/views/components/Spinner';
+import { Icon } from "@tlon/indigo-react";
 
 export class LinkSubmit extends Component {
   constructor() {
@@ -60,23 +63,29 @@ export class LinkSubmit extends Component {
     this.setState({ linkTitle: event.target.value });
   }
 
+  uploadSuccess(url) {
+    this.setState({ linkValue: url });
+    this.setLinkValid(url);
+  }
+
+  uploadError(error) {
+    //  no-op for now
+  }
+
   render() {
+    console.log('s3', this.props.s3);
     const activeClasses = (this.state.linkValid && !this.state.disabled)
       ? 'green2 pointer' : 'gray2';
 
     const focus = (this.state.submitFocus)
       ? 'b--black b--white-d'
       : 'b--gray4 b--gray2-d';
-
+    
     return (
       <div className={'relative ba br1 w-100 mb6 ' + focus}>
-        <textarea
-          className="pl2 bg-gray0-d white-d w-100 f8"
-          style={{
-            resize: 'none',
-            height: 40,
-            paddingTop: 10
-          }}
+        <input
+          type="url"
+          className="pl2 bg-gray0-d white-d w-100 f8 pt2"
           placeholder="Paste link here"
           onChange={this.setLinkValue}
           onBlur={() => this.setState({ submitFocus: false })}
@@ -91,41 +100,51 @@ export class LinkSubmit extends Component {
           }}
           value={this.state.linkValue}
         />
-        <textarea
-          className="pl2 bg-gray0-d white-d w-100 f8"
-          style={{
-            resize: 'none',
-            height: 40,
-            paddingTop: 16
-          }}
-          placeholder="Enter title"
-          onChange={this.setLinkTitle}
-          onBlur={() => this.setState({ submitFocus: false })}
-          onFocus={() => this.setState({ submitFocus: true })}
-          spellCheck="false"
-          rows={1}
-          onKeyPress={(e) => {
-            if (e.key === 'Enter') {
-              e.preventDefault();
-              this.onClickPost();
+        <div className="flex flex-auto mt2 pt2">
+          <input
+            type="text"
+            className="pl2 bg-gray0-d white-d w-100 f8"
+            style={{
+              resize: 'none',
+              height: 40
+            }}
+            placeholder="Enter title"
+            onChange={this.setLinkTitle}
+            onBlur={() => this.setState({ submitFocus: false })}
+            onFocus={() => this.setState({ submitFocus: true })}
+            spellCheck="false"
+            rows={1}
+            onKeyPress={(e) => {
+              if (e.key === 'Enter') {
+                e.preventDefault();
+                this.onClickPost();
+              }
+            }}
+            value={this.state.linkTitle}
+          />
+          {!this.state.disabled ? <S3Upload
+            configuration={this.props.s3.configuration}
+            credentials={this.props.s3.credentials}
+            uploadSuccess={this.uploadSuccess.bind(this)}
+            uploadError={this.uploadError.bind(this)}
+            className="nowrap flex items-center pr2 h-100"
+          ><span className="green2 f8">Upload File</span></S3Upload> : null}
+          {!this.state.disabled ? <button
+            className={
+              'bg-gray0-d f8 flex-shrink-0 pr2 ' + activeClasses
             }
-          }}
-          value={this.state.linkTitle}
-        />
-        <button
-          className={
-            'absolute bg-gray0-d f8 ml2 flex-shrink-0 ' + activeClasses
-          }
-          disabled={!this.state.linkValid || this.state.disabled}
-          onClick={this.onClickPost.bind(this)}
-          style={{
-            bottom: 12,
-            right: 8
-          }}
-        >
-          Post
-        </button>
-        <Spinner awaiting={this.state.disabled} classes="mt3 absolute right-0" text="Posting to collection..." />
+            disabled={!this.state.linkValid || this.state.disabled}
+            onClick={this.onClickPost.bind(this)}
+            style={{
+              bottom: 12,
+              right: 8
+            }}
+          >
+            Post
+          </button> : null}
+          <Spinner awaiting={this.state.disabled} classes="nowrap flex items-center pr2" style={{flex: '1 1 14rem'}} text="Posting to collection..." />
+        </div>
+        
       </div>
     ) ;
   }
diff --git a/pkg/interface/src/views/apps/links/components/links-list.js b/pkg/interface/src/views/apps/links/components/links-list.js
index ca2d6c8459..70912f7574 100644
--- a/pkg/interface/src/views/apps/links/components/links-list.js
+++ b/pkg/interface/src/views/apps/links/components/links-list.js
@@ -139,7 +139,7 @@ export class Links extends Component {
         <div className="w-100 mt6 flex justify-center overflow-y-scroll ph4 pb4">
           <div className="w-100 mw7">
             <div className="flex">
-              <LinkSubmit resourcePath={props.resourcePath} api={this.props.api} />
+              <LinkSubmit resourcePath={props.resourcePath} api={this.props.api} s3={props.s3} />
             </div>
             <div className="pb4">
             {LinkList}
diff --git a/pkg/interface/src/views/apps/links/components/new.js b/pkg/interface/src/views/apps/links/components/new.js
index 3d32dff262..c99d6140a7 100644
--- a/pkg/interface/src/views/apps/links/components/new.js
+++ b/pkg/interface/src/views/apps/links/components/new.js
@@ -1,9 +1,10 @@
 import React, { Component } from 'react';
+import urbitOb from 'urbit-ob';
+import { Link } from 'react-router-dom';
+
 import { InviteSearch } from '~/views/components/InviteSearch';
 import { Spinner } from '~/views/components/Spinner';
-import { Link } from 'react-router-dom';
 import { makeRoutePath, deSig } from '~/logic/lib/util';
-import urbitOb from 'urbit-ob';
 
 export class NewScreen extends Component {
   constructor(props) {
diff --git a/pkg/interface/src/views/components/Spinner.js b/pkg/interface/src/views/components/Spinner.js
index d818fb03f3..7ee4a67ce7 100644
--- a/pkg/interface/src/views/components/Spinner.js
+++ b/pkg/interface/src/views/components/Spinner.js
@@ -8,7 +8,7 @@ export class Spinner extends Component {
 
     if (awaiting) {
       return (
-        <div className={classes + ' z-2 bg-white bg-gray0-d white-d'}>
+        <div className={classes + ' z-2 bg-white bg-gray0-d white-d flex'}>
           <img className="invert-d spin-active v-mid"
             src="/~landscape/img/Spinner.png"
             width={16}
diff --git a/pkg/interface/src/views/apps/groups/components/lib/s3-upload.js b/pkg/interface/src/views/components/s3-upload.js
similarity index 54%
rename from pkg/interface/src/views/apps/groups/components/lib/s3-upload.js
rename to pkg/interface/src/views/components/s3-upload.js
index b94b14728a..4cb37bd6d0 100644
--- a/pkg/interface/src/views/apps/groups/components/lib/s3-upload.js
+++ b/pkg/interface/src/views/components/s3-upload.js
@@ -1,10 +1,16 @@
 import React, { Component } from 'react'
+import { Icon } from "@tlon/indigo-react";
+
 import S3Client from '~/logic/lib/s3';
+import { Spinner } from './Spinner';
 
 export class S3Upload extends Component {
 
   constructor(props) {
     super(props);
+    this.state = {
+      isUploading: false
+    };
     this.s3 = new S3Client();
     this.setCredentials(props.credentials, props.configuration);
     this.inputRef = React.createRef();
@@ -52,15 +58,22 @@ export class S3Upload extends Component {
     let file = files.item(0);
     let bucket = props.configuration.currentBucket;
 
-    this.s3.upload(bucket, file.name, file).then((data) => {
-      if (!data || !('Location' in data)) {
-        return;
-      }
-      this.props.uploadSuccess(data.Location);
-    }).catch((err) => {
-      console.error(err);
-      this.props.uploadError(err);
-    });
+    this.setState({ isUploading: true });
+
+    this.s3.upload(bucket, file.name, file)
+      .then((data) => {
+        if (!data || !('Location' in data)) {
+          return;
+        }
+        this.props.uploadSuccess(data.Location);
+      })
+      .catch((err) => {
+        console.error(err);
+        this.props.uploadError(err);
+      })
+      .finally(() => {
+        this.setState({ isUploading: false });
+      });
   }
 
   onClick() {
@@ -69,25 +82,34 @@ export class S3Upload extends Component {
   }
 
   render() {
-    const { props } = this;
-    if (!this.isReady(props.credentials, props.configuration)) {
+    const {
+      credentials,
+      configuration,
+      className,
+      accept = '*',
+      children = false
+    } = this.props;
+    if (!this.isReady(credentials, configuration)) {
       return <div></div>;
     } else {
-      let classes = !!props.className ?
-        "pointer " + props.className : "pointer";
+      let classes = !!className
+        ? "pointer " + className
+        : "pointer";
+      const display = children || <Icon icon='ArrowNorth' />;
       return (
-        <div className={classes}>
-          <input className="dn"
-                 type="file"
-                 id="fileElement"
-                 ref={this.inputRef}
-                 accept="image/*"
-                 onChange={this.onChange.bind(this)} />
-          <img className="invert-d"
-               src="/~landscape/img/ImageUpload.png"
-               width="32"
-               height="32"
-               onClick={this.onClick.bind(this)} />
+        <div>
+          <input
+            className="dn"
+            type="file"
+            id="fileElement"
+            ref={this.inputRef}
+            accept={accept}
+            onChange={this.onChange.bind(this)} />
+          {this.state.isUploading
+            ? <Spinner awaiting={true} classes={className} />
+            : <span className={`pointer ${className}`} onClick={this.onClick.bind(this)}>{display}</span>
+          }
+          
         </div>
       );
     }

From 003537e80e33cc3d3edffc69418e70efae4374da Mon Sep 17 00:00:00 2001
From: Liam Fitzgerald <liam@urizen.co>
Date: Thu, 3 Sep 2020 10:13:29 +1000
Subject: [PATCH 33/58] lib/hooks: remove reference to scrying

---
 pkg/arvo/lib/pull-hook.hoon | 8 ++++----
 pkg/arvo/lib/push-hook.hoon | 8 ++++----
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/pkg/arvo/lib/pull-hook.hoon b/pkg/arvo/lib/pull-hook.hoon
index 5afd0275d7..5302ad1d5e 100644
--- a/pkg/arvo/lib/pull-hook.hoon
+++ b/pkg/arvo/lib/pull-hook.hoon
@@ -5,10 +5,10 @@
 ::   
 ::   ## Interfacing notes:
 ::
-::   The inner door may interact with the library by producing cards or
-::   scrying. Do not pass any cards on a wire beginning with /helper as
-::   these wires are reserved by this library. Any watches/pokes/peeks
-::   not listed below will be routed to the inner door.
+::   The inner door may interact with the library by producing cards.
+::   Do not pass any cards on a wire beginning with /helper as these
+::   wires are reserved by this library. Any watches/pokes/peeks not
+::   listed below will be routed to the inner door.
 ::
 ::   ##  Subscription paths
 ::
diff --git a/pkg/arvo/lib/push-hook.hoon b/pkg/arvo/lib/push-hook.hoon
index 1ddc07a76a..bbe6f73c66 100644
--- a/pkg/arvo/lib/push-hook.hoon
+++ b/pkg/arvo/lib/push-hook.hoon
@@ -6,10 +6,10 @@
 ::
 ::   ## Interfacing notes:
 ::
-::   The inner door may interact with the library by producing cards or
-::   scrying. Do not pass any cards on a wire beginning with /helper as
-::   these wires are reserved by this library. Any watches/pokes/peeks
-::   not listed below will be routed to the inner door.
+::   The inner door may interact with the library by producing cards. 
+::   Do not pass any cards on a wire beginning with /helper as these
+::   wires are reserved by this library. Any watches/pokes/peeks not
+::   listed below will be routed to the inner door.
 ::
 ::   ##  Subscription paths
 ::

From 8729020fd3e88c25dacbab166b1d41a484be2389 Mon Sep 17 00:00:00 2001
From: Tyler Brown Cifu Shuster <tyler@fivepaths.com>
Date: Thu, 27 Aug 2020 20:15:47 -0700
Subject: [PATCH 34/58] interface: added oembed parser

---
 pkg/interface/package-lock.json               |  21 +++
 pkg/interface/package.json                    |   2 +
 pkg/interface/src/logic/api/local.ts          |  12 +-
 pkg/interface/src/logic/reducers/local.ts     |  11 +-
 pkg/interface/src/logic/store/store.ts        |   6 +
 pkg/interface/src/logic/store/type.ts         |   3 +-
 pkg/interface/src/types/local-update.ts       |  34 ++--
 pkg/interface/src/views/apps/chat/app.tsx     |   4 +-
 .../src/views/apps/chat/components/chat.tsx   |   3 +
 .../apps/chat/components/lib/chat-message.tsx |   4 +-
 .../apps/chat/components/lib/chat-window.tsx  |   1 +
 .../apps/chat/components/lib/content/url.js   | 106 -------------
 .../chat/components/lib/message-content.js    |  15 +-
 .../views/apps/chat/components/lib/message.js |   4 +-
 .../src/views/apps/chat/css/custom.css        |  25 +--
 pkg/interface/src/views/apps/links/app.js     |   3 +-
 .../components/lib/link-detail-preview.js     |  72 ++-------
 .../src/views/apps/links/components/link.js   |   1 +
 .../profile/components/lib/RemoteContent.tsx  |  94 +++++++++++
 .../apps/profile/components/settings.tsx      |   3 +
 .../src/views/components/RemoteContent.tsx    | 148 ++++++++++++++++++
 21 files changed, 361 insertions(+), 211 deletions(-)
 delete mode 100644 pkg/interface/src/views/apps/chat/components/lib/content/url.js
 create mode 100644 pkg/interface/src/views/apps/profile/components/lib/RemoteContent.tsx
 create mode 100644 pkg/interface/src/views/components/RemoteContent.tsx

diff --git a/pkg/interface/package-lock.json b/pkg/interface/package-lock.json
index 921fcbadf0..b3516b8918 100644
--- a/pkg/interface/package-lock.json
+++ b/pkg/interface/package-lock.json
@@ -6807,6 +6807,11 @@
         "tslib": "^1.10.0"
       }
     },
+    "node-fetch": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.0.tgz",
+      "integrity": "sha512-8dG4H5ujfvFiqDmVu9fQ5bOHUC15JMjMY/Zumv26oOvvVJjM67KF8koCWIabKQ1GJIa9r2mMZscBq/TbdOcmNA=="
+    },
     "node-forge": {
       "version": "0.9.0",
       "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-0.9.0.tgz",
@@ -7058,6 +7063,14 @@
       "integrity": "sha512-PX1wu0AmAdPqOL1mWhqmlOd8kOIZQwGZw6rh7uby9fTc5lhaOWFLX3I6R1hrF9k3zUY40e6igsLGkDXK92LJNg==",
       "dev": true
     },
+    "oembed-parser": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/oembed-parser/-/oembed-parser-1.4.1.tgz",
+      "integrity": "sha512-1KqnfrXF3TiAQhJ9+vv3dEtMhPSVSOT9D9XPqLjEtaQg5liPc3LQ65YjgKHo7Z/YY/kmZ1PDb5gMcOxxCPPdBA==",
+      "requires": {
+        "node-fetch": "^2.6.0"
+      }
+    },
     "omit-deep": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/omit-deep/-/omit-deep-0.3.0.tgz",
@@ -7937,6 +7950,14 @@
         "xtend": "^4.0.1"
       }
     },
+    "react-oembed-container": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/react-oembed-container/-/react-oembed-container-1.0.0.tgz",
+      "integrity": "sha512-YppvCDgxZkn6qgwAIpxRtmMtxaMpau8yQhm8nzmH7yHpDapmHxzakXvQke5qPfmdYyYW4CsKDfVfGoX14NvQkw==",
+      "requires": {
+        "prop-types": "^15.6.0"
+      }
+    },
     "react-router": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.1.2.tgz",
diff --git a/pkg/interface/package.json b/pkg/interface/package.json
index 65a6a0181c..94a4caff76 100644
--- a/pkg/interface/package.json
+++ b/pkg/interface/package.json
@@ -20,6 +20,7 @@
     "moment": "^2.20.1",
     "mousetrap": "^1.6.5",
     "mousetrap-global-bind": "^1.1.0",
+    "oembed-parser": "^1.4.1",
     "prop-types": "^15.7.2",
     "react": "^16.5.2",
     "react-codemirror2": "^6.0.1",
@@ -29,6 +30,7 @@
     "react-dom": "^16.8.6",
     "react-helmet": "^6.1.0",
     "react-markdown": "^4.3.1",
+    "react-oembed-container": "^1.0.0",
     "react-router-dom": "^5.0.0",
     "react-window": "^1.8.5",
     "remark-disable-tokenizers": "^1.0.24",
diff --git a/pkg/interface/src/logic/api/local.ts b/pkg/interface/src/logic/api/local.ts
index 976f337c5a..3b874e060d 100644
--- a/pkg/interface/src/logic/api/local.ts
+++ b/pkg/interface/src/logic/api/local.ts
@@ -1,6 +1,6 @@
 import BaseApi from "./base";
 import { StoreState } from "../store/type";
-import { BackgroundConfig } from "../types/local-update";
+import { BackgroundConfig, LocalUpdateRemoteContentPolicy } from "../types/local-update";
 
 export default class LocalApi extends BaseApi<StoreState> {
   getBaseHash() {
@@ -69,6 +69,16 @@ export default class LocalApi extends BaseApi<StoreState> {
     });
   }
 
+  setRemoteContentPolicy(policy: LocalUpdateRemoteContentPolicy) {
+    this.store.handleEvent({
+      data: {
+        local: {
+          remoteContentPolicy: policy
+        }
+      }
+    });
+  }
+
   dehydrate() {
     this.store.dehydrate();
   }
diff --git a/pkg/interface/src/logic/reducers/local.ts b/pkg/interface/src/logic/reducers/local.ts
index 805e57e273..89a3fa8227 100644
--- a/pkg/interface/src/logic/reducers/local.ts
+++ b/pkg/interface/src/logic/reducers/local.ts
@@ -3,7 +3,7 @@ import { StoreState } from '~/store/type';
 import { Cage } from '~/types/cage';
 import { LocalUpdate, BackgroundConfig } from '~/types/local-update';
 
-type LocalState = Pick<StoreState, 'sidebarShown' | 'omniboxShown' | 'baseHash' | 'hideAvatars' | 'hideNicknames' | 'background' | 'dark' | 'suspendedFocus'>;
+type LocalState = Pick<StoreState, 'sidebarShown' | 'omniboxShown' | 'baseHash' | 'hideAvatars' | 'hideNicknames' | 'background' | 'dark' | 'suspendedFocus' | 'remoteContentPolicy'>;
 
 export default class LocalReducer<S extends LocalState> {
     rehydrate(state: S) {
@@ -18,7 +18,7 @@ export default class LocalReducer<S extends LocalState> {
     }
 
     dehydrate(state: S) {
-      const json = _.pick(state, ['hideNicknames' , 'hideAvatars' , 'background']);
+      const json = _.pick(state, ['hideNicknames' , 'hideAvatars' , 'background', 'remoteContentPolicy']);
       localStorage.setItem('localReducer', JSON.stringify(json));
     }
     reduce(json: Cage, state: S) {
@@ -31,6 +31,7 @@ export default class LocalReducer<S extends LocalState> {
             this.hideAvatars(data, state)
             this.hideNicknames(data, state)
             this.omniboxShown(data, state);
+            this.remoteContentPolicy(data, state);
         }
     }
     baseHash(obj: LocalUpdate, state: S) {
@@ -70,6 +71,12 @@ export default class LocalReducer<S extends LocalState> {
       }
     }
 
+    remoteContentPolicy(obj: LocalUpdate, state: S) {
+      if('remoteContentPolicy' in obj) {
+        state.remoteContentPolicy = obj.remoteContentPolicy;
+      }
+    }
+
     hideAvatars(obj: LocalUpdate, state: S) {
       if('hideAvatars' in obj) {
         state.hideAvatars = obj.hideAvatars;
diff --git a/pkg/interface/src/logic/store/store.ts b/pkg/interface/src/logic/store/store.ts
index 8926231cc7..63d3bb0167 100644
--- a/pkg/interface/src/logic/store/store.ts
+++ b/pkg/interface/src/logic/store/store.ts
@@ -54,6 +54,12 @@ export default class GlobalStore extends BaseStore<StoreState> {
       suspendedFocus: null,
       baseHash: null,
       background: undefined,
+      remoteContentPolicy: {
+        imageShown: true,
+        audioShown: true,
+        videoShown: true,
+        oembedShown: false,
+      },
       hideAvatars: false,
       hideNicknames: false,
       invites: {},
diff --git a/pkg/interface/src/logic/store/type.ts b/pkg/interface/src/logic/store/type.ts
index 525ec23a23..ffb989fa50 100644
--- a/pkg/interface/src/logic/store/type.ts
+++ b/pkg/interface/src/logic/store/type.ts
@@ -11,7 +11,7 @@ import { Permissions } from '~/types/permission-update';
 import { LaunchState, WeatherState } from '~/types/launch-update';
 import { LinkComments, LinkCollections, LinkSeen } from '~/types/link-update';
 import { ConnectionStatus } from '~/types/connection';
-import { BackgroundConfig } from '~/types/local-update';
+import { BackgroundConfig, LocalUpdateRemoteContentPolicy } from '~/types/local-update';
 
 export interface StoreState {
   // local state
@@ -22,6 +22,7 @@ export interface StoreState {
   connection: ConnectionStatus;
   baseHash: string | null;
   background: BackgroundConfig;
+  remoteContentPolicy: LocalUpdateRemoteContentPolicy;
   hideAvatars: boolean;
   hideNicknames: boolean;
   // invite state
diff --git a/pkg/interface/src/types/local-update.ts b/pkg/interface/src/types/local-update.ts
index 25d679d467..a5739fd218 100644
--- a/pkg/interface/src/types/local-update.ts
+++ b/pkg/interface/src/types/local-update.ts
@@ -1,12 +1,3 @@
-export type LocalUpdate =
-  LocalUpdateSidebarToggle
-| LocalUpdateSetDark
-| LocalUpdateBaseHash
-| LocalUpdateBackgroundConfig
-| LocalUpdateHideAvatars
-| LocalUpdateHideNicknames
-| LocalUpdateSetOmniboxShown;
-
 interface LocalUpdateSidebarToggle {
   sidebarToggle: boolean;
 }
@@ -31,7 +22,16 @@ interface LocalUpdateHideNicknames {
   hideNicknames: boolean;
 }
 
-export type BackgroundConfig = BackgroundConfigUrl | BackgroundConfigColor | undefined;
+interface LocalUpdateSetOmniboxShown {
+  omniboxShown: boolean;
+}
+
+export interface LocalUpdateRemoteContentPolicy {
+  imageShown: boolean;
+  audioShown: boolean;
+  videoShown: boolean;
+  oembedShown: boolean;
+}
 
 interface BackgroundConfigUrl {
   type: 'url';
@@ -43,6 +43,14 @@ interface BackgroundConfigColor {
   color: string;
 }
 
-interface LocalUpdateSetOmniboxShown {
-  omniboxShown: boolean;
-}
+export type BackgroundConfig = BackgroundConfigUrl | BackgroundConfigColor | undefined;
+
+export type LocalUpdate =
+  LocalUpdateSidebarToggle
+| LocalUpdateSetDark
+| LocalUpdateBaseHash
+| LocalUpdateBackgroundConfig
+| LocalUpdateHideAvatars
+| LocalUpdateHideNicknames
+| LocalUpdateSetOmniboxShown
+| LocalUpdateRemoteContentPolicy;
\ No newline at end of file
diff --git a/pkg/interface/src/views/apps/chat/app.tsx b/pkg/interface/src/views/apps/chat/app.tsx
index cadf3e265e..9ce2a580c7 100644
--- a/pkg/interface/src/views/apps/chat/app.tsx
+++ b/pkg/interface/src/views/apps/chat/app.tsx
@@ -89,7 +89,8 @@ export default class ChatApp extends React.Component<ChatAppProps, {}> {
       pendingMessages,
       groups,
       hideAvatars,
-      hideNicknames
+      hideNicknames,
+      remoteContentPolicy
     } = props;
 
     const renderChannelSidebar = (props, station?) => (
@@ -271,6 +272,7 @@ export default class ChatApp extends React.Component<ChatAppProps, {}> {
                     chatInitialized={chatInitialized}
                     hideAvatars={hideAvatars}
                     hideNicknames={hideNicknames}
+                    remoteContentPolicy={remoteContentPolicy}
                     {...props}
                   />
                 </Skeleton>
diff --git a/pkg/interface/src/views/apps/chat/components/chat.tsx b/pkg/interface/src/views/apps/chat/components/chat.tsx
index 2901e7167d..03b7579879 100644
--- a/pkg/interface/src/views/apps/chat/components/chat.tsx
+++ b/pkg/interface/src/views/apps/chat/components/chat.tsx
@@ -15,6 +15,7 @@ import { Path, Patp } from "~/types/noun";
 import GlobalApi from "~/logic/api/global";
 import { Association } from "~/types/metadata-update";
 import {Group} from "~/types/group-update";
+import { LocalUpdateRemoteContentPolicy } from "~/types";
 
 
 type ChatScreenProps = RouteComponentProps<{
@@ -38,6 +39,7 @@ type ChatScreenProps = RouteComponentProps<{
   envelopes: Envelope[];
   hideAvatars: boolean;
   hideNicknames: boolean;
+  remoteContentPolicy: LocalUpdateRemoteContentPolicy;
 };
 
 interface ChatScreenState {
@@ -131,6 +133,7 @@ export class ChatScreen extends Component<ChatScreenProps, ChatScreenState> {
           api={props.api}
           hideNicknames={props.hideNicknames}
           hideAvatars={props.hideAvatars}
+          remoteContentPolicy={props.remoteContentPolicy}
         />
         <ChatInput
           api={props.api}
diff --git a/pkg/interface/src/views/apps/chat/components/lib/chat-message.tsx b/pkg/interface/src/views/apps/chat/components/lib/chat-message.tsx
index 3d8573927b..3def367c6a 100644
--- a/pkg/interface/src/views/apps/chat/components/lib/chat-message.tsx
+++ b/pkg/interface/src/views/apps/chat/components/lib/chat-message.tsx
@@ -17,7 +17,8 @@ export const ChatMessage = (props) => {
     contacts,
     unreadRef,
     hideAvatars,
-    hideNicknames
+    hideNicknames,
+    remoteContentPolicy
   } = props;
 
   // Render sigil if previous message is not by the same sender
@@ -46,6 +47,7 @@ export const ChatMessage = (props) => {
       association={association}
       hideNicknames={hideNicknames}
       hideAvatars={hideAvatars}
+      remoteContentPolicy={remoteContentPolicy}
     />
   );
 
diff --git a/pkg/interface/src/views/apps/chat/components/lib/chat-window.tsx b/pkg/interface/src/views/apps/chat/components/lib/chat-window.tsx
index 725abaf0fe..ebb9952837 100644
--- a/pkg/interface/src/views/apps/chat/components/lib/chat-window.tsx
+++ b/pkg/interface/src/views/apps/chat/components/lib/chat-window.tsx
@@ -187,6 +187,7 @@ export class ChatWindow extends Component {
                 contacts={props.contacts} 
                 hideAvatars={props.hideAvatars}
                 hideNicknames={props.hideNicknames}
+                remoteContentPolicy={props.remoteContentPolicy}
               />
             ))
           }
diff --git a/pkg/interface/src/views/apps/chat/components/lib/content/url.js b/pkg/interface/src/views/apps/chat/components/lib/content/url.js
deleted file mode 100644
index a6f1f989a5..0000000000
--- a/pkg/interface/src/views/apps/chat/components/lib/content/url.js
+++ /dev/null
@@ -1,106 +0,0 @@
-import React, { Component } from 'react';
-import { Button } from '@tlon/indigo-react';
-
-const IMAGE_REGEX = new RegExp(/(jpg|img|png|gif|tiff|jpeg|webp|webm|svg)$/i);
-
-const YOUTUBE_REGEX =
-  new RegExp(
-    String(/(?:https?:\/\/(?:[a-z]+.)?)/.source) // protocol
-    + /(?:youtu\.?be(?:\.com)?\/)(?:embed\/)?/.source // short and long-links
-    + /(?:(?:(?:(?:watch\?)?(?:time_continue=(?:[0-9]+))?.+v=)?([a-zA-Z0-9_-]+))(?:\?t\=(?:[0-9a-zA-Z]+))?)/.source // id
-  );
-
-export default class UrlContent extends Component {
-  constructor() {
-    super();
-    this.state = {
-      unfold: false,
-      copied: false
-    };
-    this.unfoldEmbed = this.unfoldEmbed.bind(this);
-  }
-
-  unfoldEmbed(id) {
-    let unfoldState = this.state.unfold;
-    unfoldState = !unfoldState;
-    this.setState({ unfold: unfoldState });
-    this.iframe.setAttribute('src', this.iframe.dataset.src);
-  }
-
-  render() {
-    const { props } = this;
-    const content = props.content;
-    const imgMatch = IMAGE_REGEX.exec(props.content.url);
-    const ytMatch = YOUTUBE_REGEX.exec(props.content.url);
-
-    let contents = content.url;
-    if (imgMatch) {
-      contents = (
-        <img
-          className="o-80-d"
-          src={content.url}
-          style={{
-            maxWidth: '18rem'
-          }}
-        ></img>
-      );
-      return (
-        <a className='f7 lh-copy v-top word-break-all'
-          href={content.url}
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          {contents}
-        </a>
-      );
-    } else if (ytMatch) {
-      contents = (
-        <div className={'embed-container mb2 w-100 w-75-l w-50-xl ' +
-        ((this.state.unfold === true)
-          ? 'db' : 'dn')}
-        >
-        <iframe
-          ref={(el) => {
-            this.iframe = el;
-          }}
-          width="560"
-          height="315"
-          data-src={`https://www.youtube.com/embed/${ytMatch[1]}`}
-          frameBorder="0" allow="picture-in-picture, fullscreen"
-        >
-        </iframe>
-        </div>
-      );
-      return (
-        <div>
-          <a href={content.url}
-            className='f7 lh-copy v-top bb b--white-d word-break-all'
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            {content.url}
-          </a>
-          <Button
-            border={1}
-            style={{ display: 'inline-flex', height: '1.66em' }} // Height is hacked to line-height until Button supports proper size
-            ml={1}
-            onClick={e => this.unfoldEmbed()}
-          >
-            {this.state.unfold ? 'collapse' : 'embed'}
-          </Button>
-          {contents}
-        </div>
-      );
-    } else {
-      return (
-        <a className='f7 lh-copy v-top bb b--white-d b--black word-break-all'
-          href={content.url}
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          {contents}
-        </a>
-      );
-    }
-  }
-}
diff --git a/pkg/interface/src/views/apps/chat/components/lib/message-content.js b/pkg/interface/src/views/apps/chat/components/lib/message-content.js
index 865ab3af20..41321470a8 100644
--- a/pkg/interface/src/views/apps/chat/components/lib/message-content.js
+++ b/pkg/interface/src/views/apps/chat/components/lib/message-content.js
@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 
 import TextContent from './content/text';
 import CodeContent from './content/code';
-import UrlContent from './content/url';
+import RemoteContent from '~/views/components/RemoteContent';
 
 
 export default class MessageContent extends Component {
@@ -15,7 +15,18 @@ export default class MessageContent extends Component {
     if ('code' in content) {
       return <CodeContent content={content} />;
     } else if ('url' in content) {
-      return <UrlContent content={content} />;
+      return (
+        <RemoteContent
+          url={content.url}
+          remoteContentPolicy={props.remoteContentPolicy}
+          imageProps={{style: {
+              maxWidth: '18rem'
+          }}}
+          videoProps={{style: {
+            maxWidth: '18rem'
+          }}}
+        />
+      );
     } else if ('me' in content) {
       return (
         <p className='f7 i lh-copy v-top'>
diff --git a/pkg/interface/src/views/apps/chat/components/lib/message.js b/pkg/interface/src/views/apps/chat/components/lib/message.js
index 2220658d66..f4753bdb57 100644
--- a/pkg/interface/src/views/apps/chat/components/lib/message.js
+++ b/pkg/interface/src/views/apps/chat/components/lib/message.js
@@ -31,7 +31,7 @@ export const Message = (props) => {
             <p className="child pt2 pl2 pr1 mono f9 gray2 dib">{timestamp}</p>
             <div className="fr f7 clamp-message white-d pr3 lh-copy"
                  style={{ flexGrow: 1 }}>
-              <MessageContent letter={props.msg.letter} />
+              <MessageContent letter={props.msg.letter} remoteContentPolicy={props.remoteContentPolicy}/>
             </div>
           </div>
         )
@@ -98,7 +98,7 @@ const renderWithSigil = (props, timestamp) => {
               {datestamp}
             </p>
           </div>
-          <MessageContent letter={props.msg.letter} />
+          <MessageContent letter={props.msg.letter} remoteContentPolicy={props.remoteContentPolicy} />
         </div>
       </div>
     );
diff --git a/pkg/interface/src/views/apps/chat/css/custom.css b/pkg/interface/src/views/apps/chat/css/custom.css
index 6294427bd0..71d507ef96 100644
--- a/pkg/interface/src/views/apps/chat/css/custom.css
+++ b/pkg/interface/src/views/apps/chat/css/custom.css
@@ -116,20 +116,8 @@ h2 {
   100% {transform: rotate(360deg);}
 }
 
-/* embeds */
-.embed-container {
-  position: relative;
-  height: 0;
-  overflow: hidden;
-  padding-bottom: 28.125%;
-}
-
-.embed-container iframe, .embed-container object, .embed-container embed {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
+.embed-container iframe {
+  max-width: 100%;
 }
 
 .mh-16 {
@@ -188,9 +176,6 @@ h2 {
   .h-100-minus-96-s {
     height: calc(100% - 96px);
   }
-  .embed-container {
-    padding-bottom: 56.25%;
-  }
   .unread-notice {
     top: 96px;
   }
@@ -200,18 +185,12 @@ h2 {
   .flex-basis-250-m {
     flex-basis: 250px;
   }
-  .embed-container {
-    padding-bottom: 56.25%;
-  }
 }
 
 @media all and (min-width: 46.875em) and (max-width: 60em) {
   .flex-basis-250-l {
     flex-basis: 250px;
   }
-  .embed-container {
-    padding-bottom: 37.5%;
-  }
 }
 
 @media all and (min-width: 60em) {
diff --git a/pkg/interface/src/views/apps/links/app.js b/pkg/interface/src/views/apps/links/app.js
index 718a09363a..080aefae7d 100644
--- a/pkg/interface/src/views/apps/links/app.js
+++ b/pkg/interface/src/views/apps/links/app.js
@@ -59,7 +59,7 @@ export class LinksApp extends Component {
       props.invites : {};
 
     const listening = props.linkListening;
-    const { api, sidebarShown, hideAvatars, hideNicknames, s3 } = this.props;
+    const { api, sidebarShown, hideAvatars, hideNicknames, s3, remoteContentPolicy } = this.props;
 
     return (
       <>
@@ -319,6 +319,7 @@ export class LinksApp extends Component {
                     api={api}
                     hideAvatars={hideAvatars}
                     hideNicknames={hideNicknames}
+                    remoteContentPolicy={remoteContentPolicy}
                     />
                   </Skeleton>
                 );
diff --git a/pkg/interface/src/views/apps/links/components/lib/link-detail-preview.js b/pkg/interface/src/views/apps/links/components/lib/link-detail-preview.js
index 0dd5ecadc9..bc7d286d73 100644
--- a/pkg/interface/src/views/apps/links/components/lib/link-detail-preview.js
+++ b/pkg/interface/src/views/apps/links/components/lib/link-detail-preview.js
@@ -2,6 +2,8 @@ import React, { Component } from 'react';
 import { cite } from '~/logic/lib/util';
 import moment from 'moment';
 
+import RemoteContent from "~/views/components/RemoteContent";
+
 export class LinkPreview extends Component {
   constructor(props) {
     super(props);
@@ -27,26 +29,6 @@ export class LinkPreview extends Component {
         timeSinceLinkPost: this.getTimeSinceLinkPost()
       });
     }, 60000);
-
-    // check for soundcloud for fetching embed
-    const soundcloudRegex = new RegExp(String(/(https?:\/\/(?:www.)?soundcloud.com\/[\w-]+\/?(?:sets\/)?[\w-]+)/.source)
-    );
-
-    const isSoundcloud = soundcloudRegex.exec(this.props.url);
-
-    if (isSoundcloud && this.state.embed === '') {
-      fetch(
-        'https://soundcloud.com/oembed?format=json&url=' +
-        encodeURIComponent(this.props.url))
-        .then((response) => {
-          return response.json();
-        })
-        .then((json) => {
-          this.setState({ embed: json.html });
-        });
-    } else if (!isSoundcloud) {
-      this.setState({ embed: '' });
-    }
   }
 
   componentWillUnmount() {
@@ -66,6 +48,16 @@ export class LinkPreview extends Component {
   render() {
     const { props } = this;
 
+    const embed = (
+      <RemoteContent
+        unfold={true}
+        renderUrl={false}
+        url={props.url}
+        remoteContentPolicy={props.remoteContentPolicy}
+        className="mw-100"
+      />
+    );
+
     const URLparser = new RegExp(
       /((?:([\w\d\.-]+)\:\/\/?){1}(?:(www)\.?){0,1}(((?:[\w\d-]+\.)*)([\w\d-]+\.[\w\d]+))){1}(?:\:(\d+)){0,1}((\/(?:(?:[^\/\s\?]+\/)*))(?:([^\?\/\s#]+?(?:.[^\?\s]+){0,1}){0,1}(?:\?([^\s#]+)){0,1})){0,1}(?:#([^#\s]+)){0,1}/
     );
@@ -76,42 +68,6 @@ export class LinkPreview extends Component {
       hostname = hostname[4];
     }
 
-    const imgMatch = /(jpg|img|png|gif|tiff|jpeg|JPG|IMG|PNG|TIFF|GIF|webp|WEBP|webm|WEBM)$/.exec(
-      props.url
-    );
-
-    const youTubeRegex = new RegExp(
-      String(/(?:https?:\/\/(?:[a-z]+.)?)/.source) + // protocol
-      /(?:youtu\.?be(?:\.com)?\/)(?:embed\/)?/.source + // short and long-links
-        /(?:(?:(?:(?:watch\?)?(?:time_continue=(?:[0-9]+))?.+v=)?([a-zA-Z0-9_-]+))(?:\?t\=(?:[0-9a-zA-Z]+))?)/.source // id
-    );
-
-    const ytMatch = youTubeRegex.exec(props.url);
-
-    let embed = '';
-
-    if (imgMatch) {
-      embed = <a href={props.url}
-                target="_blank"
-                style={{ width: 'max-content' }}
-              >
-        <img src={props.url} style={{ maxHeight: '500px', maxWidth: '100%' }} />
-      </a>;
-    }
-
-    if (ytMatch) {
-      embed = (
-        <iframe
-          ref="iframe"
-          width="560"
-          height="315"
-          src={`https://www.youtube.com/embed/${ytMatch[1]}`}
-          frameBorder="0"
-          allow="picture-in-picture, fullscreen"
-        ></iframe>
-      );
-    }
-
     const showNickname = props.nickname && !props.hideNicknames;
 
     const nameClass = showNickname ? 'inter' : 'mono';
@@ -119,9 +75,9 @@ export class LinkPreview extends Component {
     return (
       <div className="pb6 w-100">
         <div
-          className={'w-100 tc ' + (ytMatch ? 'links embed-container' : '')}
+          className={'w-100 tc'}
         >
-          {embed || <div dangerouslySetInnerHTML={{ __html: this.state.embed }} />}
+          {embed}
         </div>
         <div className="flex flex-column ml2 pt6 flex-auto">
           <a href={props.url} className="w-100 flex" target="_blank" rel="noopener noreferrer">
diff --git a/pkg/interface/src/views/apps/links/components/link.js b/pkg/interface/src/views/apps/links/components/link.js
index 289848c0fd..4bbbdf1255 100644
--- a/pkg/interface/src/views/apps/links/components/link.js
+++ b/pkg/interface/src/views/apps/links/components/link.js
@@ -167,6 +167,7 @@ export class LinkDetail extends Component {
               linkIndex={props.linkIndex}
               time={this.state.data.time}
               hideNicknames={props.hideNicknames}
+              remoteContentPolicy={props.remoteContentPolicy}
             />
             <div className="relative">
               <div className={'relative ba br1 mt6 mb6 ' + focus}>
diff --git a/pkg/interface/src/views/apps/profile/components/lib/RemoteContent.tsx b/pkg/interface/src/views/apps/profile/components/lib/RemoteContent.tsx
new file mode 100644
index 0000000000..557a2132d6
--- /dev/null
+++ b/pkg/interface/src/views/apps/profile/components/lib/RemoteContent.tsx
@@ -0,0 +1,94 @@
+import React from "react";
+import { Box, Button, Checkbox } from '@tlon/indigo-react';
+import { Formik, Form } from "formik";
+import * as Yup from "yup";
+
+import GlobalApi from "~/logic/api/global";
+import { LocalUpdateRemoteContentPolicy } from "~/types/local-update";
+
+const formSchema = Yup.object().shape({
+  imageShown: Yup.boolean(),
+  audioShown: Yup.boolean(),
+  videoShown: Yup.boolean(),
+  oembedShown: Yup.boolean()
+});
+
+interface FormSchema {
+  imageShown: boolean;
+  audioShown: boolean;
+  videoShown: boolean;
+  oembedShown: boolean;
+}
+
+interface RemoteContentFormProps {
+  api: GlobalApi;
+  remoteContentPolicy: LocalUpdateRemoteContentPolicy;
+}
+
+export default function RemoteContentForm(props: RemoteContentFormProps) {
+  const { api, remoteContentPolicy } = props;
+  const imageShown = remoteContentPolicy.imageShown;
+  const audioShown = remoteContentPolicy.audioShown;
+  const videoShown = remoteContentPolicy.videoShown;
+  const oembedShown = remoteContentPolicy.oembedShown;
+  return (
+    <Formik
+      validationSchema={formSchema}
+      initialValues={
+        {
+          imageShown,
+          audioShown,
+          videoShown,
+          oembedShown
+        } as FormSchema
+      }
+      onSubmit={(values, actions) => {
+        api.local.setRemoteContentPolicy({
+          imageShown: values.imageShown,
+          audioShown: values.audioShown,
+          videoShown: values.videoShown,
+          oembedShown: values.oembedShown
+        });
+        api.local.dehydrate();
+        actions.setSubmitting(false);
+      }}
+    >
+      {(props) => (
+        <Form>
+          <Box
+            display="grid"
+            gridTemplateColumns="1fr"
+            gridTemplateRows="audio"
+            gridRowGap={3}
+          >
+            <Box color="black" fontSize={1} mb={3} fontWeight={900}>
+              Remote Content
+            </Box>
+            <Box>
+              <Checkbox
+                label="Load images"
+                id="imageShown"
+              />
+              <Checkbox
+                label="Load audio files"
+                id="audioShown"
+              />
+              <Checkbox
+                label="Load video files"
+                id="videoShown"
+              />
+              <Checkbox
+                label="Load embedded content"
+                id="oembedShown"
+                caption="Embedded content may contain scripts"
+              />
+            </Box>
+          </Box>
+          <Button border={1} borderColor="washedGray" type="submit">
+            Save
+          </Button>
+        </Form>
+      )}
+    </Formik>
+  );
+}
\ No newline at end of file
diff --git a/pkg/interface/src/views/apps/profile/components/settings.tsx b/pkg/interface/src/views/apps/profile/components/settings.tsx
index d59f04f36c..72c6794cdf 100644
--- a/pkg/interface/src/views/apps/profile/components/settings.tsx
+++ b/pkg/interface/src/views/apps/profile/components/settings.tsx
@@ -19,6 +19,7 @@ import { StoreState } from "../../../store/type";
 import DisplayForm from "./lib/DisplayForm";
 import S3Form from "./lib/S3Form";
 import SecuritySettings from "./lib/Security";
+import RemoteContentForm from "./lib/RemoteContent";
 
 type ProfileProps = StoreState & { api: GlobalApi; ship: string };
 
@@ -30,6 +31,7 @@ export default function Settings({
   hideAvatars,
   hideNicknames,
   background,
+  remoteContentPolicy
 }: ProfileProps) {
   return (
     <Box
@@ -51,6 +53,7 @@ export default function Settings({
         background={background}
         s3={s3}
       />
+      <RemoteContentForm {...{api, remoteContentPolicy}} />
       <S3Form api={api} s3={s3} />
       <SecuritySettings api={api} />
     </Box>
diff --git a/pkg/interface/src/views/components/RemoteContent.tsx b/pkg/interface/src/views/components/RemoteContent.tsx
new file mode 100644
index 0000000000..351abdce5e
--- /dev/null
+++ b/pkg/interface/src/views/components/RemoteContent.tsx
@@ -0,0 +1,148 @@
+import React, { Component, Fragment } from 'react';
+import { LocalUpdateRemoteContentPolicy } from "~/types/local-update";
+import { Button } from '@tlon/indigo-react';
+import { hasProvider } from 'oembed-parser';
+import EmbedContainer from 'react-oembed-container';
+
+interface RemoteContentProps {
+  url: string;
+  remoteContentPolicy: LocalUpdateRemoteContentPolicy;
+  unfold: boolean;
+  renderUrl: boolean;
+  imageProps: any;
+  audioProps: any;
+  videoProps: any;
+  oembedProps: any;
+}
+
+interface RemoteContentState {
+  unfold: boolean;
+  embed: any | undefined;
+}
+
+const IMAGE_REGEX = new RegExp(/(jpg|img|png|gif|tiff|jpeg|webp|webm|svg)$/i);
+const AUDIO_REGEX = new RegExp(/(mp3|wav|ogg)$/i);
+const VIDEO_REGEX = new RegExp(/(mov|mp4|ogv)$/i);
+
+export default class RemoteContent extends Component<RemoteContentProps, RemoteContentState> {
+  constructor(props) {
+    super(props);
+    this.state = {
+      unfold: props.unfold || false,
+      embed: undefined
+    };
+    this.unfoldEmbed = this.unfoldEmbed.bind(this);
+    this.loadOembed = this.loadOembed.bind(this);
+    this.wrapInLink = this.wrapInLink.bind(this);
+  }
+
+  unfoldEmbed() {
+    let unfoldState = this.state.unfold;
+    unfoldState = !unfoldState;
+    this.setState({ unfold: unfoldState });
+  }
+
+  loadOembed() {
+    fetch(`https://noembed.com/embed?url=${this.props.url}`)
+    .then(response => response.json())
+    .then((result) => {
+      this.setState({ embed: result });
+    }).catch((error) => {
+      this.setState({ embed: 'error' });
+      console.log('error fetching oembed', error);
+    });
+  }
+
+  wrapInLink(contents) {
+    return (<a
+      href={this.props.url}
+      className={`f7 lh-copy v-top word-break-all ${(typeof contents === 'string') ? 'bb b--white-d b--black' : ''}`}
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      {contents}
+    </a>);
+  }
+
+  render() {
+    const {
+      remoteContentPolicy,
+      url,
+      unfold = false,
+      renderUrl = true,
+      imageProps = {},
+      audioProps = {},
+      videoProps = {},
+      oembedProps = {},
+      ...props
+    } = this.props;
+    const isImage = IMAGE_REGEX.test(url);
+    const isAudio = AUDIO_REGEX.test(url);
+    const isVideo = VIDEO_REGEX.test(url);
+    const isOembed = hasProvider(url);
+
+    if (isImage && remoteContentPolicy.imageShown) {
+      return this.wrapInLink(
+        <img
+          src={url}
+          {...imageProps}
+          {...props}
+        />
+      );
+    } else if (isAudio && remoteContentPolicy.audioShown) {
+      return (
+        <>
+          {renderUrl ? this.wrapInLink(url) : null}
+          <audio
+            controls
+            className="db"
+            src={url}
+            {...audioProps}
+            {...props}
+          />
+        </>
+      );
+    } else if (isVideo && remoteContentPolicy.videoShown) {
+      return (
+        <>
+          {renderUrl ? this.wrapInLink(url) : null}
+          <video
+            controls
+            className="db"
+            src={url}
+            {...videoProps}
+            {...props}
+          />
+        </>
+      );
+    } else if (isOembed && remoteContentPolicy.oembedShown) {
+      this.loadOembed();
+      return (
+        <Fragment>
+          {renderUrl ? this.wrapInLink(this.state.embed && this.state.embed.title ? this.state.embed.title : url) : null}
+          {this.state.embed !== 'error' && !unfold ? <Button
+            border={1}
+            style={{ display: 'inline-flex', height: '1.66em' }} // Height is hacked to line-height until Button supports proper size
+            ml={1}
+            onClick={this.unfoldEmbed}
+          >
+            {this.state.unfold ? 'collapse' : 'expand'}
+          </Button> : null}
+          <div
+            className={'embed-container mb2 w-100 w-75-l w-50-xl ' + (this.state.unfold ? 'db' : 'dn')}
+            {...oembedProps}
+            {...props}
+          >
+            {this.state.embed && this.state.embed.html && this.state.unfold
+            ? <EmbedContainer markup={this.state.embed.html}>
+              <div dangerouslySetInnerHTML={{__html: this.state.embed.html}}></div>
+            </EmbedContainer>
+            : null}
+          </div>
+        </Fragment>
+      );
+    } else {
+      return renderUrl ? this.wrapInLink(url) : null;
+    }
+  }
+}
\ No newline at end of file

From a9ed4c905577515bffbd7070da060cb627b70b93 Mon Sep 17 00:00:00 2001
From: Tyler Brown Cifu Shuster <tyler@fivepaths.com>
Date: Fri, 4 Sep 2020 20:12:27 -0700
Subject: [PATCH 35/58] links, publish: display rich text comments

---
 .../src/logic/lib/tokenizeMessage.js          | 67 +++++++++++++++
 .../apps/chat/components/lib/chat-input.js    | 85 ++-----------------
 .../apps/links/components/lib/comment-item.js |  3 +-
 .../apps/links/components/lib/comments.js     |  3 +-
 .../src/views/apps/links/components/link.js   |  1 +
 pkg/interface/src/views/apps/publish/app.tsx  |  2 +
 .../publish/components/lib/CommentItem.tsx    | 24 ++----
 .../apps/publish/components/lib/Comments.tsx  |  4 +
 .../apps/publish/components/lib/Note.tsx      |  3 +
 .../publish/components/lib/NotebookRoutes.tsx |  3 +
 .../src/views/components/RemoteContent.tsx    |  2 +-
 .../src/views/components/RichText.js          | 40 +++++++++
 12 files changed, 138 insertions(+), 99 deletions(-)
 create mode 100644 pkg/interface/src/logic/lib/tokenizeMessage.js
 create mode 100644 pkg/interface/src/views/components/RichText.js

diff --git a/pkg/interface/src/logic/lib/tokenizeMessage.js b/pkg/interface/src/logic/lib/tokenizeMessage.js
new file mode 100644
index 0000000000..6f43c421c8
--- /dev/null
+++ b/pkg/interface/src/logic/lib/tokenizeMessage.js
@@ -0,0 +1,67 @@
+const URL_REGEX = new RegExp(String(/^((\w+:\/\/)[-a-zA-Z0-9:@;?&=\/%\+\.\*!'\(\),\$_\{\}\^~\[\]`#|]+)/.source));
+
+const isUrl = (string) => {
+  try {
+    return URL_REGEX.test(string);
+  } catch (e) {
+    return false;
+  }
+}
+
+const tokenizeMessage = (text) => {
+  let messages = [];
+  let message = [];
+  let isInCodeBlock = false;
+  let endOfCodeBlock = false;
+  text.split(/\r?\n/).forEach((line, index) => {
+    if (index !== 0) {
+      message.push('\n');
+    }
+    // A line of backticks enters and exits a codeblock
+    if (line.startsWith('```')) {
+      // But we need to check if we've ended a codeblock
+      endOfCodeBlock = isInCodeBlock;
+      isInCodeBlock = (!isInCodeBlock);
+    } else {
+      endOfCodeBlock = false;
+    }
+
+    if (isInCodeBlock || endOfCodeBlock) {
+      message.push(line);
+    } else {
+      line.split(/\s/).forEach((str) => {
+        if (
+          (str.startsWith('`') && str !== '`')
+          || (str === '`' && !isInCodeBlock)
+        ) {
+          isInCodeBlock = true;
+        } else if (
+          (str.endsWith('`') && str !== '`')
+          || (str === '`' && isInCodeBlock)
+        ) {
+          isInCodeBlock = false;
+        }
+
+        if (isUrl(str) && !isInCodeBlock) {
+          if (message.length > 0) {
+            // If we're in the middle of a message, add it to the stack and reset
+            messages.push(message);
+            message = [];
+          }
+          messages.push([str]);
+          message = [];
+        } else {
+          message.push(str);
+        }
+      });
+    }
+  });
+
+  if (message.length) {
+    // Add any remaining message
+    messages.push(message);
+  }
+  return messages;
+};
+
+export { tokenizeMessage as default, isUrl, URL_REGEX };
\ No newline at end of file
diff --git a/pkg/interface/src/views/apps/chat/components/lib/chat-input.js b/pkg/interface/src/views/apps/chat/components/lib/chat-input.js
index 1cc8990422..9b69a7ac44 100644
--- a/pkg/interface/src/views/apps/chat/components/lib/chat-input.js
+++ b/pkg/interface/src/views/apps/chat/components/lib/chat-input.js
@@ -4,9 +4,10 @@ import { S3Upload } from '~/views/components/s3-upload'
 ;
 import { uxToHex } from '~/logic/lib/util';
 import { Sigil } from '~/logic/lib/sigil';
+import tokenizeMessage, { isUrl } from '~/logic/lib/tokenizeMessage';
+
 
 
-const URL_REGEX = new RegExp(String(/^((\w+:\/\/)[-a-zA-Z0-9:@;?&=\/%\+\.\*!'\(\),\$_\{\}\^~\[\]`#|]+)/.source));
 
 export class ChatInput extends Component {
   constructor(props) {
@@ -52,7 +53,7 @@ export class ChatInput extends Component {
       return {
         me: letter
       };
-    } else if (this.isUrl(letter)) {
+    } else if (isUrl(letter)) {
       return {
         url: letter
       };
@@ -63,13 +64,7 @@ export class ChatInput extends Component {
     }
   }
 
-  isUrl(string) {
-    try {
-      return URL_REGEX.test(string);
-    } catch (e) {
-      return false;
-    }
-  }
+  
 
   submit(text) {
     const { props, state } = this;
@@ -91,58 +86,7 @@ export class ChatInput extends Component {
       return;
     }
 
-    let messages = [];
-    let message = [];
-    let isInCodeBlock = false;
-    let endOfCodeBlock = false;
-    text.split(/\r?\n/).forEach((line, index) => {
-      if (index !== 0) {
-        message.push('\n');
-      }
-      // A line of backticks enters and exits a codeblock
-      if (line.startsWith('```')) {
-        // But we need to check if we've ended a codeblock
-        endOfCodeBlock = isInCodeBlock;
-        isInCodeBlock = (!isInCodeBlock);
-      } else {
-        endOfCodeBlock = false;
-      }
-
-      if (isInCodeBlock || endOfCodeBlock) {
-        message.push(line);
-      } else {
-        line.split(/\s/).forEach((str) => {
-          if (
-            (str.startsWith('`') && str !== '`')
-            || (str === '`' && !isInCodeBlock)
-          ) {
-            isInCodeBlock = true;
-          } else if (
-            (str.endsWith('`') && str !== '`')
-            || (str === '`' && isInCodeBlock)
-          ) {
-            isInCodeBlock = false;
-          }
-
-          if (this.isUrl(str) && !isInCodeBlock) {
-            if (message.length > 0) {
-              // If we're in the middle of a message, add it to the stack and reset
-              messages.push(message);
-              message = [];
-            }
-            messages.push([str]);
-            message = [];
-          } else {
-            message.push(str);
-          }
-        });
-      }
-    });
-
-    if (message.length) {
-      // Add any remaining message
-      messages.push(message);
-    }
+    const messages = tokenizeMessage(text);
 
     props.deleteMessage();
 
@@ -157,25 +101,6 @@ export class ChatInput extends Component {
         );
       }
     });
-
-    // perf testing:
-    /*let closure = () => {
-      let x = 0;
-      for (var i = 0; i < 30; i++) {
-        x++;
-        props.api.chat.message(
-          props.station,
-          `~${window.ship}`,
-          Date.now(),
-          {
-            text: `${x}`
-          }
-        );
-      }
-      setTimeout(closure, 1000);
-    };
-    this.closure = closure.bind(this);
-    setTimeout(this.closure, 2000);*/
   }
 
   uploadSuccess(url) {
diff --git a/pkg/interface/src/views/apps/links/components/lib/comment-item.js b/pkg/interface/src/views/apps/links/components/lib/comment-item.js
index 227169c994..dfe9b34032 100644
--- a/pkg/interface/src/views/apps/links/components/lib/comment-item.js
+++ b/pkg/interface/src/views/apps/links/components/lib/comment-item.js
@@ -3,6 +3,7 @@ import { Sigil } from '~/logic/lib/sigil';
 import { cite } from '~/logic/lib/util';
 import moment from 'moment';
 import { Box, Text, Row } from '@tlon/indigo-react';
+import RichText from '~/views/components/RichText';
 
 export class CommentItem extends Component {
   constructor(props) {
@@ -60,7 +61,7 @@ export class CommentItem extends Component {
             </Text>
           </Row>
         </Row>
-        <Text display="block" py={3} fontSize={1}>{props.content}</Text>
+        <Text display="block" py={3} fontSize={1}><RichText remoteContentPolicy={props.remoteContentPolicy}>{props.content}</RichText></Text>
       </Box>
     );
   }
diff --git a/pkg/interface/src/views/apps/links/components/lib/comments.js b/pkg/interface/src/views/apps/links/components/lib/comments.js
index e8806f14ac..8982867fd3 100644
--- a/pkg/interface/src/views/apps/links/components/lib/comments.js
+++ b/pkg/interface/src/views/apps/links/components/lib/comments.js
@@ -40,7 +40,7 @@ export class Comments extends Component {
     ? props.comments.totalPages
     : 1;
 
-    const { hideNicknames, hideAvatars } = props;
+    const { hideNicknames, hideAvatars, remoteContentPolicy } = props;
 
     const commentsList = Object.keys(commentsPage)
     .map((entry) => {
@@ -68,6 +68,7 @@ export class Comments extends Component {
           member={member}
           hideNicknames={hideNicknames}
           hideAvatars={hideAvatars}
+          remoteContentPolicy={remoteContentPolicy}
         />
       );
     });
diff --git a/pkg/interface/src/views/apps/links/components/link.js b/pkg/interface/src/views/apps/links/components/link.js
index 4bbbdf1255..646891578b 100644
--- a/pkg/interface/src/views/apps/links/components/link.js
+++ b/pkg/interface/src/views/apps/links/components/link.js
@@ -221,6 +221,7 @@ export class LinkDetail extends Component {
               api={props.api}
               hideAvatars={props.hideAvatars}
               hideNicknames={props.hideNicknames}
+              remoteContentPolicy={props.remoteContentPolicy}
             />
           </div>
         </div>
diff --git a/pkg/interface/src/views/apps/publish/app.tsx b/pkg/interface/src/views/apps/publish/app.tsx
index 59aafff85e..3bcedd386c 100644
--- a/pkg/interface/src/views/apps/publish/app.tsx
+++ b/pkg/interface/src/views/apps/publish/app.tsx
@@ -63,6 +63,7 @@ export default function PublishApp(props: PublishAppProps) {
     associations,
     hideNicknames,
     hideAvatars,
+    remoteContentPolicy
   } = props;
 
   const active = location.pathname.endsWith("/~publish")
@@ -161,6 +162,7 @@ export default function PublishApp(props: PublishAppProps) {
                     api={api}
                     hideNicknames={hideNicknames}
                     hideAvatars={hideAvatars}
+                    remoteContentPolicy={remoteContentPolicy}
                     {...props}
                   />
                 );
diff --git a/pkg/interface/src/views/apps/publish/components/lib/CommentItem.tsx b/pkg/interface/src/views/apps/publish/components/lib/CommentItem.tsx
index a8e9f68083..ea0e4cf53f 100644
--- a/pkg/interface/src/views/apps/publish/components/lib/CommentItem.tsx
+++ b/pkg/interface/src/views/apps/publish/components/lib/CommentItem.tsx
@@ -1,14 +1,13 @@
 import React, { useState } from "react";
-import moment from "moment";
-import { Sigil } from "~/logic/lib/sigil";
 import CommentInput from "./CommentInput";
-import { uxToHex, cite } from "~/logic/lib/util";
 import { Comment, NoteId } from "~/types/publish-update";
 import { Contacts } from "~/types/contact-update";
 import GlobalApi from "~/logic/api/global";
-import { Button, Box, Row, Text } from "@tlon/indigo-react";
+import { Box, Row } from "@tlon/indigo-react";
 import styled from "styled-components";
 import { Author } from "./Author";
+import tokenizeMessage from '~/logic/lib/tokenizeMessage';
+import RichText from '~/views/components/RichText';
 
 const ClickBox = styled(Box)`
   cursor: pointer;
@@ -28,17 +27,11 @@ interface CommentItemProps {
 }
 
 export function CommentItem(props: CommentItemProps) {
-  const { ship, contacts, book, note, api } = props;
+  const { ship, contacts, book, note, api, remoteContentPolicy } = props;
   const [editing, setEditing] = useState<boolean>(false);
   const commentPath = Object.keys(props.comment)[0];
   const commentData = props.comment[commentPath];
-  const content = commentData.content.split("\n").map((line, i) => {
-    return (
-      <Text className="mb2" key={i}>
-        {line}
-      </Text>
-    );
-  });
+  const content = tokenizeMessage(commentData.content).flat().join(' ');
 
   const disabled = props.pending || window.ship !== commentData.author.slice(1);
 
@@ -86,14 +79,13 @@ export function CommentItem(props: CommentItemProps) {
         </Author>
       </Row>
       <Box mb={2}>
-        {!editing && content}
-        {editing && (
-          <CommentInput
+        {editing
+          ? <CommentInput
             onSubmit={onUpdate}
             initial={commentData.content}
             label="Update"
           />
-        )}
+        : <RichText className="f9 white-d" remoteContentPolicy={remoteContentPolicy}>{content}</RichText>}
       </Box>
     </Box>
   );
diff --git a/pkg/interface/src/views/apps/publish/components/lib/Comments.tsx b/pkg/interface/src/views/apps/publish/components/lib/Comments.tsx
index e3f17749a9..19bcfaa679 100644
--- a/pkg/interface/src/views/apps/publish/components/lib/Comments.tsx
+++ b/pkg/interface/src/views/apps/publish/components/lib/Comments.tsx
@@ -8,6 +8,7 @@ import { Contacts } from "~/types/contact-update";
 import _ from "lodash";
 import GlobalApi from "~/logic/api/global";
 import { FormikHelpers } from "formik";
+import { LocalUpdateRemoteContentPolicy } from "~/types";
 
 interface CommentsProps {
   comments: Comment[];
@@ -21,6 +22,7 @@ interface CommentsProps {
   enabled: boolean;
   hideAvatars: boolean;
   hideNicknames: boolean;
+  remoteContentPolicy: LocalUpdateRemoteContentPolicy;
 }
 
 export function Comments(props: CommentsProps) {
@@ -78,6 +80,7 @@ export function Comments(props: CommentsProps) {
             pending={true}
             hideNicknames={props.hideNicknames}
             hideAvatars={props.hideAvatars}
+            remoteContentPolicy={props.remoteContentPolicy}
           />
         );
       })}
@@ -92,6 +95,7 @@ export function Comments(props: CommentsProps) {
           note={note["note-id"]}
           hideNicknames={props.hideNicknames}
           hideAvatars={props.hideAvatars}
+          remoteContentPolicy={props.remoteContentPolicy}
         />
       ))}
     </Col>
diff --git a/pkg/interface/src/views/apps/publish/components/lib/Note.tsx b/pkg/interface/src/views/apps/publish/components/lib/Note.tsx
index d3cf8d9285..d460a08111 100644
--- a/pkg/interface/src/views/apps/publish/components/lib/Note.tsx
+++ b/pkg/interface/src/views/apps/publish/components/lib/Note.tsx
@@ -13,6 +13,7 @@ import {
 import { Contacts } from "~/types/contact-update";
 import GlobalApi from "~/logic/api/global";
 import { Author } from "./Author";
+import { LocalUpdateRemoteContentPolicy } from "~/types";
 
 interface NoteProps {
   ship: string;
@@ -24,6 +25,7 @@ interface NoteProps {
   api: GlobalApi;
   hideAvatars: boolean;
   hideNicknames: boolean;
+  remoteContentPolicy: LocalUpdateRemoteContentPolicy;
 }
 
 export function Note(props: NoteProps & RouteComponentProps) {
@@ -115,6 +117,7 @@ export function Note(props: NoteProps & RouteComponentProps) {
           api={props.api}
           hideNicknames={props.hideNicknames}
           hideAvatars={props.hideAvatars}
+          remoteContentPolicy={props.remoteContentPolicy}
         />
       )}
       <Spinner
diff --git a/pkg/interface/src/views/apps/publish/components/lib/NotebookRoutes.tsx b/pkg/interface/src/views/apps/publish/components/lib/NotebookRoutes.tsx
index ff0dc905b7..385c316375 100644
--- a/pkg/interface/src/views/apps/publish/components/lib/NotebookRoutes.tsx
+++ b/pkg/interface/src/views/apps/publish/components/lib/NotebookRoutes.tsx
@@ -9,6 +9,7 @@ import { Contacts, Rolodex } from "../../../../types/contact-update";
 import Notebook from "./Notebook";
 import NewPost from "./new-post";
 import { NoteRoutes } from './NoteRoutes';
+import { LocalUpdateRemoteContentPolicy } from "~/types";
 
 interface NotebookRoutesProps {
   api: GlobalApi;
@@ -21,6 +22,7 @@ interface NotebookRoutesProps {
   groups: Groups;
   hideAvatars: boolean;
   hideNicknames: boolean;
+  remoteContentPolicy: LocalUpdateRemoteContentPolicy;
 }
 
 export function NotebookRoutes(
@@ -74,6 +76,7 @@ export function NotebookRoutes(
               contacts={notebookContacts}
               hideAvatars={props.hideAvatars}
               hideNicknames={props.hideNicknames}
+              remoteContentPolicy={props.remoteContentPolicy}
               {...routeProps}
             />
           );
diff --git a/pkg/interface/src/views/components/RemoteContent.tsx b/pkg/interface/src/views/components/RemoteContent.tsx
index 351abdce5e..d57b20b616 100644
--- a/pkg/interface/src/views/components/RemoteContent.tsx
+++ b/pkg/interface/src/views/components/RemoteContent.tsx
@@ -56,7 +56,7 @@ export default class RemoteContent extends Component<RemoteContentProps, RemoteC
   wrapInLink(contents) {
     return (<a
       href={this.props.url}
-      className={`f7 lh-copy v-top word-break-all ${(typeof contents === 'string') ? 'bb b--white-d b--black' : ''}`}
+      className={`word-break-all ${(typeof contents === 'string') ? 'bb b--white-d b--black' : ''}`}
       target="_blank"
       rel="noopener noreferrer"
     >
diff --git a/pkg/interface/src/views/components/RichText.js b/pkg/interface/src/views/components/RichText.js
new file mode 100644
index 0000000000..4de80adecb
--- /dev/null
+++ b/pkg/interface/src/views/components/RichText.js
@@ -0,0 +1,40 @@
+import React from "react";
+import RemoteContent from "~/views/components/RemoteContent";
+import { hasProvider } from 'oembed-parser';
+import ReactMarkdown from 'react-markdown';
+import RemarkDisableTokenizers from 'remark-disable-tokenizers';
+
+const DISABLED_BLOCK_TOKENS = [
+  'indentedCode',
+  'atxHeading',
+  'thematicBreak',
+  'list',
+  'setextHeading',
+  'html',
+  'definition',
+  'table'
+];
+
+const DISABLED_INLINE_TOKENS = [];
+
+const RichText = React.memo(({remoteContentPolicy, ...props}) => (
+  <ReactMarkdown
+    {...props}
+    renderers={{
+      link: (props) => {
+        if (hasProvider(props.href)) {
+          return <RemoteContent className="mw-100" url={props.href} remoteContentPolicy={remoteContentPolicy}/>;
+        }
+        return <a {...props} className="bb b--white-d b--black">{props.children}</a>
+      },
+      paragraph: (props) => {
+        return <p {...props} className="mb2 lh-copy">{props.children}</p>
+      }
+    }}
+    plugins={[[
+      RemarkDisableTokenizers,
+      { block: DISABLED_BLOCK_TOKENS, inline: DISABLED_INLINE_TOKENS }
+    ]]} />
+));
+
+export default RichText;
\ No newline at end of file

From 4b130868ed1762d9dfc667f8c9cc46f406f89069 Mon Sep 17 00:00:00 2001
From: Tyler Brown Cifu Shuster <tyler@fivepaths.com>
Date: Mon, 7 Sep 2020 15:09:39 -0700
Subject: [PATCH 36/58] groups: add group deletion confirmation

---
 .../views/apps/groups/components/lib/group-detail.js | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/pkg/interface/src/views/apps/groups/components/lib/group-detail.js b/pkg/interface/src/views/apps/groups/components/lib/group-detail.js
index 3dbe30dac0..4d7b6ff942 100644
--- a/pkg/interface/src/views/apps/groups/components/lib/group-detail.js
+++ b/pkg/interface/src/views/apps/groups/components/lib/group-detail.js
@@ -324,11 +324,13 @@ export class GroupDetail extends Component {
           <a className={'dib f9 ba pa2 ' + deleteButtonClasses}
           onClick={() => {
             if (groupOwner) {
-              this.setState({ awaiting: true, type: 'Deleting' }, (() => {
-                props.api.contacts.delete(props.path).then(() => {
-                  props.history.push('/~groups');
-                });
-              }));
+              if (prompt(`To confirm deleting this group, type ${props.path.substr(6)}`) === props.path.substr(6)) {
+                this.setState({ awaiting: true, type: 'Deleting' }, (() => {
+                  props.api.contacts.delete(props.path).then(() => {
+                    props.history.push('/~groups');
+                  });
+                }));
+              }
             }
           }}
           >Delete this group</a>

From 0f355e58d9b926251c79d19403101c22f3e214b6 Mon Sep 17 00:00:00 2001
From: Liam Fitzgerald <liam@urizen.co>
Date: Tue, 8 Sep 2020 11:10:55 +1000
Subject: [PATCH 37/58] interface: allow useWaitForProps to not timeout

---
 pkg/interface/src/logic/lib/useWaitForProps.ts | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/pkg/interface/src/logic/lib/useWaitForProps.ts b/pkg/interface/src/logic/lib/useWaitForProps.ts
index 5a2d752e6a..80e92e92a8 100644
--- a/pkg/interface/src/logic/lib/useWaitForProps.ts
+++ b/pkg/interface/src/logic/lib/useWaitForProps.ts
@@ -1,7 +1,7 @@
 import { useState, useEffect, useCallback } from 'react';
 
 
-export function useWaitForProps<P>(props: P, timeout: number) {
+export function useWaitForProps<P>(props: P, timeout: number = 0) {
   const [resolve, setResolve] = useState<() => void>(() => () => {});
   const [ready, setReady] = useState<(p: P) => boolean | undefined>();
 
@@ -24,9 +24,11 @@ export function useWaitForProps<P>(props: P, timeout: number) {
       setReady(() => r);
       return new Promise<void>((resolve, reject) => {
         setResolve(() => resolve);
-        setTimeout(() => {
-          reject(new Error("Timed out"));
-        }, timeout);
+        if(timeout > 0) {
+          setTimeout(() => {
+            reject(new Error("Timed out"));
+          }, timeout);
+        }
       });
     },
     [setResolve, setReady, timeout]

From 07c0cb1006e8ab0f882b8b4ed624a235ca8563b8 Mon Sep 17 00:00:00 2001
From: Liam Fitzgerald <liam@urizen.co>
Date: Tue, 8 Sep 2020 11:11:57 +1000
Subject: [PATCH 38/58] publish: do not timeout join flow

---
 pkg/interface/src/views/apps/publish/components/lib/Join.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/pkg/interface/src/views/apps/publish/components/lib/Join.tsx b/pkg/interface/src/views/apps/publish/components/lib/Join.tsx
index 3c57d3f08a..ff7a91c14b 100644
--- a/pkg/interface/src/views/apps/publish/components/lib/Join.tsx
+++ b/pkg/interface/src/views/apps/publish/components/lib/Join.tsx
@@ -17,7 +17,7 @@ export function JoinScreen(props: JoinScreenProps & RouteComponentProps) {
   const [error, setError] = useState(false);
   const joining = useRef(false);
 
-  const waiter = useWaitForProps(props, 10000);
+  const waiter = useWaitForProps(props);
 
   const onJoin = useCallback(async () => {
     joining.current = true;

From 168478eb745dbfbd7cb27c772b6fe94cb0fd2be3 Mon Sep 17 00:00:00 2001
From: Liam Fitzgerald <liam@urizen.co>
Date: Tue, 8 Sep 2020 12:11:45 +1000
Subject: [PATCH 39/58] publish: support groupify poke

---
 pkg/interface/src/logic/api/publish.ts           | 11 +++++++++++
 pkg/interface/src/logic/reducers/group-update.ts | 10 ++++++++++
 2 files changed, 21 insertions(+)

diff --git a/pkg/interface/src/logic/api/publish.ts b/pkg/interface/src/logic/api/publish.ts
index 02648f651b..ad99dc077e 100644
--- a/pkg/interface/src/logic/api/publish.ts
+++ b/pkg/interface/src/logic/api/publish.ts
@@ -82,6 +82,17 @@ export default class PublishApi extends BaseApi {
     return this.action('publish', 'publish-action', act);
   }
 
+  groupify(bookId: string) {
+    return this.publishAction({
+      groupify: {
+        book: bookId,
+        target: null,
+        inclusive: false
+      }
+    });
+  }
+
+
   newBook(bookId: string, title: string, description: string, group?: Path) {
     const groupInfo = group ? { 'group-path': group,
       invitees: [],
diff --git a/pkg/interface/src/logic/reducers/group-update.ts b/pkg/interface/src/logic/reducers/group-update.ts
index 09adb35b26..5862aaca1d 100644
--- a/pkg/interface/src/logic/reducers/group-update.ts
+++ b/pkg/interface/src/logic/reducers/group-update.ts
@@ -78,6 +78,7 @@ export default class GroupReducer<S extends GroupState> {
       this.addGroup(data, state);
       this.removeGroup(data, state);
       this.changePolicy(data, state);
+      this.expose(data, state);
     }
   }
 
@@ -187,6 +188,15 @@ export default class GroupReducer<S extends GroupState> {
     }
   }
 
+  expose(json: GroupUpdate, state: S) {
+    if( 'expose' in json && state) {
+      const { resource } = json.expose;
+      const resourcePath = resourceAsPath(resource);
+      state.groups[resourcePath].hidden = false;
+    }
+  }
+
+
   private inviteChangePolicy(diff: InvitePolicyDiff, policy: InvitePolicy) {
     if ('addInvites' in diff) {
       const { addInvites } = diff;

From 73881aa25f51275d49ec9ea1ccad9dab8d7d1b9d Mon Sep 17 00:00:00 2001
From: Liam Fitzgerald <liam@urizen.co>
Date: Tue, 8 Sep 2020 12:12:08 +1000
Subject: [PATCH 40/58] publish: add groupify to settings

---
 .../publish/components/lib/MetadataForm.tsx   | 120 ++++++++++++++++
 .../apps/publish/components/lib/Notebook.tsx  |   1 +
 .../apps/publish/components/lib/Settings.tsx  | 129 ++++--------------
 3 files changed, 148 insertions(+), 102 deletions(-)
 create mode 100644 pkg/interface/src/views/apps/publish/components/lib/MetadataForm.tsx

diff --git a/pkg/interface/src/views/apps/publish/components/lib/MetadataForm.tsx b/pkg/interface/src/views/apps/publish/components/lib/MetadataForm.tsx
new file mode 100644
index 0000000000..35932b701b
--- /dev/null
+++ b/pkg/interface/src/views/apps/publish/components/lib/MetadataForm.tsx
@@ -0,0 +1,120 @@
+import React, { useEffect } from "react";
+import { AsyncButton } from "../../../../components/AsyncButton";
+import * as Yup from "yup";
+import {
+  Box,
+  Input,
+  Checkbox,
+  Col,
+  InputLabel,
+  InputCaption,
+  Button,
+  Center,
+} from "@tlon/indigo-react";
+import { Formik, Form, useFormikContext, FormikHelpers } from "formik";
+import GlobalApi from "~/logic/api/global";
+import { Notebook } from "~/types/publish-update";
+import { Contacts } from "~/types/contact-update";
+import { FormError } from "~/views/components/FormError";
+import { RouteComponentProps, useHistory } from "react-router-dom";
+
+interface MetadataFormProps {
+  host: string;
+  book: string;
+  notebook: Notebook;
+  contacts: Contacts;
+  api: GlobalApi;
+}
+
+interface FormSchema {
+  name: string;
+  description: string;
+  comments: boolean;
+}
+
+const formSchema = Yup.object({
+  name: Yup.string().required("Notebook must have a name"),
+  description: Yup.string(),
+  comments: Yup.boolean(),
+});
+
+const ResetOnPropsChange = (props: { init: FormSchema; book: string }) => {
+  const { resetForm } = useFormikContext<FormSchema>();
+  useEffect(() => {
+    resetForm({ values: props.init });
+  }, [props.book]);
+
+  return null;
+};
+
+
+export function MetadataForm(props: MetadataFormProps) {
+  const { host, notebook, api, book } = props;
+  const history = useHistory();
+  const initialValues: FormSchema = {
+    name: notebook?.title,
+    description: notebook?.about,
+    comments: notebook?.comments,
+  };
+
+  const onSubmit = async (
+    values: FormSchema,
+    actions: FormikHelpers<FormSchema>
+  ) => {
+    try {
+      const { name, description, comments } = values;
+      await api.publish.editBook(book, name, description, comments);
+      api.publish.fetchNotebook(host, book);
+      actions.setStatus({ success: null });
+    } catch (e) {
+      console.log(e);
+      actions.setStatus({ error: e.message });
+    }
+  };
+
+  const onDelete = async () => {
+    await api.publish.delBook(book);
+    history.push("/~publish");
+  };
+
+  return (
+    <Formik
+      validationSchema={formSchema}
+      initialValues={initialValues}
+      onSubmit={onSubmit}
+    >
+      <Form style={{ display: "contents" }}>
+          <Col mb={4}>
+            <InputLabel>Delete Notebook</InputLabel>
+            <InputCaption>
+              Permanently delete this notebook. (All current members will no
+              longer see this notebook.)
+            </InputCaption>
+            <Button onClick={onDelete} mt={1} border error>
+              Delete this notebook
+            </Button>
+          </Col>
+          <Input
+            id="name"
+            label="Rename"
+            caption="Change the name of this notebook"
+          />
+          <Input
+            id="description"
+            label="Change description"
+            caption="Change the description of this notebook"
+          />
+          <Checkbox
+            id="comments"
+            label="Comments"
+            caption="Subscribers may comment when enabled"
+          />
+          <ResetOnPropsChange init={initialValues} book={book} />
+          <AsyncButton primary loadingText="Updating.." border>
+            Save
+          </AsyncButton>
+          <FormError message="Failed to update settings" />
+      </Form>
+    </Formik>
+  );
+}
diff --git a/pkg/interface/src/views/apps/publish/components/lib/Notebook.tsx b/pkg/interface/src/views/apps/publish/components/lib/Notebook.tsx
index 86c94dabc9..22febfcb7d 100644
--- a/pkg/interface/src/views/apps/publish/components/lib/Notebook.tsx
+++ b/pkg/interface/src/views/apps/publish/components/lib/Notebook.tsx
@@ -130,6 +130,7 @@ export function Notebook(props: NotebookProps & RouteComponentProps) {
                 api={api}
                 notebook={notebook}
                 contacts={notebookContacts}
+                groups={groups}
               />
             </TabPanel>
           </TabPanels>
diff --git a/pkg/interface/src/views/apps/publish/components/lib/Settings.tsx b/pkg/interface/src/views/apps/publish/components/lib/Settings.tsx
index aba15abf14..29c9004b13 100644
--- a/pkg/interface/src/views/apps/publish/components/lib/Settings.tsx
+++ b/pkg/interface/src/views/apps/publish/components/lib/Settings.tsx
@@ -1,128 +1,53 @@
 import React, { useEffect } from "react";
-import { AsyncButton } from "../../../../components/AsyncButton";
-import * as Yup from "yup";
-import {
-  Box,
-  Input,
-  Checkbox,
-  Col,
-  InputLabel,
-  InputCaption,
-  Button,
-  Center,
-} from "@tlon/indigo-react";
-import { Formik, Form, useFormikContext, FormikHelpers } from "formik";
+import { Box, Col, Button, InputLabel, InputCaption } from "@tlon/indigo-react";
 import GlobalApi from "~/logic/api/global";
 import { Notebook } from "~/types/publish-update";
 import { Contacts } from "~/types/contact-update";
-import { FormError } from "~/views/components/FormError";
-import { RouteComponentProps, useHistory } from "react-router-dom";
+
+import { MetadataForm } from "./MetadataForm";
+import { Groups } from "~/types";
 
 interface SettingsProps {
   host: string;
   book: string;
   notebook: Notebook;
   contacts: Contacts;
+  groups: Groups;
   api: GlobalApi;
 }
 
-interface FormSchema {
-  name: string;
-  description: string;
-  comments: boolean;
-}
-
-const formSchema = Yup.object({
-  name: Yup.string().required("Notebook must have a name"),
-  description: Yup.string(),
-  comments: Yup.boolean(),
-});
-
-const ResetOnPropsChange = (props: { init: FormSchema; book: string }) => {
-  const { resetForm } = useFormikContext<FormSchema>();
-  useEffect(() => {
-    resetForm({ values: props.init });
-  }, [props.book]);
-
-  return null;
-};
-
 export function Settings(props: SettingsProps) {
-  const { host, notebook, api, book } = props;
-  const history = useHistory();
-  const initialValues: FormSchema = {
-    name: notebook?.title,
-    description: notebook?.about,
-    comments: notebook?.comments,
+  const onGroupify = () => {
+    return props.api.publish.groupify(props.book);
   };
 
-  const onSubmit = async (
-    values: FormSchema,
-    actions: FormikHelpers<FormSchema>
-  ) => {
-    try {
-      const { name, description, comments } = values;
-      await api.publish.editBook(book, name, description, comments);
-      api.publish.fetchNotebook(host, book);
-      actions.setStatus({ success: null });
-    } catch (e) {
-      console.log(e);
-      actions.setStatus({ error: e.message });
-    }
-  };
+  const groupPath = props.notebook?.["writers-group-path"];
 
-  const onDelete = async () => {
-    await api.publish.delBook(book);
-    history.push("/~publish");
-  };
+  const isUnmanaged = props.groups?.[groupPath]?.hidden || false;
 
   return (
-    <Formik
-      validationSchema={formSchema}
-      initialValues={initialValues}
-      onSubmit={onSubmit}
+    <Box
+      mx="auto"
+      maxWidth="300px"
+      mb={4}
+      gridTemplateColumns="1fr"
+      gridAutoRows="auto"
+      display="grid"
     >
-      <Form>
-        <Box
-          maxWidth="300px"
-          mb={4}
-          gridTemplateColumns="1fr"
-          gridAutoRows="auto"
-          display="grid"
-        >
+      {isUnmanaged && (
+        <>
           <Col mb={4}>
-            <InputLabel>Delete Notebook</InputLabel>
-            <InputCaption>
-              Permanently delete this notebook. (All current members will no
-              longer see this notebook.)
-            </InputCaption>
-            <Button onClick={onDelete} mt={1} border error>
-              Delete this notebook
+            <InputLabel>Groupify</InputLabel>
+            <InputCaption>Turn this notebook into a group</InputCaption>
+            <Button onClick={onGroupify} border>
+              Groupify
             </Button>
           </Col>
-          <Input
-            id="name"
-            label="Rename"
-            caption="Change the name of this notebook"
-          />
-          <Input
-            id="description"
-            label="Change description"
-            caption="Change the description of this notebook"
-          />
-          <Checkbox
-            id="comments"
-            label="Comments"
-            caption="Subscribers may comment when enabled"
-          />
-          <ResetOnPropsChange init={initialValues} book={book} />
-          <AsyncButton loadingText="Updating.." border>
-            Save
-          </AsyncButton>
-          <FormError message="Failed to update settings" />
-        </Box>
-      </Form>
-    </Formik>
+          <Box mb={4} borderBottom={1} borderBottomColor="washedGray" />
+        </>
+      )}
+      <MetadataForm {...props} />
+    </Box>
   );
 }
 

From 1d86072aa058f9d102110e74f07139eb7468d41f Mon Sep 17 00:00:00 2001
From: Tyler Brown Cifu Shuster <tyler@fivepaths.com>
Date: Thu, 20 Aug 2020 15:59:27 -0700
Subject: [PATCH 41/58] interface: changed virtual scroll implementation and
 added to chat

---
 pkg/interface/package-lock.json               |  22 +-
 pkg/interface/package.json                    |   2 +-
 pkg/interface/src/logic/api/chat.ts           |   2 +-
 .../src/logic/reducers/chat-update.ts         |  10 +-
 pkg/interface/src/types/chat-update.ts        |   4 +
 pkg/interface/src/views/apps/chat/app.tsx     |  89 +++--
 .../src/views/apps/chat/components/chat.tsx   |  32 +-
 .../apps/chat/components/lib/chat-message.tsx |  15 +-
 .../components/lib/chat-scroll-container.js   | 143 -------
 .../apps/chat/components/lib/chat-window.tsx  | 359 +++++++++++-------
 .../views/apps/chat/components/lib/message.js | 141 +++----
 .../apps/chat/components/lib/unread-notice.js |   4 +-
 .../groups/components/lib/contact-sidebar.tsx |  20 +-
 pkg/interface/src/views/components/Group.tsx  |  15 +-
 .../src/views/components/RemoteContent.tsx    |   5 +-
 15 files changed, 407 insertions(+), 456 deletions(-)
 delete mode 100644 pkg/interface/src/views/apps/chat/components/lib/chat-scroll-container.js

diff --git a/pkg/interface/package-lock.json b/pkg/interface/package-lock.json
index b3516b8918..f379ea40f2 100644
--- a/pkg/interface/package-lock.json
+++ b/pkg/interface/package-lock.json
@@ -6383,11 +6383,6 @@
         "p-is-promise": "^2.0.0"
       }
     },
-    "memoize-one": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.1.1.tgz",
-      "integrity": "sha512-HKeeBpWvqiVJD57ZUAsJNm71eHTykffzcLZVYWiVfQeI1rJtuEaS7hQiEpWfVVk18donPwJEcFKIkCmPJNOhHA=="
-    },
     "memory-fs": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/memory-fs/-/memory-fs-0.4.1.tgz",
@@ -7994,13 +7989,13 @@
       "resolved": "https://registry.npmjs.org/react-side-effect/-/react-side-effect-2.1.0.tgz",
       "integrity": "sha512-IgmcegOSi5SNX+2Snh1vqmF0Vg/CbkycU9XZbOHJlZ6kMzTmi3yc254oB1WCkgA7OQtIAoLmcSFuHTc/tlcqXg=="
     },
-    "react-window": {
-      "version": "1.8.5",
-      "resolved": "https://registry.npmjs.org/react-window/-/react-window-1.8.5.tgz",
-      "integrity": "sha512-HeTwlNa37AFa8MDZFZOKcNEkuF2YflA0hpGPiTT9vR7OawEt+GZbfM6wqkBahD3D3pUjIabQYzsnY/BSJbgq6Q==",
+    "react-virtuoso": {
+      "version": "0.20.0",
+      "resolved": "https://registry.npmjs.org/react-virtuoso/-/react-virtuoso-0.20.0.tgz",
+      "integrity": "sha512-h+U6t/+m91AzfUe6bBfaacdLLJl1y8v7CfcXwPgQ/Dic+vNlgQmi6cIKTq18zuF+kI8Q7QN0ojIeqPHWbU8TZA==",
       "requires": {
-        "@babel/runtime": "^7.0.0",
-        "memoize-one": ">=3.1.1 <6"
+        "resize-observer-polyfill": "^1.5.1",
+        "tslib": "^1.11.1"
       }
     },
     "readable-stream": {
@@ -8281,6 +8276,11 @@
       "integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=",
       "dev": true
     },
+    "resize-observer-polyfill": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
+      "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg=="
+    },
     "resolve": {
       "version": "1.17.0",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.17.0.tgz",
diff --git a/pkg/interface/package.json b/pkg/interface/package.json
index 94a4caff76..45e644e8b4 100644
--- a/pkg/interface/package.json
+++ b/pkg/interface/package.json
@@ -32,7 +32,7 @@
     "react-markdown": "^4.3.1",
     "react-oembed-container": "^1.0.0",
     "react-router-dom": "^5.0.0",
-    "react-window": "^1.8.5",
+    "react-virtuoso": "^0.20.0",
     "remark-disable-tokenizers": "^1.0.24",
     "style-loader": "^1.2.1",
     "styled-components": "^5.1.0",
diff --git a/pkg/interface/src/logic/api/chat.ts b/pkg/interface/src/logic/api/chat.ts
index bd16529cfc..ad6e5029d0 100644
--- a/pkg/interface/src/logic/api/chat.ts
+++ b/pkg/interface/src/logic/api/chat.ts
@@ -12,7 +12,7 @@ export default class ChatApi extends BaseApi<StoreState> {
    * Fetch backlog
    */
   fetchMessages(start: number, end: number, path: Path) {
-    fetch(`/chat-view/paginate/${start}/${end}${path}`)
+    return fetch(`/chat-view/paginate/${start}/${end}${path}`)
       .then(response => response.json())
       .then((json) => {
         this.store.handleEvent({
diff --git a/pkg/interface/src/logic/reducers/chat-update.ts b/pkg/interface/src/logic/reducers/chat-update.ts
index 2921750381..531d97453a 100644
--- a/pkg/interface/src/logic/reducers/chat-update.ts
+++ b/pkg/interface/src/logic/reducers/chat-update.ts
@@ -1,8 +1,9 @@
 import _ from 'lodash';
-import { StoreState } from '../../../store/type';
+import { StoreState } from '~/logic/store/type';
 import { Cage } from '~/types/cage';
 import { ChatUpdate } from '~/types/chat-update';
 import { ChatHookUpdate } from '~/types/chat-hook-update';
+import { Envelope } from "~/types/chat-update";
 
 type ChatState = Pick<StoreState, 'chatInitialized' | 'chatSynced' | 'inbox' | 'pendingMessages'>;
 
@@ -49,8 +50,11 @@ export default class ChatReducer<S extends ChatState> {
   messages(json: ChatUpdate, state: S) {
     const data = _.get(json, 'messages', false);
     if (data) {
-      state.inbox[data.path].envelopes =
-        state.inbox[data.path].envelopes.concat(data.envelopes);
+      state.inbox[data.path].envelopes = _.unionBy(
+        state.inbox[data.path].envelopes,
+        data.envelopes,
+        (envelope: Envelope) => envelope.uid
+      );
     }
   }
 
diff --git a/pkg/interface/src/types/chat-update.ts b/pkg/interface/src/types/chat-update.ts
index 63b23eee11..6d03048f4e 100644
--- a/pkg/interface/src/types/chat-update.ts
+++ b/pkg/interface/src/types/chat-update.ts
@@ -73,6 +73,10 @@ export interface Envelope {
   letter: Letter;
 }
 
+export type IMessage = Envelope & {
+  pending?: boolean
+};
+
 interface LetterText {
   text: string;
 }
diff --git a/pkg/interface/src/views/apps/chat/app.tsx b/pkg/interface/src/views/apps/chat/app.tsx
index 9ce2a580c7..f7a91ca306 100644
--- a/pkg/interface/src/views/apps/chat/app.tsx
+++ b/pkg/interface/src/views/apps/chat/app.tsx
@@ -7,7 +7,6 @@ import './css/custom.css';
 import { Skeleton } from './components/skeleton';
 import { Sidebar } from './components/sidebar';
 import { ChatScreen } from './components/chat';
-import { MemberScreen } from './components/member';
 import { SettingsScreen } from './components/settings';
 import { NewScreen } from './components/new';
 import { JoinScreen } from './components/join';
@@ -227,57 +226,57 @@ export default class ChatApp extends React.Component<ChatAppProps, {}> {
               envelopes: []
             };
 
-              let roomContacts = {};
-              const associatedGroup =
-                station in associations['chat'] &&
-                'group-path' in associations.chat[station]
-                  ? associations.chat[station]['group-path']
-                  : '';
+            let roomContacts = {};
+            const associatedGroup =
+              station in associations['chat'] &&
+              'group-path' in associations.chat[station]
+                ? associations.chat[station]['group-path']
+                : '';
 
-              if (associations.chat[station] && associatedGroup in contacts) {
-                roomContacts = contacts[associatedGroup];
-              }
+            if (associations.chat[station] && associatedGroup in contacts) {
+              roomContacts = contacts[associatedGroup];
+            }
 
-              const association =
-                station in associations['chat'] ? associations.chat[station] : {};
+            const association =
+              station in associations['chat'] ? associations.chat[station] : {};
 
-              const group = groups[association['group-path']] || groupBunts.group();
+            const group = groups[association['group-path']] || groupBunts.group();
 
-              const popout = props.match.url.includes('/popout/');
+            const popout = props.match.url.includes('/popout/');
 
-              return (
-                <Skeleton
-                  associations={associations}
-                  invites={invites}
-                  sidebarHideOnMobile={true}
+            return (
+              <Skeleton
+                associations={associations}
+                invites={invites}
+                sidebarHideOnMobile={true}
+                popout={popout}
+                sidebarShown={sidebarShown}
+                sidebar={renderChannelSidebar(props, station)}
+              >
+                <ChatScreen
+                  chatSynced={chatSynced || {}}
+                  station={station}
+                  association={association}
+                  api={api}
+                  read={mailbox.config.read}
+                  mailboxSize={mailbox.config.length}
+                  envelopes={mailbox.envelopes}
+                  inbox={inbox}
+                  contacts={roomContacts}
+                  group={group}
+                  pendingMessages={pendingMessages}
+                  s3={s3}
                   popout={popout}
                   sidebarShown={sidebarShown}
-                  sidebar={renderChannelSidebar(props, station)}
-                >
-                  <ChatScreen
-                    chatSynced={chatSynced || {}}
-                    station={station}
-                    association={association}
-                    api={api}
-                    read={mailbox.config.read}
-                    length={mailbox.config.length}
-                    envelopes={mailbox.envelopes}
-                    inbox={inbox}
-                    contacts={roomContacts}
-                    group={group}
-                    pendingMessages={pendingMessages}
-                    s3={s3}
-                    popout={popout}
-                    sidebarShown={sidebarShown}
-                    chatInitialized={chatInitialized}
-                    hideAvatars={hideAvatars}
-                    hideNicknames={hideNicknames}
-                    remoteContentPolicy={remoteContentPolicy}
-                    {...props}
-                  />
-                </Skeleton>
-              );
-            }}
+                  chatInitialized={chatInitialized}
+                  hideAvatars={hideAvatars}
+                  hideNicknames={hideNicknames}
+                  remoteContentPolicy={remoteContentPolicy}
+                  {...props}
+                />
+              </Skeleton>
+            );
+          }}
           />
           <Route
             exact
diff --git a/pkg/interface/src/views/apps/chat/components/chat.tsx b/pkg/interface/src/views/apps/chat/components/chat.tsx
index 03b7579879..fa66fcc788 100644
--- a/pkg/interface/src/views/apps/chat/components/chat.tsx
+++ b/pkg/interface/src/views/apps/chat/components/chat.tsx
@@ -8,7 +8,6 @@ import { ChatHeader } from './lib/chat-header';
 import { ChatInput } from "./lib/chat-input";
 import { deSig } from "~/logic/lib/util";
 import { ChatHookUpdate } from "~/types/chat-hook-update";
-import ChatApi from "~/logic/api/chat";
 import { Inbox, Envelope } from "~/types/chat-update";
 import { Contacts } from "~/types/contact-update";
 import { Path, Patp } from "~/types/noun";
@@ -27,7 +26,7 @@ type ChatScreenProps = RouteComponentProps<{
   association: Association;
   api: GlobalApi;
   read: number;
-  length: number;
+  mailboxSize: number;
   inbox: Inbox;
   contacts: Contacts;
   group: Group;
@@ -99,42 +98,23 @@ export class ChatScreen extends Component<ChatScreenProps, ChatScreenState> {
       !(props.station in props.chatSynced) &&
       props.envelopes.length > 0;
 
-    const unreadCount = props.length - props.read;
+    const unreadCount = props.mailboxSize - props.read;
     const unreadMsg = unreadCount > 0 && props.envelopes[unreadCount - 1];
-
+    
     return (
       <div
         key={props.station}
         className="h-100 w-100 overflow-hidden flex flex-column relative">
-        <ChatHeader
-          match={props.match}
-          location={props.location}
-          api={props.api}
-          group={props.group}
-          association={props.association}
-          station={props.station}
-          sidebarShown={props.sidebarShown}
-          popout={props.popout} />
+        <ChatHeader {...props} />
         <ChatWindow
-          history={props.history}
           isChatMissing={isChatMissing}
           isChatLoading={isChatLoading}
           isChatUnsynced={isChatUnsynced}
           unreadCount={unreadCount}
           unreadMsg={unreadMsg}
-          pendingMessages={pendingMessages}
-          messages={props.envelopes}
-          length={props.length}
-          contacts={props.contacts}
-          association={props.association}
-          group={props.group}
+          stationPendingMessages={pendingMessages}
           ship={props.match.params.ship}
-          station={props.station}
-          api={props.api}
-          hideNicknames={props.hideNicknames}
-          hideAvatars={props.hideAvatars}
-          remoteContentPolicy={props.remoteContentPolicy}
-        />
+          {...props} />
         <ChatInput
           api={props.api}
           numMsgs={lastMsgNum}
diff --git a/pkg/interface/src/views/apps/chat/components/lib/chat-message.tsx b/pkg/interface/src/views/apps/chat/components/lib/chat-message.tsx
index 3def367c6a..12174803a1 100644
--- a/pkg/interface/src/views/apps/chat/components/lib/chat-message.tsx
+++ b/pkg/interface/src/views/apps/chat/components/lib/chat-message.tsx
@@ -2,23 +2,23 @@ import React, { PureComponent, Fragment } from "react";
 import moment from "moment";
 
 import { Message } from "./message";
-
-type IMessage = Envelope & { pending?: boolean };
-
+import { Envelope } from "~/types/chat-update";
+import _ from "lodash";
 
 export const ChatMessage = (props) => {
   const {
     msg,
     previousMsg,
     nextMsg,
-    isLastUnread,
+    isFirstUnread,
     group,
     association,
     contacts,
     unreadRef,
     hideAvatars,
     hideNicknames,
-    remoteContentPolicy
+    remoteContentPolicy,
+    className = ''
   } = props;
 
   // Render sigil if previous message is not by the same sender
@@ -48,10 +48,11 @@ export const ChatMessage = (props) => {
       hideNicknames={hideNicknames}
       hideAvatars={hideAvatars}
       remoteContentPolicy={remoteContentPolicy}
+      className={className}
     />
   );
 
-  if (props.isLastUnread) {
+  if (isFirstUnread) {
     return (
       <Fragment key={msg.uid}>
         {messageElem}
@@ -75,12 +76,12 @@ export const ChatMessage = (props) => {
   } else if (dayBreak) {
     return (
       <Fragment key={msg.uid}>
-        {messageElem}
         <div
           className="pv3 gray2 b--gray2 flex items-center justify-center f9 "
         >
           <p>{moment(_.get(msg, when)).calendar()}</p>
         </div>
+        {messageElem}
       </Fragment>
     );
   } else {
diff --git a/pkg/interface/src/views/apps/chat/components/lib/chat-scroll-container.js b/pkg/interface/src/views/apps/chat/components/lib/chat-scroll-container.js
deleted file mode 100644
index 74580f9954..0000000000
--- a/pkg/interface/src/views/apps/chat/components/lib/chat-scroll-container.js
+++ /dev/null
@@ -1,143 +0,0 @@
-import React, { Component, Fragment } from "react";
-
-import { scrollIsAtTop, scrollIsAtBottom } from "~/logic/lib/util";
-
-// Restore chat position on FF when new messages come in
-const recalculateScrollTop = (lastScrollHeight, scrollContainer) => {
-  if (!scrollContainer || !lastScrollHeight) {
-    return;
-  }
-
-  const newScrollTop = scrollContainer.scrollHeight - lastScrollHeight;
-  if (scrollContainer.scrollTop !== 0 ||
-      scrollContainer.scrollTop === newScrollTop) {
-    return;
-  }
-
-  scrollContainer.scrollTop = scrollContainer.scrollHeight - lastScrollHeight;
-};
-
-
-export class ChatScrollContainer extends Component {
-  constructor(props) {
-    super(props);
-
-    // only for FF
-    this.state = {
-      lastScrollHeight: null
-    };
-
-    this.isTriggeredScroll = false;
-
-    this.isAtBottom = true;
-    this.isAtTop = false;
-
-    this.containerDidScroll = this.containerDidScroll.bind(this);
-
-    this.containerRef = React.createRef();
-    this.scrollRef = React.createRef();
-  }
-  
-  containerDidScroll(e) {
-    const { props } = this;
-    if (scrollIsAtTop(e.target)) {
-      // Save scroll position for FF
-      if (navigator.userAgent.includes("Firefox")) {
-        this.setState({
-          lastScrollHeight: e.target.scrollHeight,
-        });
-      }
-
-      if (!this.isAtTop) {
-        props.scrollIsAtTop();
-      }
-
-      this.isTriggeredScroll = false;
-      this.isAtBottom = false;
-      this.isAtTop = true;
-    } else if (scrollIsAtBottom(e.target) && !this.isTriggeredScroll) {
-      if (!this.isAtBottom) {
-        props.scrollIsAtBottom();
-      }
-
-      this.isTriggeredScroll = false;
-      this.isAtBottom = true;
-      this.isAtTop = false;
-    } else {
-      this.isAtBottom = false;
-      this.isAtTop = false;
-      this.isTriggeredScroll = false;
-    }
-  }
-
-  render() {
-    // Replace with just the "not Firefox" implementation
-    // when Firefox #1042151 is patched.
-
-    if (navigator.userAgent.includes("Firefox")) {
-      return this.firefoxScrollContainer();
-    } else {
-      return this.normalScrollContainer();
-    }
-  }
-
-  firefoxScrollContainer() {
-    return (
-      <div
-        className="relative overflow-y-scroll h-100"
-        onScroll={this.containerDidScroll}
-        ref={this.containerRef}>
-        <div
-          className="bg-white bg-gray0-d pt3 pb2 flex flex-column-reverse"
-          style={{ resize: "vertical" }}>
-          <div ref={this.scrollRef}></div>
-          {this.props.children}
-        </div>
-      </div>
-    );
-  }
-
-  normalScrollContainer() {
-    return (
-      <div
-        className={
-          "overflow-y-scroll bg-white bg-gray0-d pt3 pb2 flex " +
-          "flex-column-reverse relative"
-        }
-        style={{ height: "100%", resize: "vertical" }}
-        onScroll={this.containerDidScroll}>
-        <div ref={this.scrollRef}></div>
-        {this.props.children}
-      </div>
-    );
-  }
-
-  scrollToBottom() {
-    this.isTriggeredScroll = true;
-    if (this.scrollRef.current) {
-      this.scrollRef.current.scrollIntoView(false);
-    }
-
-    if (navigator.userAgent.includes("Firefox")) {
-      recalculateScrollTop(
-        this.state.lastScrollHeight,
-        this.scrollContainer
-      );
-    }
-  }
-
-  scrollToReference(ref) {
-    this.isTriggeredScroll = true;
-    if (this.scrollRef.current && ref.current) {
-      ref.current.scrollIntoView({ block: 'center' });
-    }
-
-    if (navigator.userAgent.includes("Firefox")) {
-      recalculateScrollTop(
-        this.state.lastScrollHeight,
-        this.scrollContainer
-      );
-    }
-  }
-
-}
diff --git a/pkg/interface/src/views/apps/chat/components/lib/chat-window.tsx b/pkg/interface/src/views/apps/chat/components/lib/chat-window.tsx
index ebb9952837..137a4f9c4c 100644
--- a/pkg/interface/src/views/apps/chat/components/lib/chat-window.tsx
+++ b/pkg/interface/src/views/apps/chat/components/lib/chat-window.tsx
@@ -1,54 +1,140 @@
 import React, { Component, Fragment } from "react";
+import { Virtuoso as VirtualList, VirtuosoMethods } from 'react-virtuoso';
 
 import { ChatMessage } from './chat-message';
-import { ChatScrollContainer } from "./chat-scroll-container";
 import { UnreadNotice } from "./unread-notice";
 import { ResubscribeElement } from "./resubscribe-element";
 import { BacklogElement } from "./backlog-element";
+import { Envelope, IMessage } from "~/types/chat-update";
+import { RouteComponentProps } from "react-router-dom";
+import { Patp, Path } from "~/types/noun";
+import { Contacts } from "~/types/contact-update";
+import { Association } from "~/types/metadata-update";
+import { Group } from "~/types/group-update";
+import GlobalApi from "~/logic/api/global";
+import _ from "lodash";
+import { LocalUpdateRemoteContentPolicy } from "~/types";
+import { ListRange } from "react-virtuoso/dist/engines/scrollSeekEngine";
+
 
-const MAX_BACKLOG_SIZE = 1000;
-const DEFAULT_BACKLOG_SIZE = 200;
-const PAGE_SIZE = 50;
 const INITIAL_LOAD = 20;
+const DEFAULT_BACKLOG_SIZE = 200;
+const IDLE_THRESHOLD = 3;
+
+const Placeholder = ({ height, index, className = '', style = {}, ...props }) => (
+  <div className={`w-100 f7 pl3 pt4 pr3 cf flex lh-copy ${className}`} style={{ height, ...style }} {...props}>
+      <div className="fl pr3 v-top bg-white bg-gray0-d">
+        <span
+          className="db bg-gray2 bg-white-d"
+          style={{
+            width: "24px",
+            height: "24px",
+            borderRadius: "50%",
+            visibility: (index % 5 == 0) ? "initial" : "hidden",
+          }}
+        ></span>
+      </div>
+      <div className="fr clamp-message white-d" style={{ flexGrow: 1, marginTop: -8 }}>
+        <div className="hide-child" style={{paddingTop: "6px", visibility: (index % 5 == 0) ? "initial" : "hidden" }}>
+          <p className={`v-mid f9 gray2 dib mr3 c-default`}>
+            <span className="mw5 db"><span className="bg-gray5 bg-gray1-d db w-100 h-100"></span></span>
+          </p>
+          <p className="v-mid mono f9 gray2 dib"><span className="bg-gray5 bg-gray1-d db w-100 h-100" style={{height: "1em", width: `${(index % 3 + 1) * 3}em`}}></span></p>
+          <p className="v-mid mono f9 ml2 gray2 dib child dn-s"><span className="bg-gray5 bg-gray1-d db w-100 h-100"></span></p>
+        </div>
+        <span className="bg-gray5 bg-gray1-d db w-100 h-100 db" style={{height: `1em`, width: `${(index % 5) * 20}%`}}></span>
+      </div>
+    </div>
+);
 
 
-export class ChatWindow extends Component {
+type ChatWindowProps = RouteComponentProps<{
+  ship: Patp;
+  station: string;
+}> & {
+  unreadCount: number;
+  envelopes: Envelope[];
+  isChatMissing: boolean;
+  isChatLoading: boolean;
+  isChatUnsynced: boolean;
+  unreadMsg: Envelope | false;
+  stationPendingMessages: IMessage[];
+  mailboxSize: number;
+  contacts: Contacts;
+  association: Association;
+  group: Group;
+  ship: Patp;
+  station: any;
+  api: GlobalApi;
+  hideNicknames: boolean;
+  hideAvatars: boolean;
+  remoteContentPolicy: LocalUpdateRemoteContentPolicy;
+}
+
+interface ChatWindowState {
+  fetchPending: boolean;
+  idle: boolean;
+  range: ListRange;
+  initialized: boolean;
+}
+
+export class ChatWindow extends Component<ChatWindowProps, ChatWindowState> {
+  private unreadReference: React.RefObject<Component>;
+  private virtualList: React.RefObject<VirtuosoMethods>;
+
   constructor(props) {
     super(props);
-    this.state = {
-      numPages: 1,
-    };
 
-    this.hasAskedForMessages = false;
+    this.state = {
+      fetchPending: false,
+      idle: (this.initialIndex() < props.mailboxSize - IDLE_THRESHOLD) ? true : false,
+      range: { startIndex: 0, endIndex: 0},
+      initialized: false
+    };
     
     this.dismissUnread = this.dismissUnread.bind(this);
-    this.scrollIsAtBottom = this.scrollIsAtBottom.bind(this);
-    this.scrollIsAtTop = this.scrollIsAtTop.bind(this);
+    this.initialIndex = this.initialIndex.bind(this);
+    this.scrollToUnread = this.scrollToUnread.bind(this);
 
-    this.scrollReference = React.createRef();
     this.unreadReference = React.createRef();
+    this.virtualList = React.createRef();
   }
 
   componentDidMount() {
     this.initialFetch();
+  }
 
-    if (this.state.numPages === 1 && this.props.unreadCount < INITIAL_LOAD) {
-      this.dismissUnread();
-      this.scrollToBottom();
-    }
+  initialIndex() {
+    const { mailboxSize, unreadCount } = this.props;
+    return Math.min(Math.max(mailboxSize - 1 < INITIAL_LOAD
+      ? 0
+      : unreadCount // otherwise if there are unread messages
+        ? mailboxSize - unreadCount - 1 // put the one right before at the top
+        : mailboxSize - 1,
+    0), mailboxSize);
   }
 
   initialFetch() {
-    const { props } = this;
-    if (props.messages.length > 0) {
-      const unreadUnloaded = props.unreadCount - props.messages.length;
-
-      if (unreadUnloaded <= MAX_BACKLOG_SIZE &&
-          unreadUnloaded + INITIAL_LOAD > DEFAULT_BACKLOG_SIZE) {
-        this.fetchBacklog(unreadUnloaded + INITIAL_LOAD);
-      } else {
-        this.fetchBacklog(DEFAULT_BACKLOG_SIZE);
+    const { envelopes, mailboxSize, unreadCount } = this.props;
+    if (envelopes.length > 0) {
+      const start = Math.min(mailboxSize - unreadCount, mailboxSize - DEFAULT_BACKLOG_SIZE);
+      this.fetchMessages(start, start + DEFAULT_BACKLOG_SIZE, true);
+      const initialIndex = this.initialIndex();
+      if (initialIndex < mailboxSize - IDLE_THRESHOLD) {
+        this.setState({ idle: true });
       }
+      if (unreadCount !== mailboxSize) {
+        this.virtualList.current?.scrollToIndex({
+          index: initialIndex,
+          align: initialIndex <= 1 ? 'end' : 'start'
+        });
+        setTimeout(() => {
+          this.setState({ initialized: true });
+        }, 500);
+      } else {
+        this.setState({ initialized: true });
+      }
+      
     } else {
       setTimeout(() => {
         this.initialFetch();
@@ -57,141 +143,156 @@ export class ChatWindow extends Component {
   }
 
   componentDidUpdate(prevProps, prevState) {
-    const { props, state } = this;
+    const { isChatMissing, history, envelopes, mailboxSize, unreadCount } = this.props;
+    let { idle } = this.state;
 
-    if (props.isChatMissing) {
-      props.history.push("/~chat");
-    } else if (props.messages.length >= prevProps.messages.length + 10) {
-      this.hasAskedForMessages = false;
-      let numPages = props.unreadCount > 0 ? 
-        Math.ceil(props.unreadCount / PAGE_SIZE) : this.state.numPages;
+    if (isChatMissing) {
+      history.push("/~chat");
+    } else if (envelopes.length !== prevProps.envelopes.length && this.state.fetchPending) {
+      this.setState({ fetchPending: false });
+    }
 
-      if (this.state.numPages === numPages) {
-        if (props.unreadCount > 20) {
-          this.scrollToUnread();    
+    if (this.state.range.endIndex !== prevState.range.endIndex) {
+      if (this.state.range.endIndex < mailboxSize - IDLE_THRESHOLD) {
+        if (!idle) {
+          idle = true;
         }
-      } else {
-        this.setState({ numPages }, () => {
-          if (props.unreadCount > 20) {
-            this.scrollToUnread();    
-          }
-        });
+      } else if (idle) {
+        idle = false;
       }
-    } else if (
-      state.numPages === 1 &&
-      this.props.unreadCount < INITIAL_LOAD &&
-      this.props.unreadCount > 0
-    ) {
-      this.dismissUnread();
-      this.scrollToBottom();
+      this.setState({ idle });
     }
-  }
 
-  scrollIsAtTop() {
-    const { props, state } = this;
-    this.setState({ numPages: state.numPages + 1 }, () => {
-      if (state.numPages * PAGE_SIZE < props.length) {
-        this.fetchBacklog(DEFAULT_BACKLOG_SIZE);
-      }
-    });
-  }
-
-  scrollIsAtBottom() {
-    if (this.state.numPages !== 1) {
-      this.setState({ numPages: 1 });
-      this.dismissUnread();
+    if (!idle && idle !== prevState.idle) {
+      setTimeout(() => {
+        this.virtualList.current?.scrollToIndex(mailboxSize);
+      }, 500)
     }
-  }
 
-  scrollToBottom() {
-    if (this.scrollReference.current) {
-      this.scrollReference.current.scrollToBottom();
-    }
-    if (this.state.numPages !== 1) {
-      this.setState({ numPages: 1 });
+    if (!idle && prevProps.unreadCount !== unreadCount) {
+      this.virtualList.current?.scrollToIndex(mailboxSize);
     }
   }
 
   scrollToUnread() {
-    if (this.scrollReference.current && this.unreadReference.current) {
-      this.scrollReference.current.scrollToReference(this.unreadReference);
-    }
+    const { mailboxSize, unreadCount } = this.props;
+    this.virtualList.current?.scrollToIndex({
+      index: mailboxSize - unreadCount,
+      align: 'center'
+    });
   }
 
   dismissUnread() {
     this.props.api.chat.read(this.props.station);
   }
 
-  fetchBacklog(size) {
-    const { props } = this;
+  fetchMessages(start, end, force = false) {
+    start = Math.max(start, 0);
+    end = Math.max(end, 0);
+    const { api, mailboxSize, station } = this.props;
 
     if (
-      props.messages.length >= props.length ||
-      this.hasAskedForMessages ||
-      props.length <= 0
+      (this.state.fetchPending ||
+      mailboxSize <= 0)
+      && !force
     ) {
       return;
     }
+      
+    api.chat
+      .fetchMessages(Math.max(mailboxSize - end, 0), Math.min(mailboxSize - start, mailboxSize), station)
+      .finally(() => {
+        this.setState({ fetchPending: false });
+      });
 
-    const start =
-      props.length - props.messages[props.messages.length - 1].number;
-    if (start > 0) {
-      const end = start + size < props.length ? start + size : props.length;
-      props.api.chat.fetchMessages(start + 1, end, props.station);
-      this.hasAskedForMessages = true;
-    }
+    this.setState({ fetchPending: true });
   }
 
   render() {
-    const { props, state } = this;
-    const sliceLength = Math.min(
-      state.numPages * PAGE_SIZE,
-      props.messages.length + props.pendingMessages.length
-    );
-    const messages =
-      props.pendingMessages
-        .concat(props.messages)
-        .slice(0, sliceLength);
+    const {
+      envelopes,
+      stationPendingMessages,
+      unreadCount,
+      unreadMsg,
+      isChatLoading,
+      isChatUnsynced,
+      api,
+      ship,
+      station,
+      association,
+      group,
+      contacts,
+      mailboxSize,
+      hideAvatars,
+      hideNicknames,
+      remoteContentPolicy,
+    } = this.props;
+    
+    const messages: Envelope[] = [];
+    const debouncedFetch = _.debounce(this.fetchMessages, 500).bind(this);
 
+    envelopes
+      .concat(stationPendingMessages)
+      .forEach((message) => {
+        messages[message.number] = message;
+      });
+    
     return (
       <Fragment>
         <UnreadNotice
-          unreadCount={props.unreadCount}
-          unreadMsg={props.unreadMsg}
-          dismissUnread={this.dismissUnread} />
-        <ChatScrollContainer
-          ref={this.scrollReference}
-          scrollIsAtBottom={this.scrollIsAtBottom}
-          scrollIsAtTop={this.scrollIsAtTop}>
-          <BacklogElement isChatLoading={props.isChatLoading} />
-          <ResubscribeElement
-            api={props.api}
-            host={props.ship}
-            station={props.station}
-            isChatUnsynced={props.isChatUnsynced}
-          />
-          { messages.map((msg, i) => (
-              <ChatMessage
-                key={msg.uid}
-                unreadRef={this.unreadReference}
-                isLastUnread={
-                  props.unreadCount > 0 &&
-                  i === props.unreadCount - 1 &&
-                  state.numPages !== 1
-                }
-                msg={msg}
-                previousMsg={messages[i - 1]}
-                nextMsg={messages[i + 1]}
-                association={props.association}
-                group={props.group}
-                contacts={props.contacts} 
-                hideAvatars={props.hideAvatars}
-                hideNicknames={props.hideNicknames}
-                remoteContentPolicy={props.remoteContentPolicy}
-              />
-            ))
-          }
-        </ChatScrollContainer>
+          unreadCount={unreadCount}
+          unreadMsg={unreadMsg}
+          dismissUnread={this.dismissUnread}
+          onClick={this.scrollToUnread}
+        />
+        <BacklogElement isChatLoading={isChatLoading} />
+        <ResubscribeElement {...{ api, host: ship, station, isChatUnsynced}} />
+        {messages.length ? <VirtualList
+          ref={this.virtualList}
+          style={{height: '100%', width: '100%', visibility: this.state.initialized ? 'initial' : 'hidden'}}
+          totalCount={mailboxSize}
+          followOutput={!this.state.idle}
+          endReached={this.dismissUnread}
+          scrollSeek={{
+            enter: velocity => Math.abs(velocity) > 2000,
+            exit: velocity => Math.abs(velocity) < 200,
+            change: (_velocity, _range) => {},
+            placeholder: this.state.initialized ? Placeholder : () => <div></div>
+          }}
+          startReached={() => debouncedFetch(0, DEFAULT_BACKLOG_SIZE)}
+          overscan={DEFAULT_BACKLOG_SIZE}
+          rangeChanged={(range) => {
+            this.setState({ range });
+            debouncedFetch(range.startIndex - (DEFAULT_BACKLOG_SIZE / 2), range.endIndex + (DEFAULT_BACKLOG_SIZE / 2));
+          }}
+          item={(i) => {
+            const number = i + 1;
+            const msg = messages[number];
+            
+            if (!msg) {
+              debouncedFetch(number - DEFAULT_BACKLOG_SIZE, number + DEFAULT_BACKLOG_SIZE);
+              return <Placeholder index={number} height="0px" style={{overflow: 'hidden'}} />;
+            }
+            return  <ChatMessage
+              key={number}
+              unreadRef={this.unreadReference}
+              isFirstUnread={
+                unreadCount
+                && mailboxSize - unreadCount === number
+              }
+              msg={msg}
+              previousMsg={messages[number + 1]}
+              nextMsg={messages[number - 1]}
+              association={association}
+              group={group}
+              contacts={contacts}
+              hideAvatars={hideAvatars}
+              hideNicknames={hideNicknames}
+              remoteContentPolicy={remoteContentPolicy}
+              className={number === mailboxSize ? 'pb3' : ''}
+            />
+          }}
+        /> : null}
       </Fragment>
     );
   }
diff --git a/pkg/interface/src/views/apps/chat/components/lib/message.js b/pkg/interface/src/views/apps/chat/components/lib/message.js
index f4753bdb57..6174afd0bb 100644
--- a/pkg/interface/src/views/apps/chat/components/lib/message.js
+++ b/pkg/interface/src/views/apps/chat/components/lib/message.js
@@ -6,15 +6,21 @@ import moment from 'moment';
 
 
 export const Message = (props) => {
-  const pending = props.msg.pending ? ' o-40' : '';
+  const {
+    msg,
+    renderSigil,
+    remoteContentPolicy,
+    className = ''
+  } = props;
+  const pending = msg.pending ? ' o-40' : '';
   const containerClass =
-    props.renderSigil ?
-      `w-100 f7 pl3 pt4 pr3 cf flex lh-copy ` + pending :
-      'w-100 pr3 cf hide-child flex' + pending;
+    renderSigil
+      ? `w-100 f7 pl3 pt4 pr3 cf flex lh-copy ${pending} ${className}`
+      : `w-100 pr3 cf hide-child flex ${pending} ${className}`;
 
   const timestamp =
-    moment.unix(props.msg.when / 1000).format(
-      props.renderSigil ? 'hh:mm a' : 'hh:mm'
+    moment.unix(msg.when / 1000).format(
+      renderSigil ? 'hh:mm a' : 'hh:mm'
     );
 
 
@@ -24,14 +30,14 @@ export const Message = (props) => {
            minHeight: 'min-content'
          }}>
       {
-        props.renderSigil ? (
+        renderSigil ? (
           renderWithSigil(props, timestamp)
         ) : (
           <div className="flex w-100">
             <p className="child pt2 pl2 pr1 mono f9 gray2 dib">{timestamp}</p>
             <div className="fr f7 clamp-message white-d pr3 lh-copy"
                  style={{ flexGrow: 1 }}>
-              <MessageContent letter={props.msg.letter} remoteContentPolicy={props.remoteContentPolicy}/>
+              <MessageContent letter={msg.letter} remoteContentPolicy={remoteContentPolicy}/>
             </div>
           </div>
         )
@@ -41,66 +47,67 @@ export const Message = (props) => {
 };
 
 const renderWithSigil = (props, timestamp) => {
-    const paddingTop = props.paddingTop ? { 'paddingTop': '6px' } : '';
-    const datestamp =
-      '~' + moment.unix(props.msg.when / 1000).format('YYYY.M.D');
 
-    const contact = props.msg.author in props.contacts
-      ? props.contacts[props.msg.author] : false;
-    const showNickname = !props.hideNicknames && contact?.nickname;
-    let name = `~${props.msg.author}`;
-    let color = '#000000';
-    let sigilClass = 'mix-blend-diff';
-    if (contact) {
-      name = showNickname
-        ? contact.nickname
-        : `~${props.msg.author}`;
-      color = `#${uxToHex(contact.color)}`;
-      sigilClass = '';
-    }
+  const paddingTop = props.paddingTop ? { 'paddingTop': '6px' } : '';
+  const datestamp =
+    '~' + moment.unix(props.msg.when / 1000).format('YYYY.M.D');
 
-    if (`~${props.msg.author}` === name) {
-      name = cite(props.msg.author);
-    }
-
-    return (
-      <div className="flex w-100">
-        <OverlaySigil
-          ship={props.msg.author}
-          contact={contact}
-          color={color}
-          sigilClass={sigilClass}
-          association={props.association}
-          group={props.group}
-          hideAvatars={props.hideAvatars}
-          hideNicknames={props.hideNicknames}
-          className="fl pr3 v-top bg-white bg-gray0-d"
-        />
-        <div className="fr clamp-message white-d"
-             style={{ flexGrow: 1, marginTop: -8 }}>
-          <div className="hide-child" style={paddingTop}>
-            <p className={`v-mid f9 gray2 dib mr3 c-default`}>
-              <span
-                className={
-                  'mw5 db truncate pointer ' +
-                  (showNickname ? '' : 'mono')
-                }
-                onClick={() => {
-                  writeText(props.msg.author);
-                }}
-                title={`~${props.msg.author}`}
-              >
-                {name}
-              </span>
-            </p>
-            <p className={`v-mid mono f9 gray2 dib`}>{timestamp}</p>
-            <p className={`v-mid mono f9 ml2 gray2 dib child dn-s`}>
-              {datestamp}
-            </p>
-          </div>
-          <MessageContent letter={props.msg.letter} remoteContentPolicy={props.remoteContentPolicy} />
-        </div>
-      </div>
-    );
+  const contact = props.msg.author in props.contacts
+    ? props.contacts[props.msg.author] : false;
+  const showNickname = !props.hideNicknames && contact?.nickname;
+  let name = `~${props.msg.author}`;
+  let color = '#000000';
+  let sigilClass = 'mix-blend-diff';
+  if (contact) {
+    name = showNickname
+      ? contact.nickname
+      : `~${props.msg.author}`;
+    color = `#${uxToHex(contact.color)}`;
+    sigilClass = '';
   }
 
+  if (`~${props.msg.author}` === name) {
+    name = cite(props.msg.author);
+  }
+
+  return (
+    <div className="flex w-100">
+      <OverlaySigil
+        ship={props.msg.author}
+        contact={contact}
+        color={color}
+        sigilClass={sigilClass}
+        association={props.association}
+        group={props.group}
+        hideAvatars={props.hideAvatars}
+        hideNicknames={props.hideNicknames}
+        className="fl pr3 v-top bg-white bg-gray0-d"
+      />
+      <div className="fr clamp-message white-d"
+            style={{ flexGrow: 1, marginTop: -8 }}>
+        <div className="hide-child" style={paddingTop}>
+          <p className={`v-mid f9 gray2 dib mr3 c-default`}>
+            <span
+              className={
+                'mw5 db truncate pointer ' +
+                (showNickname ? '' : 'mono')
+              }
+              onClick={() => {
+                writeText(props.msg.author);
+              }}
+              title={`~${props.msg.author}`}
+            >
+              {name}
+            </span>
+          </p>
+          <p className={`v-mid mono f9 gray2 dib`}>{timestamp}</p>
+          <p className={`v-mid mono f9 ml2 gray2 dib child dn-s`}>
+            {datestamp}
+          </p>
+        </div>
+        <MessageContent letter={props.msg.letter} remoteContentPolicy={props.remoteContentPolicy} />
+      </div>
+    </div>
+  );
+}
+
diff --git a/pkg/interface/src/views/apps/chat/components/lib/unread-notice.js b/pkg/interface/src/views/apps/chat/components/lib/unread-notice.js
index 2724d23c9b..954ed33578 100644
--- a/pkg/interface/src/views/apps/chat/components/lib/unread-notice.js
+++ b/pkg/interface/src/views/apps/chat/components/lib/unread-notice.js
@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import moment from 'moment';
 
 export const UnreadNotice = (props) => {
-  const { unreadCount, unreadMsg, dismissUnread } = props;
+  const { unreadCount, unreadMsg, dismissUnread, onClick } = props;
 
   if (!unreadMsg || (unreadCount === 0)) {
     return null;
@@ -22,7 +22,7 @@ export const UnreadNotice = (props) => {
         "ba b--green2 green2 bg-white bg-gray0-d flex items-center " +
         "pa2 f9 justify-between br1"
       }>
-        <p className="lh-copy db">
+        <p className="lh-copy db pointer" onClick={onClick}>
           {unreadCount} new messages since{' '}
           {datestamp && (
             <>
diff --git a/pkg/interface/src/views/apps/groups/components/lib/contact-sidebar.tsx b/pkg/interface/src/views/apps/groups/components/lib/contact-sidebar.tsx
index f337efee5d..60ab9a0035 100644
--- a/pkg/interface/src/views/apps/groups/components/lib/contact-sidebar.tsx
+++ b/pkg/interface/src/views/apps/groups/components/lib/contact-sidebar.tsx
@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import { Link } from 'react-router-dom';
-import { FixedSizeList as List } from 'react-window';
+import { Virtuoso as VirtualList } from 'react-virtuoso';
 
 import { ContactItem } from './contact-item';
 import { ShareSheet } from './share-sheet';
@@ -180,19 +180,17 @@ export class ContactSidebar extends Component<ContactSidebarProps, ContactSideba
           >Channels</Link>
           {shareSheet}
           <h2 className="f9 pt4 pr4 pb2 pl4 gray2 c-default">Members</h2>
-          <List
-            height={this.state.memberboxHeight}
+          <VirtualList
+            style={{ height: this.state.memberboxHeight, width: '100%' }}
             className="flex-auto"
-            itemCount={contactItems.length + groupItems.length}
-            itemSize={44}
-            width="100%"
-          >
-            {({ index, style }) => (<div style={style}>{
-              index <= (contactItems.length - 1) // If the index is within the length of contact items,
+            totalCount={contactItems.length + groupItems.length}
+            itemHeight={44} // We happen to know this
+            item={
+              (index) =>  index <= (contactItems.length - 1) // If the index is within the length of contact items,
                 ? contactItems[index] // show a contact item
                 : groupItems[index - contactItems.length] // Otherwise show a group item
-              }</div>)}
-          </List>
+            }
+          />
 
         </div>
         <Spinner awaiting={this.state.awaiting} text="Removing from group..." classes="pa2 ba absolute right-1 bottom-1 b--gray1-d" />
diff --git a/pkg/interface/src/views/components/Group.tsx b/pkg/interface/src/views/components/Group.tsx
index e364c0aeb4..1e635cb8f1 100644
--- a/pkg/interface/src/views/components/Group.tsx
+++ b/pkg/interface/src/views/components/Group.tsx
@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import _, { capitalize } from 'lodash';
-import { FixedSizeList as List } from 'react-window';
+import { Virtuoso as VirtualList } from 'react-virtuoso';
 
 import { cite, deSig } from '~/logic/lib/util';
 import { roleForShip, resourceFromPath } from '~/logic/lib/group';
@@ -334,14 +334,11 @@ export class GroupView extends Component<
         {'open' in group.policy && this.renderBanned(group.policy)}
         <div className='flex flex-column'>
           <div className='f9 gray2 mt6 mb3'>Members</div>
-          <List
-            height={500}
-            itemCount={memberElements.length}
-            itemSize={44}
-            width="100%"
-          >
-          {({ index, style }) => <div key={index} style={style} className='flex flex-column pv3'>{memberElements[index]}</div>}
-          </List>
+          <VirtualList
+            style={{ height: '500px', width: '100%' }}
+            totalCount={memberElements.length}
+            item={(index) => <div key={index} className='flex flex-column pv3'>{memberElements[index]}</div>}
+          />
         </div>
 
         <Spinner
diff --git a/pkg/interface/src/views/components/RemoteContent.tsx b/pkg/interface/src/views/components/RemoteContent.tsx
index d57b20b616..892f1168ec 100644
--- a/pkg/interface/src/views/components/RemoteContent.tsx
+++ b/pkg/interface/src/views/components/RemoteContent.tsx
@@ -116,7 +116,10 @@ export default class RemoteContent extends Component<RemoteContentProps, RemoteC
         </>
       );
     } else if (isOembed && remoteContentPolicy.oembedShown) {
-      this.loadOembed();
+      if (!this.state.embed) {
+        this.loadOembed();
+      }
+
       return (
         <Fragment>
           {renderUrl ? this.wrapInLink(this.state.embed && this.state.embed.title ? this.state.embed.title : url) : null}

From 952af5cf0e03636872205b394581bd013e9a6fc6 Mon Sep 17 00:00:00 2001
From: Tyler Brown Cifu Shuster <tyler@fivepaths.com>
Date: Mon, 7 Sep 2020 20:59:03 -0700
Subject: [PATCH 42/58] chat: added ability to blur chat editor

---
 .../src/views/apps/chat/components/lib/chat-editor.js          | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/pkg/interface/src/views/apps/chat/components/lib/chat-editor.js b/pkg/interface/src/views/apps/chat/components/lib/chat-editor.js
index be7dd64bef..fbae6c1741 100644
--- a/pkg/interface/src/views/apps/chat/components/lib/chat-editor.js
+++ b/pkg/interface/src/views/apps/chat/components/lib/chat-editor.js
@@ -116,6 +116,9 @@ export default class ChatEditor extends Component {
       extraKeys: {
         'Enter': () => {
           this.submit();
+        },
+        'Esc': () => {
+          this.editor?.getInputField().blur();
         }
       }
     };

From f3206312302b50a584fa1a25d63ced9812298f69 Mon Sep 17 00:00:00 2001
From: Liam Fitzgerald <liam@urizen.co>
Date: Tue, 8 Sep 2020 15:04:45 +1000
Subject: [PATCH 43/58] publish: choose group for groupify

---
 pkg/interface/src/logic/api/publish.ts        |  4 +-
 pkg/interface/src/views/apps/publish/app.tsx  |  1 +
 .../publish/components/lib/GroupifyForm.tsx   | 77 +++++++++++++++++++
 .../publish/components/lib/MetadataForm.tsx   | 16 ----
 .../apps/publish/components/lib/Notebook.tsx  |  3 +
 .../publish/components/lib/NotebookRoutes.tsx |  3 +-
 .../apps/publish/components/lib/Settings.tsx  | 36 ++++++---
 .../src/views/components/GroupSearch.tsx      |  2 +-
 8 files changed, 110 insertions(+), 32 deletions(-)
 create mode 100644 pkg/interface/src/views/apps/publish/components/lib/GroupifyForm.tsx

diff --git a/pkg/interface/src/logic/api/publish.ts b/pkg/interface/src/logic/api/publish.ts
index ad99dc077e..5b49aabfc9 100644
--- a/pkg/interface/src/logic/api/publish.ts
+++ b/pkg/interface/src/logic/api/publish.ts
@@ -82,11 +82,11 @@ export default class PublishApi extends BaseApi {
     return this.action('publish', 'publish-action', act);
   }
 
-  groupify(bookId: string) {
+  groupify(bookId: string, group: Path | null) {
     return this.publishAction({
       groupify: {
         book: bookId,
-        target: null,
+        target: group,
         inclusive: false
       }
     });
diff --git a/pkg/interface/src/views/apps/publish/app.tsx b/pkg/interface/src/views/apps/publish/app.tsx
index 3bcedd386c..cc161f1719 100644
--- a/pkg/interface/src/views/apps/publish/app.tsx
+++ b/pkg/interface/src/views/apps/publish/app.tsx
@@ -163,6 +163,7 @@ export default function PublishApp(props: PublishAppProps) {
                     hideNicknames={hideNicknames}
                     hideAvatars={hideAvatars}
                     remoteContentPolicy={remoteContentPolicy}
+                    associations={associations}
                     {...props}
                   />
                 );
diff --git a/pkg/interface/src/views/apps/publish/components/lib/GroupifyForm.tsx b/pkg/interface/src/views/apps/publish/components/lib/GroupifyForm.tsx
new file mode 100644
index 0000000000..3ceb350895
--- /dev/null
+++ b/pkg/interface/src/views/apps/publish/components/lib/GroupifyForm.tsx
@@ -0,0 +1,77 @@
+import React, { useEffect } from "react";
+import { Box, Col, Button, InputLabel, InputCaption } from "@tlon/indigo-react";
+import * as Yup from "yup";
+import GlobalApi from "~/logic/api/global";
+import { Notebook } from "~/types/publish-update";
+import { Contacts } from "~/types/contact-update";
+
+import { MetadataForm } from "./MetadataForm";
+import { Groups, Associations } from "~/types";
+import { Formik, FormikHelpers, Form } from "formik";
+import GroupSearch from "~/views/components/GroupSearch";
+import { AsyncButton } from "~/views/components/AsyncButton";
+
+const formSchema = Yup.object({
+  group: Yup.string().nullable(),
+});
+
+interface FormSchema {
+  group: string | null;
+}
+
+interface GroupifyFormProps {
+  host: string;
+  book: string;
+  notebook: Notebook;
+  groups: Groups;
+  api: GlobalApi;
+  associations: Associations;
+}
+
+export function GroupifyForm(props: GroupifyFormProps) {
+  const onGroupify = async (
+    values: FormSchema,
+    actions: FormikHelpers<FormSchema>
+  ) => {
+    try {
+      await props.api.publish.groupify(props.book, values.group);
+      actions.setStatus({ success: null });
+    } catch (e) {
+      actions.setStatus({ error: e.message });
+    }
+  };
+
+  const groupPath = props.notebook?.["writers-group-path"];
+
+  const isUnmanaged = props.groups?.[groupPath]?.hidden || false;
+
+  if (!isUnmanaged) {
+    return null;
+  }
+
+  const initialValues: FormSchema = {
+    group: null
+  };
+
+  return (
+    <Formik
+      validationSchema={formSchema}
+      initialValues={initialValues}
+      onSubmit={onGroupify}
+    >
+      <Form style={{ display: "contents" }}>
+        <GroupSearch
+          id="group"
+          label="Group"
+          caption="What group should this notebook be added to? If blank, a new group will be made for the notebook"
+          associations={props.associations}
+        />
+        <AsyncButton loadingText="Groupifying..." border>
+          Groupify
+        </AsyncButton>
+      </Form>
+    </Formik>
+  );
+}
+
+export default GroupifyForm;
diff --git a/pkg/interface/src/views/apps/publish/components/lib/MetadataForm.tsx b/pkg/interface/src/views/apps/publish/components/lib/MetadataForm.tsx
index 35932b701b..4209817ef4 100644
--- a/pkg/interface/src/views/apps/publish/components/lib/MetadataForm.tsx
+++ b/pkg/interface/src/views/apps/publish/components/lib/MetadataForm.tsx
@@ -50,7 +50,6 @@ const ResetOnPropsChange = (props: { init: FormSchema; book: string }) => {
 
 export function MetadataForm(props: MetadataFormProps) {
   const { host, notebook, api, book } = props;
-  const history = useHistory();
   const initialValues: FormSchema = {
     name: notebook?.title,
     description: notebook?.about,
@@ -72,11 +71,6 @@ export function MetadataForm(props: MetadataFormProps) {
     }
   };
 
-  const onDelete = async () => {
-    await api.publish.delBook(book);
-    history.push("/~publish");
-  };
-
   return (
     <Formik
       validationSchema={formSchema}
@@ -84,16 +78,6 @@ export function MetadataForm(props: MetadataFormProps) {
       onSubmit={onSubmit}
     >
       <Form style={{ display: "contents" }}>
-          <Col mb={4}>
-            <InputLabel>Delete Notebook</InputLabel>
-            <InputCaption>
-              Permanently delete this notebook. (All current members will no
-              longer see this notebook.)
-            </InputCaption>
-            <Button onClick={onDelete} mt={1} border error>
-              Delete this notebook
-            </Button>
-          </Col>
           <Input
             id="name"
             label="Rename"
diff --git a/pkg/interface/src/views/apps/publish/components/lib/Notebook.tsx b/pkg/interface/src/views/apps/publish/components/lib/Notebook.tsx
index 22febfcb7d..f98f2e6ac4 100644
--- a/pkg/interface/src/views/apps/publish/components/lib/Notebook.tsx
+++ b/pkg/interface/src/views/apps/publish/components/lib/Notebook.tsx
@@ -20,6 +20,7 @@ import { Groups } from "~/types/group-update";
 import { Contacts, Rolodex } from "~/types/contact-update";
 import GlobalApi from "~/logic/api/global";
 import styled from "styled-components";
+import {Associations} from "~/types";
 
 const TabList = styled(_TabList)`
   margin-bottom: ${(p) => p.theme.space[4]}px;
@@ -38,6 +39,7 @@ interface NotebookProps {
   contacts: Rolodex;
   groups: Groups;
   hideNicknames: boolean;
+  associations: Associations;
 }
 
 export function Notebook(props: NotebookProps & RouteComponentProps) {
@@ -130,6 +132,7 @@ export function Notebook(props: NotebookProps & RouteComponentProps) {
                 api={api}
                 notebook={notebook}
                 contacts={notebookContacts}
+                associations={props.associations}
                 groups={groups}
               />
             </TabPanel>
diff --git a/pkg/interface/src/views/apps/publish/components/lib/NotebookRoutes.tsx b/pkg/interface/src/views/apps/publish/components/lib/NotebookRoutes.tsx
index 385c316375..efe2f4449e 100644
--- a/pkg/interface/src/views/apps/publish/components/lib/NotebookRoutes.tsx
+++ b/pkg/interface/src/views/apps/publish/components/lib/NotebookRoutes.tsx
@@ -9,7 +9,7 @@ import { Contacts, Rolodex } from "../../../../types/contact-update";
 import Notebook from "./Notebook";
 import NewPost from "./new-post";
 import { NoteRoutes } from './NoteRoutes';
-import { LocalUpdateRemoteContentPolicy } from "~/types";
+import { LocalUpdateRemoteContentPolicy, Associations } from "~/types";
 
 interface NotebookRoutesProps {
   api: GlobalApi;
@@ -23,6 +23,7 @@ interface NotebookRoutesProps {
   hideAvatars: boolean;
   hideNicknames: boolean;
   remoteContentPolicy: LocalUpdateRemoteContentPolicy;
+  associations: Associations;
 }
 
 export function NotebookRoutes(
diff --git a/pkg/interface/src/views/apps/publish/components/lib/Settings.tsx b/pkg/interface/src/views/apps/publish/components/lib/Settings.tsx
index 29c9004b13..3bb3693c8d 100644
--- a/pkg/interface/src/views/apps/publish/components/lib/Settings.tsx
+++ b/pkg/interface/src/views/apps/publish/components/lib/Settings.tsx
@@ -5,7 +5,9 @@ import { Notebook } from "~/types/publish-update";
 import { Contacts } from "~/types/contact-update";
 
 import { MetadataForm } from "./MetadataForm";
-import { Groups } from "~/types";
+import { Groups, Associations } from "~/types";
+import GroupifyForm from "./GroupifyForm";
+import { useHistory } from "react-router-dom";
 
 interface SettingsProps {
   host: string;
@@ -14,13 +16,18 @@ interface SettingsProps {
   contacts: Contacts;
   groups: Groups;
   api: GlobalApi;
+  associations: Associations;
 }
 
+const Divider = (props) => (
+  <Box {...props} mb={4} borderBottom={1} borderBottomColor="lightGray" />
+);
 export function Settings(props: SettingsProps) {
-  const onGroupify = () => {
-    return props.api.publish.groupify(props.book);
+  const history = useHistory();
+  const onDelete = async () => {
+    await props.api.publish.delBook(props.book);
+    history.push("/~publish");
   };
-
   const groupPath = props.notebook?.["writers-group-path"];
 
   const isUnmanaged = props.groups?.[groupPath]?.hidden || false;
@@ -36,17 +43,22 @@ export function Settings(props: SettingsProps) {
     >
       {isUnmanaged && (
         <>
-          <Col mb={4}>
-            <InputLabel>Groupify</InputLabel>
-            <InputCaption>Turn this notebook into a group</InputCaption>
-            <Button onClick={onGroupify} border>
-              Groupify
-            </Button>
-          </Col>
-          <Box mb={4} borderBottom={1} borderBottomColor="washedGray" />
+          <GroupifyForm {...props} />
+          <Divider mt={4} />
         </>
       )}
       <MetadataForm {...props} />
+      <Divider />
+      <Col mb={4}>
+        <InputLabel>Delete Notebook</InputLabel>
+        <InputCaption>
+          Permanently delete this notebook. (All current members will no longer
+          see this notebook.)
+        </InputCaption>
+        <Button onClick={onDelete} mt={1} border error>
+          Delete this notebook
+        </Button>
+      </Col>
     </Box>
   );
 }
diff --git a/pkg/interface/src/views/components/GroupSearch.tsx b/pkg/interface/src/views/components/GroupSearch.tsx
index 5315d34c2b..1cf3032dfd 100644
--- a/pkg/interface/src/views/components/GroupSearch.tsx
+++ b/pkg/interface/src/views/components/GroupSearch.tsx
@@ -88,7 +88,7 @@ export function GroupSearch(props: InviteSearchProps) {
       caption={props.caption}
       candidates={groups}
       renderCandidate={renderCandidate}
-      disabled={value.length !== 0}
+      disabled={value && value.length !== 0}
       search={(s: string, a: Association) =>
         a.metadata.title.toLowerCase().startsWith(s.toLowerCase())
       }

From 55039f28790ca7f7c316da395e103fa611f19f20 Mon Sep 17 00:00:00 2001
From: Matilde Park <matilde.park@sunshinegardens.org>
Date: Tue, 8 Sep 2020 13:57:07 -0400
Subject: [PATCH 44/58] profile: add z-index for iOS safari

Fixes #3383.
---
 pkg/interface/src/views/apps/profile/profile.tsx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/pkg/interface/src/views/apps/profile/profile.tsx b/pkg/interface/src/views/apps/profile/profile.tsx
index a3f5219d07..1b986d33e3 100644
--- a/pkg/interface/src/views/apps/profile/profile.tsx
+++ b/pkg/interface/src/views/apps/profile/profile.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 
-import { Box, Text, Row, Col, Center, Icon } from "@tlon/indigo-react";
+import { Box, Text, Row, Col, Icon } from "@tlon/indigo-react";
 
 import { Sigil } from "~/logic/lib/sigil";
 import { uxToHex, MOBILE_BROWSER_REGEX } from "~/logic/lib/util";
@@ -15,7 +15,6 @@ const SidebarItem = ({ children, view, current }) => {
   return (
     <Link to={`/~profile/${view}`}>
       <Row
-        display="flex"
         alignItems="center"
         verticalAlign="middle"
         py={1}
@@ -85,7 +84,7 @@ export default function ProfileScreen(props: any) {
                     <Sigil ship={`~${ship}`} size={80} color={sigilColor} />
                   </Box>
                 </Box>
-                <Box width="100%" py={3}>
+                <Box width="100%" py={3} zIndex='2'>
                   <SidebarItem current={view} view="identity">
                     Your Identity
                   </SidebarItem>

From 694c752b3f139cdeb71c711e3ec7a984cd606be2 Mon Sep 17 00:00:00 2001
From: Matilde Park <matilde.park@sunshinegardens.org>
Date: Tue, 8 Sep 2020 13:59:39 -0400
Subject: [PATCH 45/58] profile: add react-helmet

---
 pkg/interface/src/views/apps/profile/profile.tsx | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/pkg/interface/src/views/apps/profile/profile.tsx b/pkg/interface/src/views/apps/profile/profile.tsx
index 1b986d33e3..735a5f7690 100644
--- a/pkg/interface/src/views/apps/profile/profile.tsx
+++ b/pkg/interface/src/views/apps/profile/profile.tsx
@@ -1,4 +1,6 @@
 import React from "react";
+import { Route, Link, Switch } from "react-router-dom";
+import Helmet from 'react-helmet';
 
 import { Box, Text, Row, Col, Icon } from "@tlon/indigo-react";
 
@@ -6,7 +8,6 @@ import { Sigil } from "~/logic/lib/sigil";
 import { uxToHex, MOBILE_BROWSER_REGEX } from "~/logic/lib/util";
 
 import Settings from "./components/settings";
-import { Route, Link } from "react-router-dom";
 import { ContactCard } from "../groups/components/lib/ContactCard";
 
 const SidebarItem = ({ children, view, current }) => {
@@ -33,6 +34,11 @@ const SidebarItem = ({ children, view, current }) => {
 export default function ProfileScreen(props: any) {
   const { ship, dark } = props;
   return (
+    <>
+    <Helmet defer={false}>
+      <title>OS1 - Profile</title>
+    </Helmet>
+    <Switch>
     <Route
       path={["/~profile/:view", "/~profile"]}
       render={({ match, history }) => {
@@ -119,5 +125,7 @@ export default function ProfileScreen(props: any) {
         );
       }}
     ></Route>
+      </Switch>
+    </>
   );
 }

From c9aa908838f4cb569318097a9e106c89b7cc765e Mon Sep 17 00:00:00 2001
From: Tyler Brown Cifu Shuster <tyler@fivepaths.com>
Date: Fri, 4 Sep 2020 09:37:15 -0700
Subject: [PATCH 46/58] links, chat: add drag and drop

---
 .../src/views/apps/chat/components/chat.tsx   |  41 ++-
 .../apps/chat/components/lib/chat-editor.js   |  16 +-
 .../lib/{chat-input.js => chat-input.tsx}     | 108 ++++++--
 .../apps/links/components/lib/link-submit.js  | 153 -----------
 .../apps/links/components/lib/link-submit.tsx | 255 ++++++++++++++++++
 pkg/interface/src/views/components/Spinner.js |  36 ++-
 .../src/views/components/s3-upload.js         | 118 --------
 .../src/views/components/s3-upload.tsx        | 142 ++++++++++
 8 files changed, 544 insertions(+), 325 deletions(-)
 rename pkg/interface/src/views/apps/chat/components/lib/{chat-input.js => chat-input.tsx} (64%)
 delete mode 100644 pkg/interface/src/views/apps/links/components/lib/link-submit.js
 create mode 100644 pkg/interface/src/views/apps/links/components/lib/link-submit.tsx
 delete mode 100644 pkg/interface/src/views/components/s3-upload.js
 create mode 100644 pkg/interface/src/views/components/s3-upload.tsx

diff --git a/pkg/interface/src/views/apps/chat/components/chat.tsx b/pkg/interface/src/views/apps/chat/components/chat.tsx
index fa66fcc788..2fabcbf758 100644
--- a/pkg/interface/src/views/apps/chat/components/chat.tsx
+++ b/pkg/interface/src/views/apps/chat/components/chat.tsx
@@ -15,6 +15,8 @@ import GlobalApi from "~/logic/api/global";
 import { Association } from "~/types/metadata-update";
 import {Group} from "~/types/group-update";
 import { LocalUpdateRemoteContentPolicy } from "~/types";
+import { S3Upload, SubmitDragger } from '~/views/components/s3-upload';
+import { IUnControlledCodeMirror } from "react-codemirror2";
 
 
 type ChatScreenProps = RouteComponentProps<{
@@ -43,9 +45,11 @@ type ChatScreenProps = RouteComponentProps<{
 
 interface ChatScreenState {
   messages: Map<string, string>;
+  dragover: boolean;
 }
 
 export class ChatScreen extends Component<ChatScreenProps, ChatScreenState> {
+  private chatInput: React.RefObject<ChatInput>;
   lastNumPending = 0;
   activityTimeout: NodeJS.Timeout | null = null;
 
@@ -54,8 +58,11 @@ export class ChatScreen extends Component<ChatScreenProps, ChatScreenState> {
 
     this.state = {
       messages: new Map(),
+      dragover: false,
     };
 
+    this.chatInput = React.createRef();
+
     moment.updateLocale("en", {
       calendar: {
         sameDay: "[Today]",
@@ -68,6 +75,26 @@ export class ChatScreen extends Component<ChatScreenProps, ChatScreenState> {
     });
   }
 
+  readyToUpload(): boolean {
+    return Boolean(this.chatInput.current?.s3Uploader.current?.inputRef.current);
+  }
+
+  onDragEnter() {
+    if (!this.readyToUpload()) {
+      return;
+    }
+    this.setState({ dragover: true });
+  }
+
+  onDrop(event: DragEvent) {
+    this.setState({ dragover: false });
+    if (!event.dataTransfer || !event.dataTransfer.files.length) {
+      return;
+    }
+    event.preventDefault();
+    this.chatInput.current?.uploadFiles(event.dataTransfer.files);
+  }
+
   render() {
     const { props, state } = this;
 
@@ -104,7 +131,18 @@ export class ChatScreen extends Component<ChatScreenProps, ChatScreenState> {
     return (
       <div
         key={props.station}
-        className="h-100 w-100 overflow-hidden flex flex-column relative">
+        className="h-100 w-100 overflow-hidden flex flex-column relative"
+        onDragEnter={this.onDragEnter.bind(this)}
+        onDragOver={event => {
+          event.preventDefault();
+          if (!this.state.dragover) {
+            this.setState({ dragover: true });
+          }
+        }}
+        onDragLeave={() => this.setState({ dragover: false })}
+        onDrop={this.onDrop.bind(this)}
+      >
+        {this.state.dragover ? <SubmitDragger /> : null}
         <ChatHeader {...props} />
         <ChatWindow
           isChatMissing={isChatMissing}
@@ -116,6 +154,7 @@ export class ChatScreen extends Component<ChatScreenProps, ChatScreenState> {
           ship={props.match.params.ship}
           {...props} />
         <ChatInput
+          ref={this.chatInput}
           api={props.api}
           numMsgs={lastMsgNum}
           station={props.station}
diff --git a/pkg/interface/src/views/apps/chat/components/lib/chat-editor.js b/pkg/interface/src/views/apps/chat/components/lib/chat-editor.js
index fbae6c1741..681c6828f2 100644
--- a/pkg/interface/src/views/apps/chat/components/lib/chat-editor.js
+++ b/pkg/interface/src/views/apps/chat/components/lib/chat-editor.js
@@ -101,9 +101,14 @@ export default class ChatEditor extends Component {
   }
 
   render() {
-    const { props } = this;
+    const {
+      inCodeMode,
+      placeholder,
+      message,
+      ...props
+    } = this.props;
 
-    const codeTheme = props.inCodeMode ? ' code' : '';
+    const codeTheme = inCodeMode ? ' code' : '';
 
     const options = {
       mode: MARKDOWN_CONFIG,
@@ -112,7 +117,7 @@ export default class ChatEditor extends Component {
       lineWrapping: true,
       scrollbarStyle: 'native',
       cursorHeight: 0.85,
-      placeholder: props.inCodeMode ? 'Code...' : props.placeholder,
+      placeholder: inCodeMode ? 'Code...' : placeholder,
       extraKeys: {
         'Enter': () => {
           this.submit();
@@ -127,11 +132,11 @@ export default class ChatEditor extends Component {
       <div
         className={
           'chat fr h-100 flex bg-gray0-d lh-copy pl2 w-100 items-center' +
-          (props.inCodeMode ? ' code' : '')
+          (inCodeMode ? ' code' : '')
         }
         style={{ flexGrow: 1, maxHeight: '224px', width: 'calc(100% - 72px)' }}>
         <CodeEditor
-          value={props.message}
+          value={message}
           options={options}
           onChange={(e, d, v) => this.messageChange(e, d, v)}
           editorDidMount={(editor) => {
@@ -140,6 +145,7 @@ export default class ChatEditor extends Component {
               editor.focus();
             }
           }}
+          {...props}
         />
       </div>
     );
diff --git a/pkg/interface/src/views/apps/chat/components/lib/chat-input.js b/pkg/interface/src/views/apps/chat/components/lib/chat-input.tsx
similarity index 64%
rename from pkg/interface/src/views/apps/chat/components/lib/chat-input.js
rename to pkg/interface/src/views/apps/chat/components/lib/chat-input.tsx
index 9b69a7ac44..ba76714638 100644
--- a/pkg/interface/src/views/apps/chat/components/lib/chat-input.js
+++ b/pkg/interface/src/views/apps/chat/components/lib/chat-input.tsx
@@ -1,38 +1,57 @@
 import React, { Component } from 'react';
 import ChatEditor from './chat-editor';
-import { S3Upload } from '~/views/components/s3-upload'
+import { S3Upload, SubmitDragger } from '~/views/components/s3-upload'
 ;
 import { uxToHex } from '~/logic/lib/util';
 import { Sigil } from '~/logic/lib/sigil';
 import tokenizeMessage, { isUrl } from '~/logic/lib/tokenizeMessage';
+import GlobalApi from '~/logic/api/global';
+import { Envelope } from '~/types/chat-update';
+import { Contacts, S3Configuration } from '~/types';
+
+interface ChatInputProps {
+  api: GlobalApi;
+  numMsgs: number;
+  station: any;
+  owner: string;
+  ownerContact: any;
+  envelopes: Envelope[];
+  contacts: Contacts;
+  onUnmount(msg: string): void;
+  s3: any;
+  placeholder: string;
+  message: string;
+  deleteMessage(): void;
+  hideAvatars: boolean;
+  onPaste?(): void;
+}
+
+interface ChatInputState {
+  inCodeMode: boolean;
+  submitFocus: boolean;
+  uploadingPaste: boolean;
+}
 
 
+export class ChatInput extends Component<ChatInputProps, ChatInputState> {
+  public s3Uploader: React.RefObject<S3Upload>;
+  private chatEditor: React.RefObject<ChatEditor>;
 
-
-export class ChatInput extends Component {
   constructor(props) {
     super(props);
 
     this.state = {
       inCodeMode: false,
+      submitFocus: false,
+      uploadingPaste: false,
     };
 
+    this.s3Uploader = React.createRef();
+    this.chatEditor = React.createRef();
+
     this.submit = this.submit.bind(this);
     this.toggleCode = this.toggleCode.bind(this);
-  }
-
-  uploadSuccess(url) {
-    const { props } = this;
-    props.api.chat.message(
-      props.station,
-      `~${window.ship}`,
-      Date.now(),
-      { url }
-    );
-  }
-
-  uploadError(error) {
-    //  no-op for now
+    
   }
 
   toggleCode() {
@@ -105,18 +124,48 @@ export class ChatInput extends Component {
 
   uploadSuccess(url) {
     const { props } = this;
-    props.api.chat.message(
-      props.station,
-      `~${window.ship}`,
-      Date.now(),
-      { url }
-    );
+    if (this.state.uploadingPaste) {
+      this.chatEditor.current.editor.setValue(url);
+      this.setState({ uploadingPaste: false });
+    } else {
+      props.api.chat.message(
+        props.station,
+        `~${window.ship}`,
+        Date.now(),
+        { url }
+      );
+    }
+    
   }
 
   uploadError(error) {
     //  no-op for now
   }
 
+  readyToUpload(): boolean {
+    return Boolean(this.s3Uploader.current?.inputRef.current);
+  }
+
+  onPaste(codemirrorInstance, event: ClipboardEvent) {
+    if (!event.clipboardData || !event.clipboardData.files.length) {
+      return;
+    }
+    this.setState({ uploadingPaste: true });
+    event.preventDefault();
+    event.stopPropagation();
+    this.uploadFiles(event.clipboardData.files);
+  }
+
+  uploadFiles(files: FileList) {
+    if (!this.readyToUpload()) {
+      return;
+    }
+    this.s3Uploader.current.inputRef.current.files = files;
+    const fire = document.createEvent("HTMLEvents");
+    fire.initEvent("change", true, true);
+    this.s3Uploader.current?.inputRef.current?.dispatchEvent(fire);
+  }
+
   render() {
     const { props, state } = this;
 
@@ -143,7 +192,8 @@ export class ChatInput extends Component {
              "pa3 cf flex black white-d bt b--gray4 b--gray1-d bg-white " +
              "bg-gray0-d relative"
            }
-           style={{ flexGrow: 1 }}>
+           style={{ flexGrow: 1 }}
+           >
         <div className="fl"
              style={{
                 marginTop: 6,
@@ -153,11 +203,14 @@ export class ChatInput extends Component {
           {avatar}
         </div>
         <ChatEditor
+          ref={this.chatEditor}
           inCodeMode={state.inCodeMode}
           submit={this.submit}
           onUnmount={props.onUnmount}
           message={props.message}
-          placeholder='Message...' />
+          onPaste={this.onPaste.bind(this)}
+          placeholder='Message...'
+        />
         <div className="ml2 mr2"
              style={{
                 height: '16px',
@@ -166,11 +219,12 @@ export class ChatInput extends Component {
                 marginTop: 10
               }}>
           <S3Upload
+            ref={this.s3Uploader}
             configuration={props.s3.configuration}
             credentials={props.s3.credentials}
             uploadSuccess={this.uploadSuccess.bind(this)}
             uploadError={this.uploadError.bind(this)}
-            accept="image/*"
+            accept="*"
           >
             <img
               className="invert-d"
@@ -187,7 +241,7 @@ export class ChatInput extends Component {
             marginTop: 10
           }}>
           <img style={{
-              filter: state.inCodeMode && 'invert(100%)',
+              filter: state.inCodeMode ? 'invert(100%)' : '',
               height: '14px',
               width: '14px',
             }}
diff --git a/pkg/interface/src/views/apps/links/components/lib/link-submit.js b/pkg/interface/src/views/apps/links/components/lib/link-submit.js
deleted file mode 100644
index 042ce804e5..0000000000
--- a/pkg/interface/src/views/apps/links/components/lib/link-submit.js
+++ /dev/null
@@ -1,153 +0,0 @@
-import React, { Component } from 'react';
-
-import { S3Upload } from '~/views/components/s3-upload';
-import { Spinner } from '~/views/components/Spinner';
-import { Icon } from "@tlon/indigo-react";
-
-export class LinkSubmit extends Component {
-  constructor() {
-    super();
-    this.state = {
-      linkValue: '',
-      linkTitle: '',
-      linkValid: false,
-      submitFocus: false,
-      disabled: false
-    };
-    this.setLinkValue = this.setLinkValue.bind(this);
-    this.setLinkTitle = this.setLinkTitle.bind(this);
-  }
-
-  onClickPost() {
-    const link = this.state.linkValue;
-    const title = this.state.linkTitle
-      ? this.state.linkTitle
-      : this.state.linkValue;
-      this.setState({ disabled: true });
-    this.props.api.links.postLink(this.props.resourcePath, link, title).then((r) => {
-      this.setState({
-        disabled: false,
-        linkValue: '',
-        linkTitle: '',
-        linkValid: false
-      });
-    });
-  }
-
-  setLinkValid(link) {
-    const URLparser = new RegExp(
-      /((?:([\w\d\.-]+)\:\/\/?){1}(?:(www)\.?){0,1}(((?:[\w\d-]+\.)*)([\w\d-]+\.[\w\d]+))){1}(?:\:(\d+)){0,1}((\/(?:(?:[^\/\s\?]+\/)*))(?:([^\?\/\s#]+?(?:.[^\?\s]+){0,1}){0,1}(?:\?([^\s#]+)){0,1})){0,1}(?:#([^#\s]+)){0,1}/
-    );
-
-    const validURL = URLparser.exec(link);
-
-    if (!validURL) {
-      const checkProtocol = URLparser.exec('http://' + link);
-      if (checkProtocol) {
-        this.setState({ linkValid: true });
-        this.setState({ linkValue: 'http://' + link });
-      } else {
-        this.setState({ linkValid: false });
-      }
-    } else if (validURL) {
-      this.setState({ linkValid: true });
-    }
-  }
-
-  setLinkValue(event) {
-    this.setState({ linkValue: event.target.value });
-    this.setLinkValid(event.target.value);
-  }
-
-  setLinkTitle(event) {
-    this.setState({ linkTitle: event.target.value });
-  }
-
-  uploadSuccess(url) {
-    this.setState({ linkValue: url });
-    this.setLinkValid(url);
-  }
-
-  uploadError(error) {
-    //  no-op for now
-  }
-
-  render() {
-    console.log('s3', this.props.s3);
-    const activeClasses = (this.state.linkValid && !this.state.disabled)
-      ? 'green2 pointer' : 'gray2';
-
-    const focus = (this.state.submitFocus)
-      ? 'b--black b--white-d'
-      : 'b--gray4 b--gray2-d';
-    
-    return (
-      <div className={'relative ba br1 w-100 mb6 ' + focus}>
-        <input
-          type="url"
-          className="pl2 bg-gray0-d white-d w-100 f8 pt2"
-          placeholder="Paste link here"
-          onChange={this.setLinkValue}
-          onBlur={() => this.setState({ submitFocus: false })}
-          onFocus={() => this.setState({ submitFocus: true })}
-          spellCheck="false"
-          rows={1}
-          onKeyPress={(e) => {
-            if (e.key === 'Enter') {
-              e.preventDefault();
-              this.onClickPost();
-            }
-          }}
-          value={this.state.linkValue}
-        />
-        <div className="flex flex-auto mt2 pt2">
-          <input
-            type="text"
-            className="pl2 bg-gray0-d white-d w-100 f8"
-            style={{
-              resize: 'none',
-              height: 40
-            }}
-            placeholder="Enter title"
-            onChange={this.setLinkTitle}
-            onBlur={() => this.setState({ submitFocus: false })}
-            onFocus={() => this.setState({ submitFocus: true })}
-            spellCheck="false"
-            rows={1}
-            onKeyPress={(e) => {
-              if (e.key === 'Enter') {
-                e.preventDefault();
-                this.onClickPost();
-              }
-            }}
-            value={this.state.linkTitle}
-          />
-          {!this.state.disabled ? <S3Upload
-            configuration={this.props.s3.configuration}
-            credentials={this.props.s3.credentials}
-            uploadSuccess={this.uploadSuccess.bind(this)}
-            uploadError={this.uploadError.bind(this)}
-            className="nowrap flex items-center pr2 h-100"
-          ><span className="green2 f8">Upload File</span></S3Upload> : null}
-          {!this.state.disabled ? <button
-            className={
-              'bg-gray0-d f8 flex-shrink-0 pr2 ' + activeClasses
-            }
-            disabled={!this.state.linkValid || this.state.disabled}
-            onClick={this.onClickPost.bind(this)}
-            style={{
-              bottom: 12,
-              right: 8
-            }}
-          >
-            Post
-          </button> : null}
-          <Spinner awaiting={this.state.disabled} classes="nowrap flex items-center pr2" style={{flex: '1 1 14rem'}} text="Posting to collection..." />
-        </div>
-        
-      </div>
-    ) ;
-  }
-}
-
-export default LinkSubmit;
diff --git a/pkg/interface/src/views/apps/links/components/lib/link-submit.tsx b/pkg/interface/src/views/apps/links/components/lib/link-submit.tsx
new file mode 100644
index 0000000000..1c78aacc51
--- /dev/null
+++ b/pkg/interface/src/views/apps/links/components/lib/link-submit.tsx
@@ -0,0 +1,255 @@
+import React, { Component } from 'react';
+import { hasProvider } from 'oembed-parser';
+
+import { S3Upload, SubmitDragger } from '~/views/components/s3-upload';
+import { Spinner } from '~/views/components/Spinner';
+import { Icon } from "@tlon/indigo-react";
+import GlobalApi from '~/logic/api/global';
+import { S3State } from '~/types';
+
+interface LinkSubmitProps {
+  api: GlobalApi;
+  resourcePath: string;
+  s3: S3State;
+}
+
+interface LinkSubmitState {
+  linkValue: string;
+  linkTitle: string;
+  linkValid: boolean;
+  submitFocus: boolean;
+  urlFocus: boolean;
+  disabled: boolean;
+  dragover: boolean;
+}
+
+export class LinkSubmit extends Component<LinkSubmitProps, LinkSubmitState> {
+  private s3Uploader: React.RefObject<S3Upload>;
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      linkValue: '',
+      linkTitle: '',
+      linkValid: false,
+      submitFocus: false,
+      urlFocus: false,
+      disabled: false,
+      dragover: false
+    };
+    this.setLinkValue = this.setLinkValue.bind(this);
+    this.setLinkTitle = this.setLinkTitle.bind(this);
+    this.onDragEnter = this.onDragEnter.bind(this);
+    this.onDrop = this.onDrop.bind(this);
+    this.onPaste = this.onPaste.bind(this);
+    this.uploadFiles = this.uploadFiles.bind(this);
+    this.s3Uploader = React.createRef();
+  }
+
+  onClickPost() {
+    const link = this.state.linkValue;
+    const title = this.state.linkTitle
+      ? this.state.linkTitle
+      : this.state.linkValue;
+      this.setState({ disabled: true });
+    this.props.api.links.postLink(this.props.resourcePath, link, title).then((r) => {
+      this.setState({
+        disabled: false,
+        linkValue: '',
+        linkTitle: '',
+        linkValid: false
+      });
+    });
+  }
+
+  setLinkValid(linkValue) {
+    const URLparser = new RegExp(
+      /((?:([\w\d\.-]+)\:\/\/?){1}(?:(www)\.?){0,1}(((?:[\w\d-]+\.)*)([\w\d-]+\.[\w\d]+))){1}(?:\:(\d+)){0,1}((\/(?:(?:[^\/\s\?]+\/)*))(?:([^\?\/\s#]+?(?:.[^\?\s]+){0,1}){0,1}(?:\?([^\s#]+)){0,1})){0,1}(?:#([^#\s]+)){0,1}/
+    );;
+
+    let linkValid = URLparser.test(linkValue);
+
+    if (!linkValid) {
+      linkValid = URLparser.test(`http://${linkValue}`);
+      if (linkValid) {
+        linkValue = `http://${linkValue}`;
+      }
+    }
+
+    this.setState({ linkValid, linkValue });
+
+    if (linkValid) {
+      if (hasProvider(linkValue)) {
+        fetch(`https://noembed.com/embed?url=${linkValue}`)
+        .then(response => response.json())
+        .then((result) => {
+          if (result.title) {
+            this.setState({ linkTitle: result.title });
+          }
+        }).catch((error) => {/*noop*/});
+      } else {
+        this.setState({
+          linkTitle: decodeURIComponent(linkValue
+            .split('/')
+            .pop()
+            .split('.')
+            .slice(0, -1)
+            .join('.')
+            .replace('_', ' ')
+            .replace(/\d{4}\.\d{1,2}\.\d{2}\.\.\d{2}\.\d{2}\.\d{2}-/, '')
+            )
+        })
+      }
+    }
+  }
+
+  setLinkValue(event) {
+    this.setState({ linkValue: event.target.value });
+    this.setLinkValid(event.target.value);
+  }
+
+  setLinkTitle(event) {
+    this.setState({ linkTitle: event.target.value });
+  }
+
+  uploadSuccess(url) {
+    this.setState({ linkValue: url });
+    this.setLinkValid(url);
+  }
+
+  uploadError(error) {
+    //  no-op for now
+  }
+
+  readyToUpload(): boolean {
+    return Boolean(this.s3Uploader.current && this.s3Uploader.current.inputRef.current);
+  }
+
+  onDragEnter() {
+    if (!this.readyToUpload()) {
+      return;
+    }
+    this.setState({ dragover: true });
+  }
+
+  onDrop(event: DragEvent) {
+    this.setState({ dragover: false });
+    if (!event.dataTransfer || !event.dataTransfer.files.length) {
+      return;
+    }
+    event.preventDefault();
+    this.uploadFiles(event.dataTransfer.files);
+  }
+
+  onPaste(event: ClipboardEvent) {
+    if (!event.clipboardData || !event.clipboardData.files.length) {
+      return;
+    }
+    event.preventDefault();
+    event.stopPropagation();
+    this.uploadFiles(event.clipboardData.files);
+  }
+
+  uploadFiles(files: FileList) {
+    if (!this.readyToUpload()) {
+      return;
+    }
+    this.s3Uploader.current.inputRef.current.files = files;
+    const fire = document.createEvent("HTMLEvents");
+    fire.initEvent("change", true, true);
+    this.s3Uploader.current?.inputRef.current?.dispatchEvent(fire);
+  }
+
+  render() {
+    const activeClasses = (this.state.linkValid && !this.state.disabled)
+      ? 'green2 pointer' : 'gray2';
+
+    const focus = (this.state.submitFocus)
+      ? 'b--black b--white-d'
+      : 'b--gray4 b--gray2-d';
+
+    return (
+      <div
+        className={`relative ba br1 w-100 mb6 ${focus}`}
+        onDragEnter={this.onDragEnter.bind(this)}
+        onDragOver={e => {e.preventDefault();this.setState({ dragover: true})}}
+        onDragLeave={() => this.setState({ dragover: false })}
+        onDrop={this.onDrop}
+      >
+        {this.state.dragover ? <SubmitDragger /> : null}
+        <div className="relative">
+          {(this.state.linkValue || this.state.urlFocus || this.state.disabled) ? null : <span className="gray2 absolute pl2 pt3 pb2 f8" style={{pointerEvents: 'none'}}>
+            Drop or <span className="pointer green2" style={{pointerEvents: 'all'}} onClick={(event) => {
+              if (!this.readyToUpload()) {
+                return;
+              }
+               this.s3Uploader.current.inputRef.current.click();
+            }}>upload</span> a file, or paste a link here
+          </span>}
+          {!this.state.disabled ? <S3Upload
+            ref={this.s3Uploader}
+            configuration={this.props.s3.configuration}
+            credentials={this.props.s3.credentials}
+            uploadSuccess={this.uploadSuccess.bind(this)}
+            uploadError={this.uploadError.bind(this)}
+            className="dn absolute pt3 pb2 pl2 w-100"
+          ></S3Upload> : null}
+          <input
+            type="url"
+            className="pl2 w-100 f8 pt3 pb2 white-d bg-transparent"
+            onChange={this.setLinkValue}
+            onBlur={() => this.setState({ submitFocus: false, urlFocus: false })}
+            onFocus={() => this.setState({ submitFocus: true, urlFocus: true })}
+            spellCheck="false"
+            onPaste={this.onPaste}
+            onKeyPress={(e) => {
+              if (e.key === 'Enter') {
+                e.preventDefault();
+                this.onClickPost();
+              }
+            }}
+            value={this.state.linkValue}
+          />
+        </div>
+          <input
+            type="text"
+            className="pl2 bg-transparent w-100 f8 white-d"
+            style={{
+              resize: 'none',
+              height: 40
+            }}
+            placeholder="Provide a title"
+            onChange={this.setLinkTitle}
+            onBlur={() => this.setState({ submitFocus: false })}
+            onFocus={() => this.setState({ submitFocus: true })}
+            spellCheck="false"
+            onKeyPress={(e) => {
+              if (e.key === 'Enter') {
+                e.preventDefault();
+                this.onClickPost();
+              }
+            }}
+            value={this.state.linkTitle}
+          />
+          {!this.state.disabled ? <button
+            className={
+              'bg-transparent f8 flex-shrink-0 pr2 pl2 pt2 pb3 ' + activeClasses
+            }
+            disabled={!this.state.linkValid || this.state.disabled}
+            onClick={this.onClickPost.bind(this)}
+            style={{
+              bottom: 12,
+              right: 8
+            }}
+          >
+            Post link
+          </button> : null}
+          <Spinner awaiting={this.state.disabled} classes="nowrap flex items-center pr2 pl2 pt2 pb4" style={{flex: '1 1 14rem'}} text="Posting to collection..." />
+        
+        
+      </div>
+    ) ;
+  }
+}
+
+export default LinkSubmit;
diff --git a/pkg/interface/src/views/components/Spinner.js b/pkg/interface/src/views/components/Spinner.js
index 7ee4a67ce7..e2225ffa53 100644
--- a/pkg/interface/src/views/components/Spinner.js
+++ b/pkg/interface/src/views/components/Spinner.js
@@ -1,24 +1,18 @@
 import React, { Component } from 'react';
 
-export class Spinner extends Component {
-  render() {
-    const classes = this.props.classes ? this.props.classes : '';
-    const text = this.props.text ? this.props.text : '';
-    const awaiting = this.props.awaiting ? this.props.awaiting : false;
+const Spinner = ({
+  classes = '',
+  text = '',
+  awaiting = false
+}) => awaiting ? (
+  <div className={classes + ' z-2 bg-white bg-gray0-d white-d flex'}>
+    <img className="invert-d spin-active v-mid"
+      src="/~landscape/img/Spinner.png"
+      width={16}
+      height={16}
+    />
+    <p className="dib f9 ml2 v-mid inter">{text}</p>
+  </div>
+) : null;
 
-    if (awaiting) {
-      return (
-        <div className={classes + ' z-2 bg-white bg-gray0-d white-d flex'}>
-          <img className="invert-d spin-active v-mid"
-            src="/~landscape/img/Spinner.png"
-            width={16}
-            height={16}
-          />
-          <p className="dib f9 ml2 v-mid inter">{text}</p>
-        </div>
-      );
-    } else {
-      return null;
-    }
-  }
-}
+export { Spinner as default, Spinner };
\ No newline at end of file
diff --git a/pkg/interface/src/views/components/s3-upload.js b/pkg/interface/src/views/components/s3-upload.js
deleted file mode 100644
index 4cb37bd6d0..0000000000
--- a/pkg/interface/src/views/components/s3-upload.js
+++ /dev/null
@@ -1,118 +0,0 @@
-import React, { Component } from 'react'
-import { Icon } from "@tlon/indigo-react";
-
-import S3Client from '~/logic/lib/s3';
-import { Spinner } from './Spinner';
-
-export class S3Upload extends Component {
-
-  constructor(props) {
-    super(props);
-    this.state = {
-      isUploading: false
-    };
-    this.s3 = new S3Client();
-    this.setCredentials(props.credentials, props.configuration);
-    this.inputRef = React.createRef();
-  }
-
-  isReady(creds, config) {
-    return (
-      !!creds &&
-      'endpoint' in creds &&
-      'accessKeyId' in creds &&
-      'secretAccessKey' in creds &&
-      creds.endpoint !== '' &&
-      creds.accessKeyId !== '' &&
-      creds.secretAccessKey !== '' &&
-      !!config &&
-      'currentBucket' in config &&
-      config.currentBucket !== ''
-    );
-  }
-
-  componentDidUpdate(prevProps) {
-    const { props } = this;
-    this.setCredentials(props.credentials, props.configuration);
-  }
-
-  setCredentials(credentials, configuration) {
-    if (!this.isReady(credentials, configuration)) { return; }
-    this.s3.setCredentials(
-      credentials.endpoint,
-      credentials.accessKeyId,
-      credentials.secretAccessKey
-    );
-  }
-
-  getFileUrl(endpoint, filename) {
-    return endpoint + '/' + filename;
-  }
-
-  onChange() {
-    const { props } = this;
-    if (!this.inputRef.current) { return; }
-    let files = this.inputRef.current.files;
-    if (files.length <= 0) { return; }
-
-    let file = files.item(0);
-    let bucket = props.configuration.currentBucket;
-
-    this.setState({ isUploading: true });
-
-    this.s3.upload(bucket, file.name, file)
-      .then((data) => {
-        if (!data || !('Location' in data)) {
-          return;
-        }
-        this.props.uploadSuccess(data.Location);
-      })
-      .catch((err) => {
-        console.error(err);
-        this.props.uploadError(err);
-      })
-      .finally(() => {
-        this.setState({ isUploading: false });
-      });
-  }
-
-  onClick() {
-    if (!this.inputRef.current) { return; }
-    this.inputRef.current.click();
-  }
-
-  render() {
-    const {
-      credentials,
-      configuration,
-      className,
-      accept = '*',
-      children = false
-    } = this.props;
-    if (!this.isReady(credentials, configuration)) {
-      return <div></div>;
-    } else {
-      let classes = !!className
-        ? "pointer " + className
-        : "pointer";
-      const display = children || <Icon icon='ArrowNorth' />;
-      return (
-        <div>
-          <input
-            className="dn"
-            type="file"
-            id="fileElement"
-            ref={this.inputRef}
-            accept={accept}
-            onChange={this.onChange.bind(this)} />
-          {this.state.isUploading
-            ? <Spinner awaiting={true} classes={className} />
-            : <span className={`pointer ${className}`} onClick={this.onClick.bind(this)}>{display}</span>
-          }
-          
-        </div>
-      );
-    }
-  }
-}
-
diff --git a/pkg/interface/src/views/components/s3-upload.tsx b/pkg/interface/src/views/components/s3-upload.tsx
new file mode 100644
index 0000000000..81232c1481
--- /dev/null
+++ b/pkg/interface/src/views/components/s3-upload.tsx
@@ -0,0 +1,142 @@
+import React, { Component } from 'react'
+import { Icon } from "@tlon/indigo-react";
+
+import S3Client from '~/logic/lib/s3';
+import { Spinner } from './Spinner';
+import { S3Credentials, S3Configuration } from '~/types';
+import { dateToDa, deSig } from '~/logic/lib/util';
+
+export const SubmitDragger = () => (
+  <div
+    className="top-0 bottom-0 left-0 right-0 absolute bg-gray5 h-100 w-100 flex items-center justify-center z-999"
+    style={{pointerEvents: 'none'}}
+  >Drop a file to upload</div>
+);
+
+interface S3UploadProps {
+  credentials: S3Credentials;
+  configuration: S3Configuration;
+  uploadSuccess: Function;
+  uploadError: Function;
+  className?: string;
+  accept: string;
+}
+
+interface S3UploadState {
+  isUploading: boolean;
+}
+
+export class S3Upload extends Component<S3UploadProps, S3UploadState> {
+  private s3: S3Client;
+  public inputRef: React.RefObject<HTMLInputElement>;
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      isUploading: false
+    };
+    this.s3 = new S3Client();
+    this.setCredentials(props.credentials, props.configuration);
+    this.inputRef = React.createRef();
+  }
+
+  isReady(creds, config): boolean {
+    return (
+      !!creds &&
+      'endpoint' in creds &&
+      'accessKeyId' in creds &&
+      'secretAccessKey' in creds &&
+      creds.endpoint !== '' &&
+      creds.accessKeyId !== '' &&
+      creds.secretAccessKey !== '' &&
+      !!config &&
+      'currentBucket' in config &&
+      config.currentBucket !== ''
+    );
+  }
+
+  componentDidUpdate(prevProps): void {
+    const { props } = this;
+    if (!props.credentials !== prevProps.credentials || props.configuration !== prevProps.configuration) {
+      this.setCredentials(props.credentials, props.configuration);
+    }
+  }
+
+  setCredentials(credentials, configuration): void {
+    if (!this.isReady(credentials, configuration)) { return; }
+    this.s3.setCredentials(
+      credentials.endpoint,
+      credentials.accessKeyId,
+      credentials.secretAccessKey
+    );
+  }
+
+  onChange(): void {
+    const { props } = this;
+    if (!this.inputRef.current) { return; }
+    let files = this.inputRef.current.files;
+    if (!files || files.length <= 0) { return; }
+
+    let file = files.item(0);
+    if (!file) { return; }
+    const fileParts = file.name.split('.');
+    const fileName = fileParts.slice(0, -1);
+    const fileExtension = fileParts.pop();
+    const timestamp = deSig(dateToDa(new Date()));
+    let bucket = props.configuration.currentBucket;
+
+    this.setState({ isUploading: true });
+
+    this.s3.upload(bucket, `${window.ship}/${timestamp}-${fileName}.${fileExtension}`, file)
+      .then((data) => {
+        if (!data || !('Location' in data)) {
+          return;
+        }
+        this.props.uploadSuccess(data.Location);
+      })
+      .catch((err) => {
+        console.error(err);
+        this.props.uploadError(err);
+      })
+      .finally(() => {
+        this.setState({ isUploading: false });
+      });
+  }
+
+  onClick() {
+    if (!this.inputRef.current) { return; }
+    this.inputRef.current.click();
+  }
+
+  render() {
+    const {
+      credentials,
+      configuration,
+      className = '',
+      accept = '*',
+      children = false
+    } = this.props;
+    
+    if (!this.isReady(credentials, configuration)) {
+      return null;
+    }
+
+    const display = children || <Icon icon='ArrowNorth' />;
+    return (
+      <>
+        <input
+          className="dn"
+          type="file"
+          id="fileElement"
+          ref={this.inputRef}
+          accept={accept}
+          onChange={this.onChange.bind(this)} />
+        {this.state.isUploading
+          ? <Spinner awaiting={true} classes={className} />
+          : <span className={`pointer ${className}`} onClick={this.onClick.bind(this)}>{display}</span>
+        }
+      </>
+    );
+  }
+}
+

From d04f62a9077c872df16bda3dda7da381b4b163c4 Mon Sep 17 00:00:00 2001
From: Tyler Brown Cifu Shuster <tyler@fivepaths.com>
Date: Tue, 8 Sep 2020 12:35:44 -0700
Subject: [PATCH 47/58] chat: check for cited participants in sidebar

Fixes #3438
---
 .../src/views/apps/chat/components/lib/group-item.js          | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/pkg/interface/src/views/apps/chat/components/lib/group-item.js b/pkg/interface/src/views/apps/chat/components/lib/group-item.js
index 495e16812d..6f047232a3 100644
--- a/pkg/interface/src/views/apps/chat/components/lib/group-item.js
+++ b/pkg/interface/src/views/apps/chat/components/lib/group-item.js
@@ -1,13 +1,13 @@
 import React, { Component } from 'react';
 import { Link } from 'react-router-dom';
 import { ChannelItem } from './channel-item';
-import { deSig } from "~/logic/lib/util";
+import { deSig, cite } from "~/logic/lib/util";
 
 export class GroupItem extends Component {
   render() {
     const { props } = this;
     const association = props.association ? props.association : {};
-    const DEFAULT_TITLE_REGEX = new RegExp(`(( <-> )?~${deSig(window.ship)}( <-> )?)`);
+    const DEFAULT_TITLE_REGEX = new RegExp(`(( <-> )?~(?:${window.ship}|${deSig(cite(window.ship))})( <-> )?)`);
 
     let title = association['app-path'] ? association['app-path'] : 'Direct Messages';
     if (association.metadata && association.metadata.title) {

From f1a75b7af9ec5e4c45c48aa2973533b4e18e2279 Mon Sep 17 00:00:00 2001
From: Tyler Brown Cifu Shuster <tyler@fivepaths.com>
Date: Tue, 8 Sep 2020 13:04:36 -0700
Subject: [PATCH 48/58] chat: added placeholder for empty room

---
 .../src/views/apps/chat/components/lib/chat-window.tsx          | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/pkg/interface/src/views/apps/chat/components/lib/chat-window.tsx b/pkg/interface/src/views/apps/chat/components/lib/chat-window.tsx
index 137a4f9c4c..18853f5e0e 100644
--- a/pkg/interface/src/views/apps/chat/components/lib/chat-window.tsx
+++ b/pkg/interface/src/views/apps/chat/components/lib/chat-window.tsx
@@ -292,7 +292,7 @@ export class ChatWindow extends Component<ChatWindowProps, ChatWindowState> {
               className={number === mailboxSize ? 'pb3' : ''}
             />
           }}
-        /> : null}
+        /> : <div style={{height: '100%', width: '100%'}}></div>}
       </Fragment>
     );
   }

From 01a75d540f7b197d42cd0bf8c47776c39eabdcbc Mon Sep 17 00:00:00 2001
From: Matilde Park <matilde.park@sunshinegardens.org>
Date: Tue, 8 Sep 2020 17:08:15 -0400
Subject: [PATCH 49/58] leap: use a instead of Link if not default app

Logging out currently doesn't work via Leap because we only use
react-router. This adds selection and navigation logic that passes
both app name and link href and compares app name against the default
app lib. This makes leap extensible for third party apps, too.
---
 .../src/views/components/leap/Omnibox.js      | 46 ++++++++++++-------
 1 file changed, 30 insertions(+), 16 deletions(-)

diff --git a/pkg/interface/src/views/components/leap/Omnibox.js b/pkg/interface/src/views/components/leap/Omnibox.js
index 4a4b484ace..adceb3aeaa 100644
--- a/pkg/interface/src/views/components/leap/Omnibox.js
+++ b/pkg/interface/src/views/components/leap/Omnibox.js
@@ -6,6 +6,8 @@ import Mousetrap from 'mousetrap';
 import OmniboxInput from './OmniboxInput';
 import OmniboxResult from './OmniboxResult';
 
+import defaultApps from '~/logic/lib/default-apps';
+
 export class Omnibox extends Component {
   constructor(props) {
     super(props);
@@ -13,7 +15,7 @@ export class Omnibox extends Component {
       index: new Map([]),
       query: '',
       results: this.initialResults(),
-      selected: ''
+      selected: []
     };
     this.handleClickOutside = this.handleClickOutside.bind(this);
     this.search = this.search.bind(this);
@@ -77,9 +79,11 @@ export class Omnibox extends Component {
     if (evt.key === 'Enter') {
       evt.preventDefault();
       if (this.state.selected !== '') {
-        this.navigate(this.state.selected);
+        this.navigate(this.state.selected[0], this.state.selected[1]);
       } else {
-        this.navigate(Array.from(this.state.results.values()).flat()[0].link);
+        this.navigate(
+          Array.from(this.state.results.values()).flat()[0].app,
+          Array.from(this.state.results.values()).flat()[0].link);
       }
     }
   }
@@ -107,11 +111,15 @@ export class Omnibox extends Component {
     }));
   }
 
-  navigate(link) {
+  navigate(app, link) {
     const { props } = this;
     this.setState({ results: this.initialResults(), query: '' }, () => {
       props.api.local.setOmnibox();
-      props.history.push(link);
+      if (defaultApps.includes(app.toLowerCase()) || app === 'profile') {
+        props.history.push(link);
+      } else {
+        window.location.href = link;
+      }
     });
   }
 
@@ -165,19 +173,22 @@ export class Omnibox extends Component {
     if (current !== '') {
       const currentIndex = flattenedResults.indexOf(
         ...flattenedResults.filter((e) => {
-          return e.link === current;
+          return e.link === current[1];
         })
       );
       if (currentIndex > 0) {
+        const nextApp = flattenedResults[currentIndex - 1].app;
         const nextLink = flattenedResults[currentIndex - 1].link;
-        this.setState({ selected: nextLink });
+        this.setState({ selected: [nextApp, nextLink] });
       } else {
+        const nextApp = flattenedResults[totalLength - 1].app;
         const nextLink = flattenedResults[totalLength - 1].link;
-        this.setState({ selected: nextLink });
+        this.setState({ selected: [nextApp, nextLink] });
       }
     } else {
+      const nextApp = flattenedResults[totalLength - 1].app;
       const nextLink = flattenedResults[totalLength - 1].link;
-      this.setState({ selected: nextLink });
+      this.setState({ selected: [nextApp, nextLink] });
     }
   }
 
@@ -187,19 +198,22 @@ export class Omnibox extends Component {
     if (current !== '') {
       const currentIndex = flattenedResults.indexOf(
         ...flattenedResults.filter((e) => {
-          return e.link === current;
+          return e.link === current[1];
         })
       );
       if (currentIndex < flattenedResults.length - 1) {
+      const nextApp = flattenedResults[currentIndex + 1].app;
       const nextLink = flattenedResults[currentIndex + 1].link;
-      this.setState({ selected: nextLink });
+      this.setState({ selected: [nextApp, nextLink] });
       } else {
+      const nextApp = flattenedResults[0].app;
       const nextLink = flattenedResults[0].link;
-      this.setState({ selected: nextLink });
+      this.setState({ selected: [nextApp, nextLink] });
       }
     } else {
+      const nextApp = flattenedResults[0].app;
       const nextLink = flattenedResults[0].link;
-      this.setState({ selected: nextLink });
+      this.setState({ selected: [nextApp, nextLink] });
     }
   }
 
@@ -228,8 +242,8 @@ export class Omnibox extends Component {
                 text={result.title}
                 subtext={result.host}
                 link={result.link}
-                navigate={() => this.navigate(result.link)}
-                selected={this.state.selected}
+                navigate={() => this.navigate(result.app, result.link)}
+                selected={this.state.selected[1]}
                 dark={props.dark} />
             ))}
           </Box>
@@ -241,7 +255,7 @@ export class Omnibox extends Component {
 
   render() {
     const { props, state } = this;
-    if (!state.selected && Array.from(this.state.results.values()).flat().length) {
+    if (state?.selected.length === 0 && Array.from(this.state.results.values()).flat().length) {
       this.setNextSelected();
     }
     return (

From 990d46dd9e29db3050378171b38eac32cb53d6b4 Mon Sep 17 00:00:00 2001
From: Matilde Park <matilde.park@sunshinegardens.org>
Date: Tue, 8 Sep 2020 17:16:45 -0400
Subject: [PATCH 50/58] error: add background style

If you've set an image background, it can make it hard to read 404s or
error messages. This adds the default bg color.
---
 pkg/interface/src/views/components/Error.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/pkg/interface/src/views/components/Error.tsx b/pkg/interface/src/views/components/Error.tsx
index 95f89d99ed..de502d72d6 100644
--- a/pkg/interface/src/views/components/Error.tsx
+++ b/pkg/interface/src/views/components/Error.tsx
@@ -12,7 +12,7 @@ class ErrorComponent extends Component<ErrorProps> {
   render () {
     const { code, error, history, description } = this.props;
     return (
-      <Col alignItems="center" justifyContent="center" height="100%" p={4}>
+      <Col alignItems="center" justifyContent="center" height="100%" p="4" backgroundColor="white">
         <Box mb={4}>
           <Text fontSize={3}>
            {code ? code : 'Error'}

From 27fd31b0b3c6bfeea1b817d68697d43f8323c599 Mon Sep 17 00:00:00 2001
From: Matilde Park <matilde.park@sunshinegardens.org>
Date: Tue, 8 Sep 2020 17:22:42 -0400
Subject: [PATCH 51/58] interface: embeds on by default

---
 pkg/interface/src/logic/store/store.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/pkg/interface/src/logic/store/store.ts b/pkg/interface/src/logic/store/store.ts
index 63d3bb0167..8bb5794d9b 100644
--- a/pkg/interface/src/logic/store/store.ts
+++ b/pkg/interface/src/logic/store/store.ts
@@ -58,7 +58,7 @@ export default class GlobalStore extends BaseStore<StoreState> {
         imageShown: true,
         audioShown: true,
         videoShown: true,
-        oembedShown: false,
+        oembedShown: true,
       },
       hideAvatars: false,
       hideNicknames: false,

From f9cf98438163eb2380906033d599ad1554bda1a2 Mon Sep 17 00:00:00 2001
From: Tyler Brown Cifu Shuster <tyler@fivepaths.com>
Date: Tue, 8 Sep 2020 15:20:40 -0700
Subject: [PATCH 52/58] chat: prevent message rerender

---
 .../apps/chat/components/lib/chat-message.tsx | 165 +++++++++---------
 1 file changed, 83 insertions(+), 82 deletions(-)

diff --git a/pkg/interface/src/views/apps/chat/components/lib/chat-message.tsx b/pkg/interface/src/views/apps/chat/components/lib/chat-message.tsx
index 12174803a1..e29e18802c 100644
--- a/pkg/interface/src/views/apps/chat/components/lib/chat-message.tsx
+++ b/pkg/interface/src/views/apps/chat/components/lib/chat-message.tsx
@@ -5,87 +5,88 @@ import { Message } from "./message";
 import { Envelope } from "~/types/chat-update";
 import _ from "lodash";
 
-export const ChatMessage = (props) => {
-  const {
-    msg,
-    previousMsg,
-    nextMsg,
-    isFirstUnread,
-    group,
-    association,
-    contacts,
-    unreadRef,
-    hideAvatars,
-    hideNicknames,
-    remoteContentPolicy,
-    className = ''
-  } = props;
-
-  // Render sigil if previous message is not by the same sender
-  const aut = ["author"];
-  const renderSigil =
-    _.get(nextMsg, aut) !== _.get(msg, aut, msg.author);
-  const paddingTop = renderSigil;
-  const paddingBot =
-    _.get(previousMsg, aut) !== _.get(msg, aut, msg.author);
-
-  const when = ["when"];
-  const dayBreak =
-    moment(_.get(nextMsg, when)).format("YYYY.MM.DD") !==
-    moment(_.get(msg, when)).format("YYYY.MM.DD");
-
-  const messageElem = (
-    <Message
-      key={msg.uid}
-      msg={msg}
-      renderSigil={renderSigil}
-      paddingTop={paddingTop}
-      paddingBot={paddingBot}
-      pending={Boolean(msg.pending)}
-      group={group}
-      contacts={contacts}
-      association={association}
-      hideNicknames={hideNicknames}
-      hideAvatars={hideAvatars}
-      remoteContentPolicy={remoteContentPolicy}
-      className={className}
-    />
-  );
-
-  if (isFirstUnread) {
-    return (
-      <Fragment key={msg.uid}>
-        {messageElem}
-        <div ref={unreadRef}
-             className="mv2 green2 flex items-center f9">
-          <hr className="dn-s ma0 w2 b--green2 bt-0" />
-          <p className="mh4">New messages below</p>
-          <hr className="ma0 flex-grow-1 b--green2 bt-0" />
-          {dayBreak && (
-            <p className="gray2 mh4">
-              {moment(_.get(msg, when)).calendar()}
-            </p>
-          )}
-          <hr
-            style={{ width: "calc(50% - 48px)" }}
-            className="b--green2 ma0 bt-0"
-          />
-        </div>
-      </Fragment>
+export class ChatMessage extends PureComponent {
+  render() {
+    const {
+      msg,
+      previousMsg,
+      nextMsg,
+      isFirstUnread,
+      group,
+      association,
+      contacts,
+      unreadRef,
+      hideAvatars,
+      hideNicknames,
+      remoteContentPolicy,
+      className = ''
+    } = this.props;
+  
+    // Render sigil if previous message is not by the same sender
+    const aut = ["author"];
+    const renderSigil =
+      _.get(nextMsg, aut) !== _.get(msg, aut, msg.author);
+    const paddingTop = renderSigil;
+    const paddingBot =
+      _.get(previousMsg, aut) !== _.get(msg, aut, msg.author);
+  
+    const when = ["when"];
+    const dayBreak =
+      moment(_.get(nextMsg, when)).format("YYYY.MM.DD") !==
+      moment(_.get(msg, when)).format("YYYY.MM.DD");
+  
+    const messageElem = (
+      <Message
+        key={msg.uid}
+        msg={msg}
+        renderSigil={renderSigil}
+        paddingTop={paddingTop}
+        paddingBot={paddingBot}
+        pending={Boolean(msg.pending)}
+        group={group}
+        contacts={contacts}
+        association={association}
+        hideNicknames={hideNicknames}
+        hideAvatars={hideAvatars}
+        remoteContentPolicy={remoteContentPolicy}
+        className={className}
+      />
     );
-  } else if (dayBreak) {
-    return (
-      <Fragment key={msg.uid}>
-        <div
-          className="pv3 gray2 b--gray2 flex items-center justify-center f9 "
-        >
-          <p>{moment(_.get(msg, when)).calendar()}</p>
-        </div>
-        {messageElem}
-      </Fragment>
-    );
-  } else {
-    return messageElem;
+  
+    if (isFirstUnread) {
+      return (
+        <Fragment key={msg.uid}>
+          {messageElem}
+          <div ref={unreadRef}
+               className="mv2 green2 flex items-center f9">
+            <hr className="dn-s ma0 w2 b--green2 bt-0" />
+            <p className="mh4">New messages below</p>
+            <hr className="ma0 flex-grow-1 b--green2 bt-0" />
+            {dayBreak && (
+              <p className="gray2 mh4">
+                {moment(_.get(msg, when)).calendar()}
+              </p>
+            )}
+            <hr
+              style={{ width: "calc(50% - 48px)" }}
+              className="b--green2 ma0 bt-0"
+            />
+          </div>
+        </Fragment>
+      );
+    } else if (dayBreak) {
+      return (
+        <Fragment key={msg.uid}>
+          <div
+            className="pv3 gray2 b--gray2 flex items-center justify-center f9 "
+          >
+            <p>{moment(_.get(msg, when)).calendar()}</p>
+          </div>
+          {messageElem}
+        </Fragment>
+      );
+    } else {
+      return messageElem;
+    }
   }
-};
-
+}
\ No newline at end of file

From c3a2e664120ccb7f67c5b3eed2dad4fbd91526fa Mon Sep 17 00:00:00 2001
From: Liam Fitzgerald <liam@urizen.co>
Date: Wed, 9 Sep 2020 08:26:03 +1000
Subject: [PATCH 53/58] publish: scroll markdown editor correctly

---
 .../src/views/apps/publish/components/lib/MarkdownField.tsx     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/pkg/interface/src/views/apps/publish/components/lib/MarkdownField.tsx b/pkg/interface/src/views/apps/publish/components/lib/MarkdownField.tsx
index b60af6a5cf..507460f5c2 100644
--- a/pkg/interface/src/views/apps/publish/components/lib/MarkdownField.tsx
+++ b/pkg/interface/src/views/apps/publish/components/lib/MarkdownField.tsx
@@ -12,7 +12,7 @@ export const MarkdownField = ({ id, ...rest }: { id: string; } & Parameters<type
   const [{ value }, { error, touched }, { setValue, setTouched }] = useField(id);
 
   return (
-    <Box height="100%" width="100%" display="flex" flexDirection="column" {...rest}>
+    <Box overflowY="hidden" height="100%" width="100%" display="flex" flexDirection="column" {...rest}>
       <MarkdownEditor
         onFocus={() => setTouched(true)}
         onBlur={() => setTouched(false)}

From d80e5cac49637c2d1b53ec097644c76b396ecb95 Mon Sep 17 00:00:00 2001
From: Liam Fitzgerald <liam@urizen.co>
Date: Wed, 9 Sep 2020 08:51:17 +1000
Subject: [PATCH 54/58] publish: mobile scrolling fix

---
 .../src/views/apps/publish/components/lib/MarkdownField.tsx     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/pkg/interface/src/views/apps/publish/components/lib/MarkdownField.tsx b/pkg/interface/src/views/apps/publish/components/lib/MarkdownField.tsx
index 507460f5c2..cec0f6d5ef 100644
--- a/pkg/interface/src/views/apps/publish/components/lib/MarkdownField.tsx
+++ b/pkg/interface/src/views/apps/publish/components/lib/MarkdownField.tsx
@@ -12,7 +12,7 @@ export const MarkdownField = ({ id, ...rest }: { id: string; } & Parameters<type
   const [{ value }, { error, touched }, { setValue, setTouched }] = useField(id);
 
   return (
-    <Box overflowY="hidden" height="100%" width="100%" display="flex" flexDirection="column" {...rest}>
+    <Box overflowY="hidden" width="100%" display="flex" flexDirection="column" {...rest}>
       <MarkdownEditor
         onFocus={() => setTouched(true)}
         onBlur={() => setTouched(false)}

From 7fe9caf554fc34109e0ab7b0e9c773a2d865b02a Mon Sep 17 00:00:00 2001
From: Matilde Park <matilde.park@sunshinegardens.org>
Date: Tue, 8 Sep 2020 18:57:56 -0400
Subject: [PATCH 55/58] interface: always show home button

---
 pkg/interface/src/views/components/StatusBar.js | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/pkg/interface/src/views/components/StatusBar.js b/pkg/interface/src/views/components/StatusBar.js
index f6b9acdf50..d6d6f0d12f 100644
--- a/pkg/interface/src/views/components/StatusBar.js
+++ b/pkg/interface/src/views/components/StatusBar.js
@@ -32,7 +32,6 @@ const StatusBar = (props) => {
       px={3}
       >
       <Row collapse>
-        {atHome ? null : (
           <StatusBarItem mr={2} onClick={() => props.history.push('/')}>
             <img
               className='invert-d'
@@ -41,7 +40,6 @@ const StatusBar = (props) => {
               width='11'
             />
           </StatusBarItem>
-        )}
         <StatusBarItem mr={2} onClick={() => props.api.local.setOmnibox()}>
           <Text display='inline-block' style={{ transform: 'rotate(180deg)' }}>
             ↩
@@ -53,7 +51,7 @@ const StatusBar = (props) => {
             {metaKey}/
           </Text>
         </StatusBarItem>
-        <StatusBarItem 
+        <StatusBarItem
           onClick={() => props.history.push('/~groups')}
           badge={Object.keys(invites).length > 0}>
           <img

From 71867d1d5c37bc7b2df026cfcab32bff8b808846 Mon Sep 17 00:00:00 2001
From: Matilde Park <matilde.park@sunshinegardens.org>
Date: Tue, 8 Sep 2020 19:44:51 -0400
Subject: [PATCH 56/58] links: pipe remoteContentPolicy to pending comments

---
 pkg/interface/src/views/apps/links/components/link.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/pkg/interface/src/views/apps/links/components/link.js b/pkg/interface/src/views/apps/links/components/link.js
index 646891578b..72aad4557f 100644
--- a/pkg/interface/src/views/apps/links/components/link.js
+++ b/pkg/interface/src/views/apps/links/components/link.js
@@ -123,6 +123,7 @@ export class LinkDetail extends Component {
           pending={true}
           content={com}
           member={our.member}
+          remoteContentPolicy={props.remoteContentPolicy}
           time={new Date().getTime()}
         />
       );

From 76d4f73942c4d040aa5b9956e2c0ed8e37bf624c Mon Sep 17 00:00:00 2001
From: Matilde Park <matilde.park@sunshinegardens.org>
Date: Tue, 8 Sep 2020 20:01:45 -0400
Subject: [PATCH 57/58] statusBar: prepend sig to ship settings button

---
 pkg/interface/src/views/components/StatusBar.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/pkg/interface/src/views/components/StatusBar.js b/pkg/interface/src/views/components/StatusBar.js
index d6d6f0d12f..0e17ab495b 100644
--- a/pkg/interface/src/views/components/StatusBar.js
+++ b/pkg/interface/src/views/components/StatusBar.js
@@ -70,7 +70,7 @@ const StatusBar = (props) => {
       <Row justifyContent="flex-end" collapse>
         <StatusBarItem onClick={() => props.history.push('/~profile')}>
           <Sigil ship={props.ship} size={24} color={"#000000"} classes="dib mix-blend-diff" />
-          <Text ml={2} display={["none", "inline"]} fontFamily="mono">{props.ship}</Text>
+          <Text ml={2} display={["none", "inline"]} fontFamily="mono">~{props.ship}</Text>
         </StatusBarItem>
       </Row>
     </Box>

From 042cdcf69896579969100bb868b089368d92742d Mon Sep 17 00:00:00 2001
From: Tyler Brown Cifu Shuster <tyler@fivepaths.com>
Date: Tue, 8 Sep 2020 17:06:08 -0700
Subject: [PATCH 58/58] chat: show pending messages again

---
 .../src/views/apps/chat/components/lib/chat-window.tsx   | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/pkg/interface/src/views/apps/chat/components/lib/chat-window.tsx b/pkg/interface/src/views/apps/chat/components/lib/chat-window.tsx
index 18853f5e0e..b5ca26c32e 100644
--- a/pkg/interface/src/views/apps/chat/components/lib/chat-window.tsx
+++ b/pkg/interface/src/views/apps/chat/components/lib/chat-window.tsx
@@ -232,11 +232,14 @@ export class ChatWindow extends Component<ChatWindowProps, ChatWindowState> {
     const debouncedFetch = _.debounce(this.fetchMessages, 500).bind(this);
 
     envelopes
-      .concat(stationPendingMessages)
       .forEach((message) => {
         messages[message.number] = message;
       });
     
+    stationPendingMessages.sort((a, b) => a.when - b.when).forEach((message, index) => {
+      messages[mailboxSize + index + 1] = message;
+    });
+    
     return (
       <Fragment>
         <UnreadNotice
@@ -250,7 +253,7 @@ export class ChatWindow extends Component<ChatWindowProps, ChatWindowState> {
         {messages.length ? <VirtualList
           ref={this.virtualList}
           style={{height: '100%', width: '100%', visibility: this.state.initialized ? 'initial' : 'hidden'}}
-          totalCount={mailboxSize}
+          totalCount={mailboxSize + stationPendingMessages.length}
           followOutput={!this.state.idle}
           endReached={this.dismissUnread}
           scrollSeek={{
@@ -289,7 +292,7 @@ export class ChatWindow extends Component<ChatWindowProps, ChatWindowState> {
               hideAvatars={hideAvatars}
               hideNicknames={hideNicknames}
               remoteContentPolicy={remoteContentPolicy}
-              className={number === mailboxSize ? 'pb3' : ''}
+              className={number === mailboxSize + stationPendingMessages.length ? 'pb3' : ''}
             />
           }}
         /> : <div style={{height: '100%', width: '100%'}}></div>}