From 7f559f5ca995d1e524c380395ccd810aa8d0ccc7 Mon Sep 17 00:00:00 2001
From: Matilde Park <matilde@tlon.io>
Date: Fri, 18 Sep 2020 14:25:15 -0400
Subject: [PATCH 01/54] arvo: remove test/example.udon

This file dates back to the previous Eyre write; Arvo no longer has a
/web folder, so this seems fine to clean out.
---
 pkg/arvo/app/test/example.udon | 8 --------
 1 file changed, 8 deletions(-)
 delete mode 100644 pkg/arvo/app/test/example.udon

diff --git a/pkg/arvo/app/test/example.udon b/pkg/arvo/app/test/example.udon
deleted file mode 100644
index 3bbe57aa9..000000000
--- a/pkg/arvo/app/test/example.udon
+++ /dev/null
@@ -1,8 +0,0 @@
-:-  ~[comments+&]
-;>
-
-# Static
-
-You can put static files in here to serve them to the web.  Actually, you can put static files anywhere in `/web` and see them in a browser.
-
-Docs on static publishing with urbit are forthcoming — but feel free to drop markdown files in `/web` to try it out.

From f3348543180f931d79b5a98623a70d56e488b466 Mon Sep 17 00:00:00 2001
From: Ted Blackman <ted@tlon.io>
Date: Fri, 18 Sep 2020 15:50:54 -0400
Subject: [PATCH 02/54] WIP: +graph-export

---
 pkg/arvo/app/graph-store.hoon              | 14 ++++++++++++++
 pkg/arvo/gen/graph-store/export-graph.hoon | 11 +++++++++++
 2 files changed, 25 insertions(+)
 create mode 100644 pkg/arvo/gen/graph-store/export-graph.hoon

diff --git a/pkg/arvo/app/graph-store.hoon b/pkg/arvo/app/graph-store.hoon
index bdfabe744..32178dee7 100644
--- a/pkg/arvo/app/graph-store.hoon
+++ b/pkg/arvo/app/graph-store.hoon
@@ -473,6 +473,20 @@
     :+  %0
       now.bowl
     [%add-graph [ship term] `graph:store`p.u.result q.u.result]
+  ::
+      ::  note: near-duplicate of /x/graph
+      ::
+      [%x %archive @ @ ~]
+    =/  =ship   (slav %p i.t.t.path)
+    =/  =term   i.t.t.t.path
+    =/  result=(unit marked-graph:store)
+      (~(get by archive) [ship term])
+    ?~  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)
diff --git a/pkg/arvo/gen/graph-store/export-graph.hoon b/pkg/arvo/gen/graph-store/export-graph.hoon
new file mode 100644
index 000000000..d29f95a88
--- /dev/null
+++ b/pkg/arvo/gen/graph-store/export-graph.hoon
@@ -0,0 +1,11 @@
+/+  graph-store
+::
+:-  %say
+|=  $:  [now=@da eny=@uvJ bec=beak]
+        [=ship graph=term ~]
+    ==
+:-  %noun
+=/  our  (scot %p p.bec)
+=/  wen  (scot %da now)
+=/  who  (scot %p ship)
+.^(update:graph-store /gx/[our]/graph-store/[wen]/[who]/[graph])

From 3c03d61038f7921795d9bbc56c53e7391725bb0b Mon Sep 17 00:00:00 2001
From: Ted Blackman <ted@tlon.io>
Date: Fri, 18 Sep 2020 16:21:00 -0400
Subject: [PATCH 03/54] +graph-store/export-graph and associated scry handler

---
 pkg/arvo/app/graph-store.hoon              | 1 +
 pkg/arvo/gen/graph-store/export-graph.hoon | 7 +++++--
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/pkg/arvo/app/graph-store.hoon b/pkg/arvo/app/graph-store.hoon
index 32178dee7..6a0c0421e 100644
--- a/pkg/arvo/app/graph-store.hoon
+++ b/pkg/arvo/app/graph-store.hoon
@@ -449,6 +449,7 @@
   ^-  (unit (unit cage))
   |^
   ?>  (team:title our.bowl src.bowl)
+  ~&  path=path
   ?+  path  (on-peek:def path)
       [%x %keys ~]
     :-  ~  :-  ~  :-  %graph-update
diff --git a/pkg/arvo/gen/graph-store/export-graph.hoon b/pkg/arvo/gen/graph-store/export-graph.hoon
index d29f95a88..24d9713d6 100644
--- a/pkg/arvo/gen/graph-store/export-graph.hoon
+++ b/pkg/arvo/gen/graph-store/export-graph.hoon
@@ -2,10 +2,13 @@
 ::
 :-  %say
 |=  $:  [now=@da eny=@uvJ bec=beak]
-        [=ship graph=term ~]
+        [[=ship graph=term ~] ~]
     ==
 :-  %noun
 =/  our  (scot %p p.bec)
 =/  wen  (scot %da now)
 =/  who  (scot %p ship)
-.^(update:graph-store /gx/[our]/graph-store/[wen]/[who]/[graph])
+::
+.^  update:graph-store
+  /gx/[our]/graph-store/[wen]/archive/[who]/[graph]/graph-update
+==

From d6899857f4b2649f328ccdb7e541967c07b313b7 Mon Sep 17 00:00:00 2001
From: Ted Blackman <ted@tlon.io>
Date: Fri, 18 Sep 2020 16:50:34 -0400
Subject: [PATCH 04/54] +graph-store/import-graph

---
 pkg/arvo/app/graph-store.hoon              | 4 +++-
 pkg/arvo/gen/graph-store/export-graph.hoon | 2 +-
 pkg/arvo/gen/graph-store/import-graph.hoon | 9 +++++++++
 pkg/arvo/mar/graph/update.hoon             | 4 ++++
 4 files changed, 17 insertions(+), 2 deletions(-)
 create mode 100644 pkg/arvo/gen/graph-store/import-graph.hoon

diff --git a/pkg/arvo/app/graph-store.hoon b/pkg/arvo/app/graph-store.hoon
index 6a0c0421e..f8115b1b1 100644
--- a/pkg/arvo/app/graph-store.hoon
+++ b/pkg/arvo/app/graph-store.hoon
@@ -482,7 +482,9 @@
     =/  =term   i.t.t.t.path
     =/  result=(unit marked-graph:store)
       (~(get by archive) [ship term])
-    ?~  result  [~ ~]
+    ?~  result
+      ~&  no-archived-graph+[ship term]
+      [~ ~]
     :-  ~  :-  ~  :-  %graph-update
     !>  ^-  update:store
     :+  %0
diff --git a/pkg/arvo/gen/graph-store/export-graph.hoon b/pkg/arvo/gen/graph-store/export-graph.hoon
index 24d9713d6..9a52862d6 100644
--- a/pkg/arvo/gen/graph-store/export-graph.hoon
+++ b/pkg/arvo/gen/graph-store/export-graph.hoon
@@ -4,7 +4,7 @@
 |=  $:  [now=@da eny=@uvJ bec=beak]
         [[=ship graph=term ~] ~]
     ==
-:-  %noun
+:-  %graph-update
 =/  our  (scot %p p.bec)
 =/  wen  (scot %da now)
 =/  who  (scot %p ship)
diff --git a/pkg/arvo/gen/graph-store/import-graph.hoon b/pkg/arvo/gen/graph-store/import-graph.hoon
new file mode 100644
index 000000000..720c24e61
--- /dev/null
+++ b/pkg/arvo/gen/graph-store/import-graph.hoon
@@ -0,0 +1,9 @@
+/+  graph-store
+::
+:-  %say
+|=  $:  [now=@da eny=@uvJ bec=beak]
+        [[graph=term =path ~] ~]
+    ==
+:-  %graph-update
+=-  ~&  update=-  -
+.^(=update:graph-store %cx path)
diff --git a/pkg/arvo/mar/graph/update.hoon b/pkg/arvo/mar/graph/update.hoon
index 1cd2a2068..e6766edb5 100644
--- a/pkg/arvo/mar/graph/update.hoon
+++ b/pkg/arvo/mar/graph/update.hoon
@@ -1,15 +1,19 @@
 /+  *graph-store
+=*  as-octs  as-octs:mimes:html
+::
 |_  upd=update
 ++  grad  %noun
 ++  grow
   |%
   ++  noun  upd
   ++  json  (update:enjs upd)
+  ++  mime  [/application/x-urb-graph-update (as-octs (jam upd))]
   --
 ::
 ++  grab
   |%
   ++  noun  update
   ++  json  update:dejs
+  ++  mime  |=([* =octs] ;;(update (cue q.octs)))
   --
 --

From 9ee1a1751c578633cba6ff2b0354af27568eca8e Mon Sep 17 00:00:00 2001
From: Ted Blackman <ted@tlon.io>
Date: Mon, 21 Sep 2020 10:50:03 -0400
Subject: [PATCH 05/54] :graph-store: remove stray printf

---
 pkg/arvo/app/graph-store.hoon | 1 -
 1 file changed, 1 deletion(-)

diff --git a/pkg/arvo/app/graph-store.hoon b/pkg/arvo/app/graph-store.hoon
index f8115b1b1..de93ec1ad 100644
--- a/pkg/arvo/app/graph-store.hoon
+++ b/pkg/arvo/app/graph-store.hoon
@@ -449,7 +449,6 @@
   ^-  (unit (unit cage))
   |^
   ?>  (team:title our.bowl src.bowl)
-  ~&  path=path
   ?+  path  (on-peek:def path)
       [%x %keys ~]
     :-  ~  :-  ~  :-  %graph-update

From ce97d35d0245b805dc9c7e936cd6082a6a104185 Mon Sep 17 00:00:00 2001
From: Liam Fitzgerald <liam@urizen.co>
Date: Tue, 22 Sep 2020 16:24:49 +1000
Subject: [PATCH 06/54] interface: bump indigo version

---
 pkg/interface/package.json                    |  2 +-
 .../src/views/apps/chat/components/join.js    |  2 +-
 .../groups/components/lib/ContactCard.tsx     |  2 +-
 .../components/lib/BackgroundPicker.tsx       | 20 ++++++++++---------
 .../profile/components/lib/BucketList.tsx     |  4 ++--
 .../profile/components/lib/DisplayForm.tsx    |  8 ++++----
 .../apps/profile/components/lib/DragTile.tsx  |  4 ++--
 .../apps/profile/components/lib/S3Form.tsx    |  2 +-
 .../publish/components/lib/CommentInput.tsx   |  2 +-
 .../apps/publish/components/lib/Join.tsx      |  4 ++--
 .../publish/components/lib/MetadataForm.tsx   |  6 ++----
 .../apps/publish/components/lib/Settings.tsx  |  8 ++++----
 .../views/apps/publish/components/lib/new.tsx |  2 +-
 .../src/views/components/AsyncButton.tsx      | 10 +++++++---
 .../src/views/components/ColorInput.tsx       |  6 +++---
 .../src/views/components/DropdownSearch.tsx   | 11 +++++-----
 .../src/views/components/FormError.tsx        |  4 ++--
 .../src/views/components/ImageInput.tsx       |  2 +-
 18 files changed, 51 insertions(+), 48 deletions(-)

diff --git a/pkg/interface/package.json b/pkg/interface/package.json
index 19e5448df..70afba9d2 100644
--- a/pkg/interface/package.json
+++ b/pkg/interface/package.json
@@ -9,7 +9,7 @@
     "@reach/menu-button": "^0.10.5",
     "@reach/tabs": "^0.10.5",
     "@tlon/indigo-light": "^1.0.3",
-    "@tlon/indigo-react": "^1.1.15",
+    "@tlon/indigo-react": "github:liam-fitzgerald/indigo-react#lf/1.2.5",
     "aws-sdk": "^2.726.0",
     "classnames": "^2.2.6",
     "codemirror": "^5.55.0",
diff --git a/pkg/interface/src/views/apps/chat/components/join.js b/pkg/interface/src/views/apps/chat/components/join.js
index 282a76cab..41476777b 100644
--- a/pkg/interface/src/views/apps/chat/components/join.js
+++ b/pkg/interface/src/views/apps/chat/components/join.js
@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import { Link } from 'react-router-dom';
 import { Spinner } from '../../../components/Spinner';
 import urbitOb from 'urbit-ob';
-import { Box, Text, Input, Button } from '@tlon/indigo-react';
+import { Box, Text, ManagedTextInputField as Input, Button } from '@tlon/indigo-react';
 import { Formik, Form } from 'formik'
 import * as Yup from 'yup';
 
diff --git a/pkg/interface/src/views/apps/groups/components/lib/ContactCard.tsx b/pkg/interface/src/views/apps/groups/components/lib/ContactCard.tsx
index f8438417d..8059b417f 100644
--- a/pkg/interface/src/views/apps/groups/components/lib/ContactCard.tsx
+++ b/pkg/interface/src/views/apps/groups/components/lib/ContactCard.tsx
@@ -6,7 +6,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 { Col, Input, Box, Text, Row } from "@tlon/indigo-react";
+import { Col, ManagedTextInputField as Input, Box, Text, Row } from "@tlon/indigo-react";
 import { Formik, Form, FormikHelpers } from "formik";
 import { Contact } from "~/types/contact-update";
 import { AsyncButton } from "~/views/components/AsyncButton";
diff --git a/pkg/interface/src/views/apps/profile/components/lib/BackgroundPicker.tsx b/pkg/interface/src/views/apps/profile/components/lib/BackgroundPicker.tsx
index 13f87610e..c7325972d 100644
--- a/pkg/interface/src/views/apps/profile/components/lib/BackgroundPicker.tsx
+++ b/pkg/interface/src/views/apps/profile/components/lib/BackgroundPicker.tsx
@@ -1,9 +1,14 @@
-import React from 'react';
-import { Box, InputLabel, Radio, Input } from '@tlon/indigo-react';
+import React from "react";
+import {
+  Box,
+  Label,
+  ManagedRadioButtonField as Radio,
+  ManagedTextInputField as Input,
+} from "@tlon/indigo-react";
 
-import GlobalApi from '~/logic/api/global';
-import { S3State } from '~/types';
-import { ImageInput } from '~/views/components/ImageInput';
+import GlobalApi from "~/logic/api/global";
+import { S3State } from "~/types";
+import { ImageInput } from "~/views/components/ImageInput";
 
 export type BgType = "none" | "url" | "color";
 
@@ -20,7 +25,7 @@ export function BackgroundPicker({
 }) {
   return (
     <Box>
-      <InputLabel>Landscape Background</InputLabel>
+      <Label>Landscape Background</Label>
       <Box display="flex" alignItems="center">
         <Box mt={3} mr={7}>
           <Radio label="Image" id="url" name="bgType" />
@@ -41,7 +46,6 @@ export function BackgroundPicker({
               type="text"
               label="Color"
               id="bgColor"
-              name="bgColor"
             />
           )}
           <Radio label="None" id="none" name="bgType" />
@@ -50,5 +54,3 @@ export function BackgroundPicker({
     </Box>
   );
 }
-
-
diff --git a/pkg/interface/src/views/apps/profile/components/lib/BucketList.tsx b/pkg/interface/src/views/apps/profile/components/lib/BucketList.tsx
index a13764661..7c43f96ec 100644
--- a/pkg/interface/src/views/apps/profile/components/lib/BucketList.tsx
+++ b/pkg/interface/src/views/apps/profile/components/lib/BucketList.tsx
@@ -1,7 +1,7 @@
 import React, { useCallback } from "react";
 
 import {
-  Input,
+  ManagedTextInputField as Input,
   Box,
   Button,
   Col,
@@ -13,7 +13,7 @@ import {
 } from "@tlon/indigo-react";
 import { Formik, Form } from "formik";
 
-import GlobalApi from "../../../../api/global";
+import GlobalApi from "~/logic/api/global";
 
 export function BucketList({
   buckets,
diff --git a/pkg/interface/src/views/apps/profile/components/lib/DisplayForm.tsx b/pkg/interface/src/views/apps/profile/components/lib/DisplayForm.tsx
index d69db3513..639136cc0 100644
--- a/pkg/interface/src/views/apps/profile/components/lib/DisplayForm.tsx
+++ b/pkg/interface/src/views/apps/profile/components/lib/DisplayForm.tsx
@@ -2,8 +2,8 @@ import React from "react";
 
 import {
   Box,
-  InputLabel,
-  Checkbox,
+  Label,
+  ManagedCheckboxField as Checkbox,
   Button,
 } from "@tlon/indigo-react";
 import { Formik, Form } from "formik";
@@ -107,9 +107,9 @@ export default function DisplayForm(props: DisplayFormProps) {
               Display Preferences
             </Box>
             <Box mb={2}>
-              <InputLabel display="block" pb={2}>
+              <Label display="block" pb={2}>
                 Tile Order
-              </InputLabel>
+              </Label>
               <DropLaunchTiles
                 id="tileOrdering"
                 name="tileOrdering"
diff --git a/pkg/interface/src/views/apps/profile/components/lib/DragTile.tsx b/pkg/interface/src/views/apps/profile/components/lib/DragTile.tsx
index 1a08123a6..583926c47 100644
--- a/pkg/interface/src/views/apps/profile/components/lib/DragTile.tsx
+++ b/pkg/interface/src/views/apps/profile/components/lib/DragTile.tsx
@@ -4,11 +4,11 @@ import { usePreview } from "react-dnd-multi-backend";
 import { capitalize } from "lodash";
 import { TileTypeBasic, Tile } from "../../../../types/launch-update";
 
-import { Box, Img as _Img, Text } from "@tlon/indigo-react";
+import { Box, Image as _Image, Text } from "@tlon/indigo-react";
 import styled from "styled-components";
 
 // Need to change dojo image
-const Img = styled(_Img)<{ invert?: boolean }>`
+const Image = styled(_Image)<{ invert?: boolean }>`
   ${(p) =>
     p.theme.colors.white !== "rgba(255,255,255,1)" ? `filter: invert(1);` : ``}
 
diff --git a/pkg/interface/src/views/apps/profile/components/lib/S3Form.tsx b/pkg/interface/src/views/apps/profile/components/lib/S3Form.tsx
index dc82edff2..86dfaa7da 100644
--- a/pkg/interface/src/views/apps/profile/components/lib/S3Form.tsx
+++ b/pkg/interface/src/views/apps/profile/components/lib/S3Form.tsx
@@ -1,7 +1,7 @@
 import React, { useCallback } from "react";
 
 import {
-  Input,
+  ManagedTextInputField as Input,
   Box,
   Button,
   Col,
diff --git a/pkg/interface/src/views/apps/publish/components/lib/CommentInput.tsx b/pkg/interface/src/views/apps/publish/components/lib/CommentInput.tsx
index 4830f2067..62c8f105b 100644
--- a/pkg/interface/src/views/apps/publish/components/lib/CommentInput.tsx
+++ b/pkg/interface/src/views/apps/publish/components/lib/CommentInput.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import * as Yup from "yup";
 import { Formik, FormikHelpers, Form, useFormikContext } from "formik";
 import { AsyncButton } from "../../../../components/AsyncButton";
-import { TextArea } from "@tlon/indigo-react";
+import { ManagedTextAreaField as TextArea } from "@tlon/indigo-react";
 
 interface FormSchema {
   comment: string;
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 c510df597..f3f413a77 100644
--- a/pkg/interface/src/views/apps/publish/components/lib/Join.tsx
+++ b/pkg/interface/src/views/apps/publish/components/lib/Join.tsx
@@ -1,5 +1,5 @@
 import React, { useCallback, useState, useRef, useEffect } from "react";
-import { Col, Text, ErrorMessage } from "@tlon/indigo-react";
+import { Col, Text, ErrorLabel } from "@tlon/indigo-react";
 import { Spinner } from "~/views/components/Spinner";
 import { Notebooks } from "~/types/publish-update";
 import { useWaitForProps } from "~/logic/lib/useWaitForProps";
@@ -46,7 +46,7 @@ export function JoinScreen(props: JoinScreenProps & RouteComponentProps) {
     <Col p={4}>
       <Text fontSize={1}>Joining Notebook</Text>
       <Spinner awaiting text="Joining..." />
-      {error && <ErrorMessage>Unable to join notebook</ErrorMessage>}
+      {error && <ErrorLabel>Unable to join notebook</ErrorLabel>}
     </Col>
   );
 }
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 4209817ef..05065ba2c 100644
--- a/pkg/interface/src/views/apps/publish/components/lib/MetadataForm.tsx
+++ b/pkg/interface/src/views/apps/publish/components/lib/MetadataForm.tsx
@@ -3,11 +3,9 @@ import { AsyncButton } from "../../../../components/AsyncButton";
 import * as Yup from "yup";
 import {
   Box,
-  Input,
-  Checkbox,
+  ManagedTextInputField as Input,
+  ManagedCheckboxField as Checkbox,
   Col,
-  InputLabel,
-  InputCaption,
   Button,
   Center,
 } from "@tlon/indigo-react";
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 3bb3693c8..f9e7a9084 100644
--- a/pkg/interface/src/views/apps/publish/components/lib/Settings.tsx
+++ b/pkg/interface/src/views/apps/publish/components/lib/Settings.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect } from "react";
-import { Box, Col, Button, InputLabel, InputCaption } from "@tlon/indigo-react";
+import { Box, Col, Button, Label } from "@tlon/indigo-react";
 import GlobalApi from "~/logic/api/global";
 import { Notebook } from "~/types/publish-update";
 import { Contacts } from "~/types/contact-update";
@@ -50,11 +50,11 @@ export function Settings(props: SettingsProps) {
       <MetadataForm {...props} />
       <Divider />
       <Col mb={4}>
-        <InputLabel>Delete Notebook</InputLabel>
-        <InputCaption>
+        <Label>Delete Notebook</Label>
+        <Label gray mt="2">
           Permanently delete this notebook. (All current members will no longer
           see this notebook.)
-        </InputCaption>
+        </Label>
         <Button onClick={onDelete} mt={1} border error>
           Delete this notebook
         </Button>
diff --git a/pkg/interface/src/views/apps/publish/components/lib/new.tsx b/pkg/interface/src/views/apps/publish/components/lib/new.tsx
index cd061b68c..8a4b5360f 100644
--- a/pkg/interface/src/views/apps/publish/components/lib/new.tsx
+++ b/pkg/interface/src/views/apps/publish/components/lib/new.tsx
@@ -1,5 +1,5 @@
 import React, { useCallback } from "react";
-import { Box, Input, Col } from "@tlon/indigo-react";
+import { Box, ManagedTextInputField as Input, Col } from "@tlon/indigo-react";
 import { Formik, Form } from "formik";
 import * as Yup from "yup";
 import GlobalApi from "~/logic/api/global";
diff --git a/pkg/interface/src/views/components/AsyncButton.tsx b/pkg/interface/src/views/components/AsyncButton.tsx
index a2a5fd826..101336494 100644
--- a/pkg/interface/src/views/components/AsyncButton.tsx
+++ b/pkg/interface/src/views/components/AsyncButton.tsx
@@ -1,8 +1,7 @@
 import React, { ReactNode, useState, useEffect } from "react";
 
-import { Button } from "@tlon/indigo-react";
+import { Button, LoadingSpinner } from "@tlon/indigo-react";
 
-import { Spinner } from "./Spinner";
 import { useFormikContext } from "formik";
 
 interface AsyncButtonProps {
@@ -37,7 +36,12 @@ export function AsyncButton({
   return (
     <Button border disabled={!isValid} type="submit" {...rest}>
       {isSubmitting ? (
-        <Spinner awaiting text={loadingText} />
+        <LoadingSpinner
+          foreground="white"
+          background="transparent"
+          awaiting
+          text={loadingText}
+        />
       ) : success === true ? (
         "Done"
       ) : success === false ? (
diff --git a/pkg/interface/src/views/components/ColorInput.tsx b/pkg/interface/src/views/components/ColorInput.tsx
index c05ffd897..34654476d 100644
--- a/pkg/interface/src/views/components/ColorInput.tsx
+++ b/pkg/interface/src/views/components/ColorInput.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { useField } from "formik";
 import styled from "styled-components";
-import { Col, InputLabel, Row, Box, ErrorMessage } from "@tlon/indigo-react";
+import { Col, Label, Row, Box, ErrorLabel } from "@tlon/indigo-react";
 
 import { uxToHex, hexToUx } from "~/logic/lib/util";
 
@@ -44,7 +44,7 @@ export function ColorInput(props: ColorInputProps) {
 
   return (
     <Col {...rest}>
-      <InputLabel htmlFor={id}>{label}</InputLabel>
+      <Label htmlFor={id}>{label}</Label>
       <Row mt={2}>
         <Input onChange={onChange} value={hex} />
         <Box
@@ -58,7 +58,7 @@ export function ColorInput(props: ColorInputProps) {
           bg={`#${padded}`}
         />
       </Row>
-      <ErrorMessage mt="2">{error}</ErrorMessage>
+      <ErrorLabel mt="2">{error}</ErrorLabel>
     </Col>
   );
 }
diff --git a/pkg/interface/src/views/components/DropdownSearch.tsx b/pkg/interface/src/views/components/DropdownSearch.tsx
index b9d9132a1..598aad795 100644
--- a/pkg/interface/src/views/components/DropdownSearch.tsx
+++ b/pkg/interface/src/views/components/DropdownSearch.tsx
@@ -10,9 +10,8 @@ import _ from "lodash";
 import Mousetrap from "mousetrap";
 import {
   Box,
-  InputLabel,
-  ErrorMessage,
-  InputCaption,
+  Label,
+  ErrorLabel,
 } from "@tlon/indigo-react";
 import { useDropdown } from "~/logic/lib/useDropdown";
 import styled from "styled-components";
@@ -130,8 +129,8 @@ export function DropdownSearch<C>(props: DropdownSearchProps<C>) {
 
   return (
     <Box position="relative">
-      <InputLabel htmlFor={props.id}>{props.label}</InputLabel>
-      {caption ? <InputCaption>{caption}</InputCaption> : null}
+      <Label htmlFor={props.id}>{props.label}</Label>
+      {caption ? <Label mt="2" gray>{caption}</Label> : null}
       {!props.disabled && (
         <TextArea
           ref={textarea}
@@ -165,7 +164,7 @@ export function DropdownSearch<C>(props: DropdownSearchProps<C>) {
           })}
         </Box>
       )}
-      <ErrorMessage>{props.error}</ErrorMessage>
+      <ErrorLabel>{props.error}</ErrorLabel>
     </Box>
   );
 }
diff --git a/pkg/interface/src/views/components/FormError.tsx b/pkg/interface/src/views/components/FormError.tsx
index cc9ac0b98..0f8c394a6 100644
--- a/pkg/interface/src/views/components/FormError.tsx
+++ b/pkg/interface/src/views/components/FormError.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import { useFormikContext } from "formik";
-import { ErrorMessage } from "@tlon/indigo-react";
+import { ErrorLabel } from "@tlon/indigo-react";
 
 export function FormError(props: { message: string }) {
   const { status } = useFormikContext();
@@ -8,6 +8,6 @@ export function FormError(props: { message: string }) {
   let s = status || {};
 
   return (
-    <ErrorMessage>{"error" in s ? props.message : null}</ErrorMessage>
+    <ErrorLabel>{"error" in s ? props.message : null}</ErrorLabel>
   );
 }
diff --git a/pkg/interface/src/views/components/ImageInput.tsx b/pkg/interface/src/views/components/ImageInput.tsx
index e0d43c50d..0d6d8a866 100644
--- a/pkg/interface/src/views/components/ImageInput.tsx
+++ b/pkg/interface/src/views/components/ImageInput.tsx
@@ -1,6 +1,6 @@
 import React, { useRef, useCallback, useState } from "react";
 
-import { Box, Input, Img, Button } from "@tlon/indigo-react";
+import { Box, ManagedTextInputField as Input, Button } from "@tlon/indigo-react";
 import GlobalApi from "~/api/global";
 import { useField } from "formik";
 import { S3State } from "~/types/s3-update";

From a3545c5cb34b9e4143e58090ca140613b7b8f4e7 Mon Sep 17 00:00:00 2001
From: Liam Fitzgerald <liam@urizen.co>
Date: Tue, 22 Sep 2020 16:49:39 +1000
Subject: [PATCH 07/54] publish: introduce ProseMirror for markdown editing

---
 pkg/interface/package.json                    |  8 +++
 .../publish/components/lib/MarkdownField.tsx  | 51 +++++++++++--------
 .../views/apps/publish/css/ProseMirror.css    | 14 +++++
 .../src/views/components/MarkdownEditor.tsx   | 50 ++++++++++++++++++
 4 files changed, 103 insertions(+), 20 deletions(-)
 create mode 100644 pkg/interface/src/views/apps/publish/css/ProseMirror.css
 create mode 100644 pkg/interface/src/views/components/MarkdownEditor.tsx

diff --git a/pkg/interface/package.json b/pkg/interface/package.json
index 70afba9d2..839a44fec 100644
--- a/pkg/interface/package.json
+++ b/pkg/interface/package.json
@@ -22,6 +22,11 @@
     "mousetrap-global-bind": "^1.1.0",
     "oembed-parser": "^1.4.1",
     "prop-types": "^15.7.2",
+    "prosemirror": "^0.11.1",
+    "prosemirror-example-setup": "^1.1.2",
+    "prosemirror-markdown": "^1.5.0",
+    "prosemirror-state": "^1.3.3",
+    "prosemirror-view": "^1.15.7",
     "react": "^16.5.2",
     "react-codemirror2": "^6.0.1",
     "react-dnd-html5-backend": "^11.1.3",
@@ -40,6 +45,7 @@
     "suncalc": "^1.8.0",
     "urbit-ob": "^5.0.0",
     "urbit-sigil-js": "^1.3.2",
+    "use-prosemirror": "^1.2.0",
     "yup": "^0.29.3",
     "normalize-wheel": "1.0.1"
   },
@@ -53,6 +59,8 @@
     "@babel/preset-react": "^7.9.4",
     "@babel/preset-typescript": "^7.10.1",
     "@types/lodash": "^4.14.155",
+    "@types/prosemirror-model": "^1.7.2",
+    "@types/prosemirror-view": "^1.15.1",
     "@types/react": "^16.9.38",
     "@types/react-router-dom": "^5.1.5",
     "@types/styled-components": "^5.1.2",
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 cec0f6d5e..c6a7eeef1 100644
--- a/pkg/interface/src/views/apps/publish/components/lib/MarkdownField.tsx
+++ b/pkg/interface/src/views/apps/publish/components/lib/MarkdownField.tsx
@@ -1,27 +1,38 @@
-import React from 'react';
-import styled from 'styled-components';
-import { MarkdownEditor as _MarkdownEditor, Box, ErrorMessage } from '@tlon/indigo-react';
-import { useField } from 'formik';
+import React, { useCallback } from "react";
+import styled from "styled-components";
+import { Box, ErrorLabel } from "@tlon/indigo-react";
+import { useField } from "formik";
+import { MarkdownEditor } from "~/views/components/MarkdownEditor";
 
-const MarkdownEditor = styled(_MarkdownEditor)`
-  border: 1px solid ${(p) => p.theme.colors.lightGray};
-  border-radius: ${(p) => p.theme.radii[2]}px;
-`;
+export const MarkdownField = ({
+  id,
+  ...rest
+}: { id: string } & Parameters<typeof Box>[0]) => {
+  const [{ value }, { error, touched }, { setValue, setTouched }] = useField(
+    id
+  );
 
-export const MarkdownField = ({ id, ...rest }: { id: string; } & Parameters<typeof Box>[0]) => {
-  const [{ value }, { error, touched }, { setValue, setTouched }] = useField(id);
+  const onChange = useCallback(
+    (s: string) => {
+      setValue(s);
+      setTouched(true);
+    },
+    [setValue, setTouched]
+  );
 
   return (
-    <Box overflowY="hidden" width="100%" display="flex" flexDirection="column" {...rest}>
-      <MarkdownEditor
-        onFocus={() => setTouched(true)}
-        onBlur={() => setTouched(false)}
-        value={value}
-        onBeforeChange={(e, d, v) => setValue(v)}
-      />
-      <ErrorMessage>{touched && error}</ErrorMessage>
+    <Box
+      border={1}
+      borderRadius={1}
+      borderColor="washedGray"
+      overflowY="hidden"
+      width="100%"
+      display="flex"
+      flexDirection="column"
+      {...rest}
+    >
+      <MarkdownEditor content={value} onChange={onChange} />
+      <ErrorLabel>{touched && error}</ErrorLabel>
     </Box>
   );
 };
-
-
diff --git a/pkg/interface/src/views/apps/publish/css/ProseMirror.css b/pkg/interface/src/views/apps/publish/css/ProseMirror.css
new file mode 100644
index 000000000..139a31bd4
--- /dev/null
+++ b/pkg/interface/src/views/apps/publish/css/ProseMirror.css
@@ -0,0 +1,14 @@
+
+.ProseMirror-menubar {
+  padding: 4px !important;
+  border-bottom: 1px solid rgba(0,0,0,0.1);
+}
+
+.ProseMirror-example-setup-style {
+  padding: 4px !important;
+}
+
+.ProseMirror > *, .ProseMirror-menubar > * {
+  font-family: "Inter", "Inter UI", -apple-system, BlinkMacSystemFont, 'San Francisco', 'Helvetica Neue', Arial, sans-serif;
+}
+
diff --git a/pkg/interface/src/views/components/MarkdownEditor.tsx b/pkg/interface/src/views/components/MarkdownEditor.tsx
new file mode 100644
index 000000000..a49c5c3f5
--- /dev/null
+++ b/pkg/interface/src/views/components/MarkdownEditor.tsx
@@ -0,0 +1,50 @@
+import React, { useMemo, useCallback } from "react";
+
+import {
+  schema,
+  defaultMarkdownParser,
+  defaultMarkdownSerializer,
+} from "prosemirror-markdown";
+import { exampleSetup } from "prosemirror-example-setup";
+import "prosemirror-view/style/prosemirror.css";
+import "prosemirror-menu/style/menu.css";
+import { EditorState } from "prosemirror-state";
+import { useProseMirror, ProseMirror } from "use-prosemirror";
+import _ from "lodash";
+import "~/views/apps/publish/css/ProseMirror.css"
+
+interface MarkdownEditorProps {
+  content: string;
+  onChange: (s: string) => void;
+}
+
+export function MarkdownEditor(props: MarkdownEditorProps) {
+  const [state, setState] = useProseMirror({
+    schema,
+    doc: defaultMarkdownParser.parse(props.content),
+    plugins: exampleSetup({ schema, menuBar: true }),
+  });
+
+  const reportChange = _.debounce(
+    useCallback(
+      (doc: any) => {
+        const content = defaultMarkdownSerializer.serialize(doc);
+        props.onChange(content);
+      },
+      [props.onChange]
+    ),
+    500
+  );
+
+  const onChange = useCallback(
+    (state: EditorState) => {
+      reportChange(state.doc);
+      setState(state);
+    },
+    [reportChange, setState]
+  );
+
+  return (
+    <ProseMirror className="h-100 w-100" onChange={onChange} state={state} />
+  );
+}

From 6aec4baf2bc7fbc465e3ecdec4ccf9163767cb08 Mon Sep 17 00:00:00 2001
From: Liam Fitzgerald <liam@urizen.co>
Date: Tue, 22 Sep 2020 16:50:09 +1000
Subject: [PATCH 08/54] interface: fix assorted breakage from 1.2 indigo bump

---
 pkg/interface/package-lock.json               | 272 +++++++++++++++++-
 .../publish/components/lib/CommentInput.tsx   |   2 +-
 .../apps/publish/components/lib/NoteForm.tsx  |   2 +-
 .../apps/publish/components/lib/Notebook.tsx  | 192 +++++++------
 .../apps/publish/components/lib/Sidebar.tsx   |   3 +-
 .../src/views/components/AsyncButton.tsx      |   2 +-
 pkg/interface/src/views/components/Tab.tsx    |  31 ++
 7 files changed, 413 insertions(+), 91 deletions(-)
 create mode 100644 pkg/interface/src/views/components/Tab.tsx

diff --git a/pkg/interface/package-lock.json b/pkg/interface/package-lock.json
index f379ea40f..32cbe70b9 100644
--- a/pkg/interface/package-lock.json
+++ b/pkg/interface/package-lock.json
@@ -1709,9 +1709,21 @@
       "integrity": "sha512-3OPSdf9cejP/TSzWXuBaYbzLtAfBzQnc75SlPLkoPfwpxnv1Bvy9hiWngLY0WnKRR6lMOldnkYQCCuNWeDibYQ=="
     },
     "@tlon/indigo-react": {
-      "version": "1.1.15",
-      "resolved": "https://registry.npmjs.org/@tlon/indigo-react/-/indigo-react-1.1.15.tgz",
-      "integrity": "sha512-Ao+1hAJjN5y1gDyT7GIUgXORPXTIpZKVVtrS++ZGYBemYMSq3oJFMIZertsSZbDHuh/TsVPenJrMUZBpV60law=="
+      "version": "github:liam-fitzgerald/indigo-react#36fe20029c6005b39581b05c2987cd7c6d606056",
+      "from": "github:liam-fitzgerald/indigo-react#lf/1.2.5",
+      "requires": {
+        "@reach/menu-button": "^0.10.5",
+        "formik": "^2.1.5",
+        "react": "^16.13.1",
+        "tslib": "^2.0.1"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.0.1.tgz",
+          "integrity": "sha512-SgIkNheinmEBgx1IUNirK0TUD4X9yjjBRTqqjggWCU3pUEqIk3/Uwl3yRixYKT6WjQuGiwDv4NomL3wqRCj+CQ=="
+        }
+      }
     },
     "@types/anymatch": {
       "version": "1.3.1",
@@ -1794,12 +1806,58 @@
       "integrity": "sha512-x26ur3dSXgv5AwKS0lNfbjpCakGIduWU1DU91Zz58ONRWrIKGunmZBNv4P7N+e27sJkiGDsw/3fT4AtsqQBrBA==",
       "dev": true
     },
+    "@types/orderedmap": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@types/orderedmap/-/orderedmap-1.0.0.tgz",
+      "integrity": "sha512-dxKo80TqYx3YtBipHwA/SdFmMMyLCnP+5mkEqN0eMjcTBzHkiiX0ES118DsjDBjvD+zeSsSU9jULTZ+frog+Gw==",
+      "dev": true
+    },
     "@types/prop-types": {
       "version": "15.7.3",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.3.tgz",
       "integrity": "sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw==",
       "dev": true
     },
+    "@types/prosemirror-model": {
+      "version": "1.7.2",
+      "resolved": "https://registry.npmjs.org/@types/prosemirror-model/-/prosemirror-model-1.7.2.tgz",
+      "integrity": "sha512-2l+yXvidg3AUHN07mO4Jd8Q84fo6ksFsy7LHUurLYrZ74uTahBp2fzcO49AKZMzww2EulXJ40Kl/OFaQ/7A1fw==",
+      "dev": true,
+      "requires": {
+        "@types/orderedmap": "*"
+      }
+    },
+    "@types/prosemirror-state": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/@types/prosemirror-state/-/prosemirror-state-1.2.5.tgz",
+      "integrity": "sha512-a5DxAifiF6vmdSJ5jsDMkpykUgUJUy+T5Q5hCjFOKJ4cfd3m3q1lsFKr7Bc4r91Qb7rfqyiKCMDnASS8LIHrKw==",
+      "dev": true,
+      "requires": {
+        "@types/prosemirror-model": "*",
+        "@types/prosemirror-transform": "*",
+        "@types/prosemirror-view": "*"
+      }
+    },
+    "@types/prosemirror-transform": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@types/prosemirror-transform/-/prosemirror-transform-1.1.1.tgz",
+      "integrity": "sha512-yYCYSoiRH+Wcbl8GJc0PFCzeyMzNQ1vL2xrHHSXZuNcIlH75VoiKrZFeZ6BS9cl8mYXjZrlmdBe8YOxYvyKM6A==",
+      "dev": true,
+      "requires": {
+        "@types/prosemirror-model": "*"
+      }
+    },
+    "@types/prosemirror-view": {
+      "version": "1.15.1",
+      "resolved": "https://registry.npmjs.org/@types/prosemirror-view/-/prosemirror-view-1.15.1.tgz",
+      "integrity": "sha512-ZdgIqDLWiO4wW4DhK8OjEVam3/DhBcggQeZ6zLts+UCflAZPnEk5dzRqFBVEyrvWqSAGLuPAoOgGAPjj/XwR8w==",
+      "dev": true,
+      "requires": {
+        "@types/prosemirror-model": "*",
+        "@types/prosemirror-state": "*",
+        "@types/prosemirror-transform": "*"
+      }
+    },
     "@types/react": {
       "version": "16.9.38",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-16.9.38.tgz",
@@ -2309,7 +2367,6 @@
       "version": "1.0.10",
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
       "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==",
-      "dev": true,
       "requires": {
         "sprintf-js": "~1.0.2"
       }
@@ -3553,6 +3610,11 @@
         "sha.js": "^2.4.8"
       }
     },
+    "crelt": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/crelt/-/crelt-1.0.4.tgz",
+      "integrity": "sha512-l1cwMUOssGLEj5zgbut4lxJq95ZabOXVZnDybNqQRUtXh1lvUK7e7kJNm8SfvTQzYpE3AVJhIVUJKf382lMA7A=="
+    },
     "cross-env": {
       "version": "7.0.2",
       "resolved": "https://registry.npmjs.org/cross-env/-/cross-env-7.0.2.tgz",
@@ -6208,6 +6270,14 @@
         "type-check": "~0.3.2"
       }
     },
+    "linkify-it": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-2.2.0.tgz",
+      "integrity": "sha512-GnAl/knGn+i1U/wjBz3akz2stz+HrHLsxMwHQGofCDfPvlf+gDKN58UtfmUquTY4/MXeE2x7k19KQmeoZi94Iw==",
+      "requires": {
+        "uc.micro": "^1.0.1"
+      }
+    },
     "loader-runner": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-2.4.0.tgz",
@@ -6338,6 +6408,18 @@
       "resolved": "https://registry.npmjs.org/markdown-escapes/-/markdown-escapes-1.0.4.tgz",
       "integrity": "sha512-8z4efJYk43E0upd0NbVXwgSTQs6cT3T06etieCMEg7dRbzCbxUCK/GHlX8mhHRDcp+OLlHkPKsvqQTCvsRl2cg=="
     },
+    "markdown-it": {
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-10.0.0.tgz",
+      "integrity": "sha512-YWOP1j7UbDNz+TumYP1kpwnP0aEa711cJjrAQrzd0UXlbJfc5aAq0F/PZHjiioqDC1NKgvIMX+o+9Bk7yuM2dg==",
+      "requires": {
+        "argparse": "^1.0.7",
+        "entities": "~2.0.0",
+        "linkify-it": "^2.0.0",
+        "mdurl": "^1.0.1",
+        "uc.micro": "^1.0.5"
+      }
+    },
     "markdown-to-jsx": {
       "version": "6.11.4",
       "resolved": "https://registry.npmjs.org/markdown-to-jsx/-/markdown-to-jsx-6.11.4.tgz",
@@ -6366,6 +6448,11 @@
         "unist-util-visit-parents": "1.1.2"
       }
     },
+    "mdurl": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/mdurl/-/mdurl-1.0.1.tgz",
+      "integrity": "sha1-/oWy7HWlkDfyrf7BAP1sYBdhFS4="
+    },
     "media-typer": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
@@ -6895,6 +6982,11 @@
       "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
       "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA=="
     },
+    "normalize-wheel": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/normalize-wheel/-/normalize-wheel-1.0.1.tgz",
+      "integrity": "sha1-rsiGr/2wRQcNhWRH32Ls+GFG7EU="
+    },
     "npm-run-path": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-2.0.2.tgz",
@@ -7131,6 +7223,11 @@
         "word-wrap": "~1.2.3"
       }
     },
+    "orderedmap": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/orderedmap/-/orderedmap-1.1.1.tgz",
+      "integrity": "sha512-3Ux8um0zXbVacKUkcytc0u3HgC0b0bBLT+I60r2J/En72cI0nZffqrA7Xtf2Hqs27j1g82llR5Mhbd0Z1XW4AQ=="
+    },
     "original": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/original/-/original-1.0.2.tgz",
@@ -7647,6 +7744,150 @@
       "resolved": "https://registry.npmjs.org/property-expr/-/property-expr-2.0.3.tgz",
       "integrity": "sha512-TEMKBo6s4gZUKmNYwaMkS2JdDxdWgUijW/U/jLAOHVyLZfU1KHXv+mC1J9gkfGOr8532XHqMJytko1lSjc0kmw=="
     },
+    "prosemirror": {
+      "version": "0.11.1",
+      "resolved": "https://registry.npmjs.org/prosemirror/-/prosemirror-0.11.1.tgz",
+      "integrity": "sha512-IZ35mmexuo3DNkMXs2A3bAm1jdlAJRVPor/bX1AWT+TdAR9fv6igUjRUFtQDCRUKwxH7ufwL1p6Um/MdgcbVIw=="
+    },
+    "prosemirror-commands": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/prosemirror-commands/-/prosemirror-commands-1.1.4.tgz",
+      "integrity": "sha512-kj4Qi+8h3EpJtZuuEDwZ9h2/QNGWDsIX/CzjmClxi9GhxWyBUMVUvIFk0mgdqHyX20lLeGmOpc0TLA5aPzgpWg==",
+      "requires": {
+        "prosemirror-model": "^1.0.0",
+        "prosemirror-state": "^1.0.0",
+        "prosemirror-transform": "^1.0.0"
+      }
+    },
+    "prosemirror-dropcursor": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/prosemirror-dropcursor/-/prosemirror-dropcursor-1.3.2.tgz",
+      "integrity": "sha512-4c94OUGyobGnwcQI70OXyMhE/9T4aTgjU+CHxkd5c7D+jH/J0mKM/lk+jneFVKt7+E4/M0D9HzRPifu8U28Thw==",
+      "requires": {
+        "prosemirror-state": "^1.0.0",
+        "prosemirror-transform": "^1.1.0",
+        "prosemirror-view": "^1.1.0"
+      }
+    },
+    "prosemirror-example-setup": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/prosemirror-example-setup/-/prosemirror-example-setup-1.1.2.tgz",
+      "integrity": "sha512-MTpIMyqk08jFnzxeRMCinCEMtVSTUtxKgQBGxfCbVe9C6zIOqp9qZZJz5Ojaad1GETySyuj8+OIHHvQsIaaaGQ==",
+      "requires": {
+        "prosemirror-commands": "^1.0.0",
+        "prosemirror-dropcursor": "^1.0.0",
+        "prosemirror-gapcursor": "^1.0.0",
+        "prosemirror-history": "^1.0.0",
+        "prosemirror-inputrules": "^1.0.0",
+        "prosemirror-keymap": "^1.0.0",
+        "prosemirror-menu": "^1.0.0",
+        "prosemirror-schema-list": "^1.0.0",
+        "prosemirror-state": "^1.0.0"
+      }
+    },
+    "prosemirror-gapcursor": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/prosemirror-gapcursor/-/prosemirror-gapcursor-1.1.5.tgz",
+      "integrity": "sha512-SjbUZq5pgsBDuV3hu8GqgIpZR5eZvGLM+gPQTqjVVYSMUCfKW3EGXTEYaLHEl1bGduwqNC95O3bZflgtAb4L6w==",
+      "requires": {
+        "prosemirror-keymap": "^1.0.0",
+        "prosemirror-model": "^1.0.0",
+        "prosemirror-state": "^1.0.0",
+        "prosemirror-view": "^1.0.0"
+      }
+    },
+    "prosemirror-history": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/prosemirror-history/-/prosemirror-history-1.1.3.tgz",
+      "integrity": "sha512-zGDotijea+vnfnyyUGyiy1wfOQhf0B/b6zYcCouBV8yo6JmrE9X23M5q7Nf/nATywEZbgRLG70R4DmfSTC+gfg==",
+      "requires": {
+        "prosemirror-state": "^1.2.2",
+        "prosemirror-transform": "^1.0.0",
+        "rope-sequence": "^1.3.0"
+      }
+    },
+    "prosemirror-inputrules": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/prosemirror-inputrules/-/prosemirror-inputrules-1.1.3.tgz",
+      "integrity": "sha512-ZaHCLyBtvbyIHv0f5p6boQTIJjlD6o2NPZiEaZWT2DA+j591zS29QQEMT4lBqwcLW3qRSf7ZvoKNbf05YrsStw==",
+      "requires": {
+        "prosemirror-state": "^1.0.0",
+        "prosemirror-transform": "^1.0.0"
+      }
+    },
+    "prosemirror-keymap": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/prosemirror-keymap/-/prosemirror-keymap-1.1.4.tgz",
+      "integrity": "sha512-Al8cVUOnDFL4gcI5IDlG6xbZ0aOD/i3B17VT+1JbHWDguCgt/lBHVTHUBcKvvbSg6+q/W4Nj1Fu6bwZSca3xjg==",
+      "requires": {
+        "prosemirror-state": "^1.0.0",
+        "w3c-keyname": "^2.2.0"
+      }
+    },
+    "prosemirror-markdown": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/prosemirror-markdown/-/prosemirror-markdown-1.5.0.tgz",
+      "integrity": "sha512-ugTyZfTu1l2E3EI6+DwD917mz2Sk5E4R01Nh67yMffGg4S9ZetC81g1VIKGCaak4jnoP4BMUIOUJyXAS6xFLaA==",
+      "requires": {
+        "markdown-it": "^10.0.0",
+        "prosemirror-model": "^1.0.0"
+      }
+    },
+    "prosemirror-menu": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/prosemirror-menu/-/prosemirror-menu-1.1.4.tgz",
+      "integrity": "sha512-2ROsji/X9ciDnVSRvSTqFygI34GEdHfQSsK4zBKjPxSEroeiHHcdRMS1ofNIf2zM0Vpp5/YqfpxynElymQkqzg==",
+      "requires": {
+        "crelt": "^1.0.0",
+        "prosemirror-commands": "^1.0.0",
+        "prosemirror-history": "^1.0.0",
+        "prosemirror-state": "^1.0.0"
+      }
+    },
+    "prosemirror-model": {
+      "version": "1.11.2",
+      "resolved": "https://registry.npmjs.org/prosemirror-model/-/prosemirror-model-1.11.2.tgz",
+      "integrity": "sha512-+gM+x1VUfGAyKR/g0bK7FC46fVNq0xVVL859QAQ7my2p5HzKrPps/pSbYn7T50XTG2r2IhZJChsUFUBHtcoN0Q==",
+      "requires": {
+        "orderedmap": "^1.1.0"
+      }
+    },
+    "prosemirror-schema-list": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/prosemirror-schema-list/-/prosemirror-schema-list-1.1.4.tgz",
+      "integrity": "sha512-pNTuZflacFOBlxrTcWSdWhjoB8BaucwfJVp/gJNxztOwaN3wQiC65axclXyplf6TKgXD/EkWfS/QAov3/Znadw==",
+      "requires": {
+        "prosemirror-model": "^1.0.0",
+        "prosemirror-transform": "^1.0.0"
+      }
+    },
+    "prosemirror-state": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/prosemirror-state/-/prosemirror-state-1.3.3.tgz",
+      "integrity": "sha512-PLXh2VJsIgvlgSTH6I2Yg6vk1CzPDp21DFreVpQtDMY2S6WaMmrQgDTLRcsrD8X38v8Yc873H7+ogdGzyIPn+w==",
+      "requires": {
+        "prosemirror-model": "^1.0.0",
+        "prosemirror-transform": "^1.0.0"
+      }
+    },
+    "prosemirror-transform": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/prosemirror-transform/-/prosemirror-transform-1.2.8.tgz",
+      "integrity": "sha512-hKqceqv9ZmMQXNQkhFjr0KFGPvkhygaWND+uIM0GxRpALrKfxP97SsgHTBs3OpJhDmh5N+mB4D/CksB291Eavg==",
+      "requires": {
+        "prosemirror-model": "^1.0.0"
+      }
+    },
+    "prosemirror-view": {
+      "version": "1.15.7",
+      "resolved": "https://registry.npmjs.org/prosemirror-view/-/prosemirror-view-1.15.7.tgz",
+      "integrity": "sha512-fSSXphXg+82qb4xNsHT0mX6ro0Wu1/l+WIFO5jYfyjd42r6ZWSg0gFItLgqOVPxoKQOlrPJUhrozTxiqx0EXOg==",
+      "requires": {
+        "prosemirror-model": "^1.1.0",
+        "prosemirror-state": "^1.0.0",
+        "prosemirror-transform": "^1.1.0"
+      }
+    },
     "proxy-addr": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.6.tgz",
@@ -8388,6 +8629,11 @@
         "inherits": "^2.0.1"
       }
     },
+    "rope-sequence": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/rope-sequence/-/rope-sequence-1.3.2.tgz",
+      "integrity": "sha512-ku6MFrwEVSVmXLvy3dYph3LAMNS0890K7fabn+0YIRQ2T96T9F4gkFf0vf0WW0JUraNWwGRtInEpH7yO4tbQZg=="
+    },
     "run-async": {
       "version": "2.4.1",
       "resolved": "https://registry.npmjs.org/run-async/-/run-async-2.4.1.tgz",
@@ -8993,8 +9239,7 @@
     "sprintf-js": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
-      "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=",
-      "dev": true
+      "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw="
     },
     "ssri": {
       "version": "6.0.1",
@@ -9687,6 +9932,11 @@
       "integrity": "sha512-BLbiRkiBzAwsjut4x/dsibSTB6yWpwT5qWmC2OfuCg3GgVQCSgMs4vEctYPhsaGtd0AeuuHMkjZ2h2WG8MSzRw==",
       "dev": true
     },
+    "uc.micro": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-1.0.6.tgz",
+      "integrity": "sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA=="
+    },
     "unherit": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/unherit/-/unherit-1.1.3.tgz",
@@ -9908,6 +10158,11 @@
       "integrity": "sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ==",
       "dev": true
     },
+    "use-prosemirror": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/use-prosemirror/-/use-prosemirror-1.2.0.tgz",
+      "integrity": "sha512-qRq5xNdgNQKBFBOKlhGmpKd0yJoktmkiUPkD+SmS+BX9are1S/Emg4qf8vk/Npk32ECIgKxmbicd4xUzQFhNoQ=="
+    },
     "util": {
       "version": "0.11.1",
       "resolved": "https://registry.npmjs.org/util/-/util-0.11.1.tgz",
@@ -10006,6 +10261,11 @@
       "integrity": "sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ==",
       "dev": true
     },
+    "w3c-keyname": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/w3c-keyname/-/w3c-keyname-2.2.4.tgz",
+      "integrity": "sha512-tOhfEwEzFLJzf6d1ZPkYfGj+FWhIpBux9ppoP3rlclw3Z0BZv3N7b7030Z1kYth+6rDuAsXUFr+d0VE6Ed1ikw=="
+    },
     "warning": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
diff --git a/pkg/interface/src/views/apps/publish/components/lib/CommentInput.tsx b/pkg/interface/src/views/apps/publish/components/lib/CommentInput.tsx
index 62c8f105b..1a4b4a82f 100644
--- a/pkg/interface/src/views/apps/publish/components/lib/CommentInput.tsx
+++ b/pkg/interface/src/views/apps/publish/components/lib/CommentInput.tsx
@@ -48,7 +48,7 @@ export default function CommentInput(props: CommentInputProps) {
           id="comment"
           placeholder={props.placeholder || ""}
         />
-        <AsyncButton loadingText={loading} border type="submit">
+        <AsyncButton mt={2} loadingText={loading} border type="submit">
           {label}
         </AsyncButton>
       </Form>
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 e4cc1f8ae..34684e545 100644
--- a/pkg/interface/src/views/apps/publish/components/lib/NoteForm.tsx
+++ b/pkg/interface/src/views/apps/publish/components/lib/NoteForm.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import * as Yup from "yup";
-import { Box, Input } from "@tlon/indigo-react";
+import { Box, ManagedTextInputField as Input } from "@tlon/indigo-react";
 import { AsyncButton } from "../../../../components/AsyncButton";
 import { Formik, Form, FormikHelpers } from "formik";
 import { MarkdownField } from "./MarkdownField";
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 1df6cccd7..8f1b5d077 100644
--- a/pkg/interface/src/views/apps/publish/components/lib/Notebook.tsx
+++ b/pkg/interface/src/views/apps/publish/components/lib/Notebook.tsx
@@ -3,35 +3,18 @@ import { Link, RouteComponentProps, Route, Switch } from "react-router-dom";
 import { NotebookPosts } from "./NotebookPosts";
 import { Subscribers } from "./Subscribers";
 import { Settings } from "./Settings";
-import { Spinner } from '~/views/components/Spinner';
+import { Spinner } from "~/views/components/Spinner";
+import { Tabs, Tab } from "~/views/components/Tab";
 import { roleForShip } from "~/logic/lib/group";
-import {
-  Box,
-  Button,
-  Text,
-  Tab as _Tab,
-  Tabs,
-  TabList as _TabList,
-  TabPanels,
-  TabPanel,
-  Row,
-} from "@tlon/indigo-react";
+import { Box, Button, Text, Row } from "@tlon/indigo-react";
 import { Notebook as INotebook } from "~/types/publish-update";
 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";
+import { Associations } from "~/types";
 import { deSig } from "~/logic/lib/util";
 
-const TabList = styled(_TabList)`
-  margin-bottom: ${(p) => p.theme.space[4]}px;
-`;
-
-const Tab = styled(_Tab)`
-  flex-grow: 1;
-`;
-
 interface NotebookProps {
   api: GlobalApi;
   ship: string;
@@ -48,16 +31,36 @@ interface NotebookState {
   isUnsubscribing: boolean;
 }
 
-export class Notebook extends PureComponent<NotebookProps & RouteComponentProps, NotebookState> {
+export class Notebook extends PureComponent<
+  NotebookProps & RouteComponentProps,
+  NotebookState
+> {
   constructor(props) {
     super(props);
     this.state = {
-      isUnsubscribing: false
+      isUnsubscribing: false,
+      tab: "all",
     };
+    this.setTab = this.setTab.bind(this);
+  }
+
+  setTab(tab) {
+    this.setState({ tab });
   }
 
   render() {
-    const { api, ship, book, notebook, notebookContacts, groups, history, hideNicknames, associations } = this.props;
+    const {
+      api,
+      ship,
+      book,
+      notebook,
+      notebookContacts,
+      groups,
+      history,
+      hideNicknames,
+      associations,
+    } = this.props;
+    const { state } = this;
 
     const group = groups[notebook?.["writers-group-path"]];
     if (!group) return null; // Waitin on groups to populate
@@ -66,14 +69,14 @@ export class Notebook extends PureComponent<NotebookProps & RouteComponentProps,
     const role = group ? roleForShip(group, window.ship) : undefined;
     const isOwn = `~${window.ship}` === ship;
     const isAdmin = role === "admin" || isOwn;
-  
+
     const isWriter =
       isOwn || group.tags?.publish?.[`writers-${book}`]?.has(window.ship);
-  
+
     const notesList = notebook?.["notes-by-date"] || [];
     const notes = notebook?.notes || {};
     const showNickname = contact?.nickname && !hideNicknames;
-  
+
     return (
       <Box
         pt={4}
@@ -104,66 +107,93 @@ export class Notebook extends PureComponent<NotebookProps & RouteComponentProps,
               </Button>
             </Link>
           )}
-          {!isOwn
-            ? this.state.isUnsubscribing
-              ? <Spinner awaiting={this.state.isUnsubscribing} classes="mt2 ml2" text="Unsubscribing..." />
-              : <Button ml={isWriter ? 2 : 0} error border onClick={() => {
-                this.setState({ isUnsubscribing: true });
-                api.publish.unsubscribeNotebook(deSig(ship), book).then(() => {
-                  history.push("/~publish");
-                }).catch(() => {
-                  this.setState({ isUnsubscribing: false });
-                });
-              }}>
+          {!isOwn ? (
+            this.state.isUnsubscribing ? (
+              <Spinner
+                awaiting={this.state.isUnsubscribing}
+                classes="mt2 ml2"
+                text="Unsubscribing..."
+              />
+            ) : (
+              <Button
+                ml={isWriter ? 2 : 0}
+                error
+                border
+                onClick={() => {
+                  this.setState({ isUnsubscribing: true });
+                  api.publish
+                    .unsubscribeNotebook(deSig(ship), book)
+                    .then(() => {
+                      history.push("/~publish");
+                    })
+                    .catch(() => {
+                      this.setState({ isUnsubscribing: false });
+                    });
+                }}
+              >
                 Unsubscribe
               </Button>
-            : null
-          }
+            )
+          ) : null}
         </Row>
         <Box gridColumn={["1/2", "1/3"]}>
           <Tabs>
-            <TabList>
-              <Tab>All Posts</Tab>
-              <Tab>About</Tab>
-              {isAdmin && <Tab>Subscribers</Tab>}
-              {isOwn && <Tab>Settings</Tab>}
-            </TabList>
-            <TabPanels>
-              <TabPanel>
-                <NotebookPosts
-                  notes={notes}
-                  list={notesList}
-                  host={ship}
-                  book={book}
-                  contacts={notebookContacts}
-                  hideNicknames={hideNicknames}
-                />
-              </TabPanel>
-              <TabPanel>
-                <Box color="black">{notebook?.about}</Box>
-              </TabPanel>
-              <TabPanel>
-                <Subscribers
-                  host={ship}
-                  book={book}
-                  notebook={notebook}
-                  api={api}
-                  groups={groups}
-                />
-              </TabPanel>
-              <TabPanel>
-                <Settings
-                  host={ship}
-                  book={book}
-                  api={api}
-                  notebook={notebook}
-                  contacts={notebookContacts}
-                  associations={associations}
-                  groups={groups}
-                />
-              </TabPanel>
-            </TabPanels>
+            <Tab
+              selected={state.tab}
+              setSelected={this.setTab}
+              label="All Posts"
+              id="all"
+            />
+            <Tab
+              selected={state.tab}
+              setSelected={this.setTab}
+              label="About"
+              id="about"
+            />
+            <Tab
+              selected={state.tab}
+              setSelected={this.setTab}
+              label="Subscribers"
+              id="subscribers"
+            />
+            <Tab
+              selected={state.tab}
+              setSelected={this.setTab}
+              label="Settings"
+              id="settings"
+            />
           </Tabs>
+          {state.tab === "all" && (
+            <NotebookPosts
+              notes={notes}
+              list={notesList}
+              host={ship}
+              book={book}
+              contacts={notebookContacts}
+              hideNicknames={hideNicknames}
+            />
+          )}
+          {state.tab === "about" && <Box color="black">{notebook?.about}</Box>}
+          {state.tab === "subscribers" && (
+            <Subscribers
+              host={ship}
+              book={book}
+              notebook={notebook}
+              api={api}
+              groups={groups}
+            />
+          )}
+          {state.tab === "settings" && (
+            <Settings
+              host={ship}
+              book={book}
+              api={api}
+              notebook={notebook}
+              contacts={notebookContacts}
+              associations={associations}
+              groups={groups}
+            />
+          )}
         </Box>
       </Box>
     );
diff --git a/pkg/interface/src/views/apps/publish/components/lib/Sidebar.tsx b/pkg/interface/src/views/apps/publish/components/lib/Sidebar.tsx
index 615b3122d..9add01baa 100644
--- a/pkg/interface/src/views/apps/publish/components/lib/Sidebar.tsx
+++ b/pkg/interface/src/views/apps/publish/components/lib/Sidebar.tsx
@@ -106,7 +106,8 @@ export function Sidebar(props: any) {
       pt={[3, 0]}
       overflowY="auto"
       display={display}
-      maxWidth={["none", "250px"]}
+      flexShrink={0}
+      width={["auto", "250px"]}
     >
       <Box>
         <Link to="/~publish/new" className="green2 pa4 f9 dib">
diff --git a/pkg/interface/src/views/components/AsyncButton.tsx b/pkg/interface/src/views/components/AsyncButton.tsx
index 101336494..679178cd9 100644
--- a/pkg/interface/src/views/components/AsyncButton.tsx
+++ b/pkg/interface/src/views/components/AsyncButton.tsx
@@ -37,7 +37,7 @@ export function AsyncButton({
     <Button border disabled={!isValid} type="submit" {...rest}>
       {isSubmitting ? (
         <LoadingSpinner
-          foreground="white"
+          foreground={rest.primary ? "white" : 'black'}
           background="transparent"
           awaiting
           text={loadingText}
diff --git a/pkg/interface/src/views/components/Tab.tsx b/pkg/interface/src/views/components/Tab.tsx
new file mode 100644
index 000000000..d6ee66e9d
--- /dev/null
+++ b/pkg/interface/src/views/components/Tab.tsx
@@ -0,0 +1,31 @@
+import React from "react";
+import { Box, Text, Row } from "@tlon/indigo-react";
+
+export const Tab = ({ selected, id, label, setSelected }) => (
+  <Box
+    py={2}
+    borderBottom={1}
+    borderBottomColor={selected === id ? "black" : "washedGray"}
+    px={2}
+    flexGrow={1}
+    display="flex"
+    alignItems="center"
+    justifyContent="center"
+    onClick={() => setSelected(id)}
+  >
+    <Text color={selected === id ? "black" : "gray"}>{label}</Text>
+  </Box>
+);
+
+export const Tabs = ({ children, ...rest }: Parameters<typeof Row>[0]) => (
+  <Row
+    bg="white"
+    mb={2}
+    justifyContent="stretch"
+    alignItems="flex-end"
+    {...rest}
+  >
+    {children}
+  </Row>
+);
+

From 9c577e53f3f0f0eb057c0255b0712b64154e0bbb Mon Sep 17 00:00:00 2001
From: Tyler Brown Cifu Shuster <tyler@fivepaths.com>
Date: Tue, 22 Sep 2020 13:47:14 -0700
Subject: [PATCH 09/54] chat: fixes unread marker on blur

---
 .../src/views/apps/chat/components/lib/ChatWindow.tsx | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/pkg/interface/src/views/apps/chat/components/lib/ChatWindow.tsx b/pkg/interface/src/views/apps/chat/components/lib/ChatWindow.tsx
index 27e2a6000..e3b8c829e 100644
--- a/pkg/interface/src/views/apps/chat/components/lib/ChatWindow.tsx
+++ b/pkg/interface/src/views/apps/chat/components/lib/ChatWindow.tsx
@@ -100,6 +100,9 @@ export default class ChatWindow extends Component<ChatWindowProps, ChatWindowSta
 
   handleWindowFocus() {
     this.setState({ idle: false });
+    if (this.virtualList?.window?.scrollTop === 0) {
+      this.dismissUnread();
+    }
   }
 
   initialFetch() {
@@ -121,7 +124,7 @@ export default class ChatWindow extends Component<ChatWindowProps, ChatWindowSta
   }
 
   componentDidUpdate(prevProps: ChatWindowProps, prevState) {
-    const { isChatMissing, history, envelopes, mailboxSize, stationPendingMessages } = this.props;
+    const { isChatMissing, history, envelopes, mailboxSize, stationPendingMessages, unreadCount } = this.props;
 
     if (isChatMissing) {
       history.push("/~chat");
@@ -134,6 +137,12 @@ export default class ChatWindow extends Component<ChatWindowProps, ChatWindowSta
       this.stayLockedIfActive();
     }
 
+    if (unreadCount > prevProps.unreadCount && this.state.idle) {
+      this.setState({
+        lastRead: unreadCount ? mailboxSize - unreadCount : Infinity,
+      });
+    }
+
     if (stationPendingMessages.length !== prevProps.stationPendingMessages.length) {
       this.virtualList?.calculateVisibleItems();
       this.virtualList?.scrollToData(mailboxSize);

From 2a0dc1a3d8d27bc27c74fcf5694af84d8963adaa Mon Sep 17 00:00:00 2001
From: Liam Fitzgerald <liam@urizen.co>
Date: Wed, 23 Sep 2020 11:02:28 +1000
Subject: [PATCH 10/54] Revert "publish: introduce ProseMirror for markdown
 editing"

This reverts commit a3545c5cb34b9e4143e58090ca140613b7b8f4e7.
---
 pkg/interface/package.json                    |  8 ---
 .../publish/components/lib/MarkdownField.tsx  | 51 ++++++++-----------
 .../views/apps/publish/css/ProseMirror.css    | 14 -----
 .../src/views/components/MarkdownEditor.tsx   | 50 ------------------
 4 files changed, 20 insertions(+), 103 deletions(-)
 delete mode 100644 pkg/interface/src/views/apps/publish/css/ProseMirror.css
 delete mode 100644 pkg/interface/src/views/components/MarkdownEditor.tsx

diff --git a/pkg/interface/package.json b/pkg/interface/package.json
index 839a44fec..70afba9d2 100644
--- a/pkg/interface/package.json
+++ b/pkg/interface/package.json
@@ -22,11 +22,6 @@
     "mousetrap-global-bind": "^1.1.0",
     "oembed-parser": "^1.4.1",
     "prop-types": "^15.7.2",
-    "prosemirror": "^0.11.1",
-    "prosemirror-example-setup": "^1.1.2",
-    "prosemirror-markdown": "^1.5.0",
-    "prosemirror-state": "^1.3.3",
-    "prosemirror-view": "^1.15.7",
     "react": "^16.5.2",
     "react-codemirror2": "^6.0.1",
     "react-dnd-html5-backend": "^11.1.3",
@@ -45,7 +40,6 @@
     "suncalc": "^1.8.0",
     "urbit-ob": "^5.0.0",
     "urbit-sigil-js": "^1.3.2",
-    "use-prosemirror": "^1.2.0",
     "yup": "^0.29.3",
     "normalize-wheel": "1.0.1"
   },
@@ -59,8 +53,6 @@
     "@babel/preset-react": "^7.9.4",
     "@babel/preset-typescript": "^7.10.1",
     "@types/lodash": "^4.14.155",
-    "@types/prosemirror-model": "^1.7.2",
-    "@types/prosemirror-view": "^1.15.1",
     "@types/react": "^16.9.38",
     "@types/react-router-dom": "^5.1.5",
     "@types/styled-components": "^5.1.2",
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 c6a7eeef1..cec0f6d5e 100644
--- a/pkg/interface/src/views/apps/publish/components/lib/MarkdownField.tsx
+++ b/pkg/interface/src/views/apps/publish/components/lib/MarkdownField.tsx
@@ -1,38 +1,27 @@
-import React, { useCallback } from "react";
-import styled from "styled-components";
-import { Box, ErrorLabel } from "@tlon/indigo-react";
-import { useField } from "formik";
-import { MarkdownEditor } from "~/views/components/MarkdownEditor";
+import React from 'react';
+import styled from 'styled-components';
+import { MarkdownEditor as _MarkdownEditor, Box, ErrorMessage } from '@tlon/indigo-react';
+import { useField } from 'formik';
 
-export const MarkdownField = ({
-  id,
-  ...rest
-}: { id: string } & Parameters<typeof Box>[0]) => {
-  const [{ value }, { error, touched }, { setValue, setTouched }] = useField(
-    id
-  );
+const MarkdownEditor = styled(_MarkdownEditor)`
+  border: 1px solid ${(p) => p.theme.colors.lightGray};
+  border-radius: ${(p) => p.theme.radii[2]}px;
+`;
 
-  const onChange = useCallback(
-    (s: string) => {
-      setValue(s);
-      setTouched(true);
-    },
-    [setValue, setTouched]
-  );
+export const MarkdownField = ({ id, ...rest }: { id: string; } & Parameters<typeof Box>[0]) => {
+  const [{ value }, { error, touched }, { setValue, setTouched }] = useField(id);
 
   return (
-    <Box
-      border={1}
-      borderRadius={1}
-      borderColor="washedGray"
-      overflowY="hidden"
-      width="100%"
-      display="flex"
-      flexDirection="column"
-      {...rest}
-    >
-      <MarkdownEditor content={value} onChange={onChange} />
-      <ErrorLabel>{touched && error}</ErrorLabel>
+    <Box overflowY="hidden" width="100%" display="flex" flexDirection="column" {...rest}>
+      <MarkdownEditor
+        onFocus={() => setTouched(true)}
+        onBlur={() => setTouched(false)}
+        value={value}
+        onBeforeChange={(e, d, v) => setValue(v)}
+      />
+      <ErrorMessage>{touched && error}</ErrorMessage>
     </Box>
   );
 };
+
+
diff --git a/pkg/interface/src/views/apps/publish/css/ProseMirror.css b/pkg/interface/src/views/apps/publish/css/ProseMirror.css
deleted file mode 100644
index 139a31bd4..000000000
--- a/pkg/interface/src/views/apps/publish/css/ProseMirror.css
+++ /dev/null
@@ -1,14 +0,0 @@
-
-.ProseMirror-menubar {
-  padding: 4px !important;
-  border-bottom: 1px solid rgba(0,0,0,0.1);
-}
-
-.ProseMirror-example-setup-style {
-  padding: 4px !important;
-}
-
-.ProseMirror > *, .ProseMirror-menubar > * {
-  font-family: "Inter", "Inter UI", -apple-system, BlinkMacSystemFont, 'San Francisco', 'Helvetica Neue', Arial, sans-serif;
-}
-
diff --git a/pkg/interface/src/views/components/MarkdownEditor.tsx b/pkg/interface/src/views/components/MarkdownEditor.tsx
deleted file mode 100644
index a49c5c3f5..000000000
--- a/pkg/interface/src/views/components/MarkdownEditor.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import React, { useMemo, useCallback } from "react";
-
-import {
-  schema,
-  defaultMarkdownParser,
-  defaultMarkdownSerializer,
-} from "prosemirror-markdown";
-import { exampleSetup } from "prosemirror-example-setup";
-import "prosemirror-view/style/prosemirror.css";
-import "prosemirror-menu/style/menu.css";
-import { EditorState } from "prosemirror-state";
-import { useProseMirror, ProseMirror } from "use-prosemirror";
-import _ from "lodash";
-import "~/views/apps/publish/css/ProseMirror.css"
-
-interface MarkdownEditorProps {
-  content: string;
-  onChange: (s: string) => void;
-}
-
-export function MarkdownEditor(props: MarkdownEditorProps) {
-  const [state, setState] = useProseMirror({
-    schema,
-    doc: defaultMarkdownParser.parse(props.content),
-    plugins: exampleSetup({ schema, menuBar: true }),
-  });
-
-  const reportChange = _.debounce(
-    useCallback(
-      (doc: any) => {
-        const content = defaultMarkdownSerializer.serialize(doc);
-        props.onChange(content);
-      },
-      [props.onChange]
-    ),
-    500
-  );
-
-  const onChange = useCallback(
-    (state: EditorState) => {
-      reportChange(state.doc);
-      setState(state);
-    },
-    [reportChange, setState]
-  );
-
-  return (
-    <ProseMirror className="h-100 w-100" onChange={onChange} state={state} />
-  );
-}

From 5424730949e66555ebe6f6c1a360fd30a860e691 Mon Sep 17 00:00:00 2001
From: Matilde Park <matilde.park@sunshinegardens.org>
Date: Tue, 22 Sep 2020 22:36:32 -0400
Subject: [PATCH 11/54] leap: destructure selection logic variables

---
 .../src/views/components/leap/Omnibox.js      | 30 ++++++++-----------
 1 file changed, 12 insertions(+), 18 deletions(-)

diff --git a/pkg/interface/src/views/components/leap/Omnibox.js b/pkg/interface/src/views/components/leap/Omnibox.js
index bedbee1dc..5f1323a28 100644
--- a/pkg/interface/src/views/components/leap/Omnibox.js
+++ b/pkg/interface/src/views/components/leap/Omnibox.js
@@ -179,18 +179,15 @@ export class Omnibox extends Component {
         })
       );
       if (currentIndex > 0) {
-        const nextApp = flattenedResults[currentIndex - 1].app;
-        const nextLink = flattenedResults[currentIndex - 1].link;
-        this.setState({ selected: [nextApp, nextLink] });
+        const { app, link } = flattenedResults[currentIndex - 1];
+        this.setState({ selected: [app, link] });
       } else {
-        const nextApp = flattenedResults[totalLength - 1].app;
-        const nextLink = flattenedResults[totalLength - 1].link;
-        this.setState({ selected: [nextApp, nextLink] });
+        const { app, link } = flattenedResults[totalLength - 1];
+        this.setState({ selected: [app, link] });
       }
     } else {
-      const nextApp = flattenedResults[totalLength - 1].app;
-      const nextLink = flattenedResults[totalLength - 1].link;
-      this.setState({ selected: [nextApp, nextLink] });
+      const { app, link } = flattenedResults[totalLength - 1];
+      this.setState({ selected: [app, link] });
     }
   }
 
@@ -204,18 +201,15 @@ export class Omnibox extends Component {
         })
       );
       if (currentIndex < flattenedResults.length - 1) {
-      const nextApp = flattenedResults[currentIndex + 1].app;
-      const nextLink = flattenedResults[currentIndex + 1].link;
-      this.setState({ selected: [nextApp, nextLink] });
+        const { app, link } = flattenedResults[currentIndex + 1];
+        this.setState({ selected: [app, link] });
       } else {
-      const nextApp = flattenedResults[0].app;
-      const nextLink = flattenedResults[0].link;
-      this.setState({ selected: [nextApp, nextLink] });
+        const { app, link } = flattenedResults[0];
+        this.setState({ selected: [app, link] });
       }
     } else {
-      const nextApp = flattenedResults[0].app;
-      const nextLink = flattenedResults[0].link;
-      this.setState({ selected: [nextApp, nextLink] });
+      const { app, link } = flattenedResults[0];
+      this.setState({ selected: [app, link] });
     }
   }
 

From 30ee75413d97b6e8b9e314e6b7df0d107b6ed1e9 Mon Sep 17 00:00:00 2001
From: Liam Fitzgerald <liam@urizen.co>
Date: Wed, 23 Sep 2020 13:12:35 +1000
Subject: [PATCH 12/54] publish: use CodeMirror as editor

---
 pkg/interface/package.json                    |  2 +-
 pkg/interface/src/types/util.ts               |  2 +
 .../publish/components/lib/MarkdownEditor.tsx | 73 +++++++++++++++++++
 .../publish/components/lib/MarkdownField.tsx  | 50 ++++++++-----
 .../apps/publish/components/lib/NoteForm.tsx  |  1 +
 .../apps/publish/components/lib/Notebook.tsx  | 44 ++++++-----
 .../publish/components/lib/NotebookPosts.tsx  |  2 +-
 .../apps/publish/components/lib/Settings.tsx  |  7 +-
 .../publish/components/lib/Subscribers.tsx    |  2 +-
 .../src/views/apps/publish/css/custom.css     |  3 +-
 10 files changed, 143 insertions(+), 43 deletions(-)
 create mode 100644 pkg/interface/src/types/util.ts
 create mode 100644 pkg/interface/src/views/apps/publish/components/lib/MarkdownEditor.tsx

diff --git a/pkg/interface/package.json b/pkg/interface/package.json
index 70afba9d2..35af09a9e 100644
--- a/pkg/interface/package.json
+++ b/pkg/interface/package.json
@@ -9,7 +9,7 @@
     "@reach/menu-button": "^0.10.5",
     "@reach/tabs": "^0.10.5",
     "@tlon/indigo-light": "^1.0.3",
-    "@tlon/indigo-react": "github:liam-fitzgerald/indigo-react#lf/1.2.5",
+    "@tlon/indigo-react": "1.2.5",
     "aws-sdk": "^2.726.0",
     "classnames": "^2.2.6",
     "codemirror": "^5.55.0",
diff --git a/pkg/interface/src/types/util.ts b/pkg/interface/src/types/util.ts
new file mode 100644
index 000000000..c2e281d81
--- /dev/null
+++ b/pkg/interface/src/types/util.ts
@@ -0,0 +1,2 @@
+
+export type PropFunc<T extends (...args: any[]) => any> = Parameters<T>[0];
diff --git a/pkg/interface/src/views/apps/publish/components/lib/MarkdownEditor.tsx b/pkg/interface/src/views/apps/publish/components/lib/MarkdownEditor.tsx
new file mode 100644
index 000000000..a269fd7ce
--- /dev/null
+++ b/pkg/interface/src/views/apps/publish/components/lib/MarkdownEditor.tsx
@@ -0,0 +1,73 @@
+import React, { useCallback } from "react";
+
+import { UnControlled as CodeEditor } from "react-codemirror2";
+import { MOBILE_BROWSER_REGEX } from "~/logic/lib/util";
+import { PropFunc } from "~/types/util";
+import CodeMirror from "codemirror";
+
+import "codemirror/mode/markdown/markdown";
+import "codemirror/addon/display/placeholder";
+
+import "codemirror/lib/codemirror.css";
+import { Box } from "@tlon/indigo-react";
+
+const MARKDOWN_CONFIG = {
+  name: "markdown",
+};
+
+interface MarkdownEditorProps {
+  placeholder?: string;
+  value: string;
+  onChange: (s: string) => void;
+  onBlur?: (e: any) => void;
+}
+
+export function MarkdownEditor(
+  props: MarkdownEditorProps & PropFunc<typeof Box>
+) {
+  const { onBlur, placeholder, value, onChange, ...boxProps } = props;
+
+  const options = {
+    mode: MARKDOWN_CONFIG,
+    theme: "tlon",
+    lineNumbers: false,
+    lineWrapping: true,
+    scrollbarStyle: "native",
+    // cursorHeight: 0.85,
+    placeholder: placeholder || "",
+  };
+
+  const handleChange = useCallback(
+    (_e, _d, v: string) => {
+      onChange(v);
+    },
+    [onChange]
+  );
+
+  const handleBlur = useCallback(
+    (_i, e: any) => {
+      onBlur && onBlur(e);
+    },
+    [onBlur]
+  );
+
+  return (
+    <Box
+      flexGrow={1}
+      position="static"
+      className="publish"
+      p={1}
+      border={1}
+      borderColor="lightGray"
+      borderRadius={2}
+      {...boxProps}
+    >
+      <CodeEditor
+        onBlur={onBlur}
+        value={value}
+        options={options}
+        onChange={handleChange}
+      />
+    </Box>
+  );
+}
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 cec0f6d5e..67e15c4f3 100644
--- a/pkg/interface/src/views/apps/publish/components/lib/MarkdownField.tsx
+++ b/pkg/interface/src/views/apps/publish/components/lib/MarkdownField.tsx
@@ -1,27 +1,43 @@
-import React from 'react';
-import styled from 'styled-components';
-import { MarkdownEditor as _MarkdownEditor, Box, ErrorMessage } from '@tlon/indigo-react';
-import { useField } from 'formik';
+import React, { useCallback } from "react";
+import _ from "lodash";
+import { Box, ErrorLabel } from "@tlon/indigo-react";
+import { useField } from "formik";
+import { MarkdownEditor } from "./MarkdownEditor";
 
-const MarkdownEditor = styled(_MarkdownEditor)`
-  border: 1px solid ${(p) => p.theme.colors.lightGray};
-  border-radius: ${(p) => p.theme.radii[2]}px;
-`;
+export const MarkdownField = ({
+  id,
+  ...rest
+}: { id: string } & Parameters<typeof Box>[0]) => {
+  const [{ value, onBlur }, { error, touched }, { setValue }] = useField(id);
 
-export const MarkdownField = ({ id, ...rest }: { id: string; } & Parameters<typeof Box>[0]) => {
-  const [{ value }, { error, touched }, { setValue, setTouched }] = useField(id);
+  const handleBlur = useCallback(
+    (e: any) => {
+      _.set(e, "target.id", id);
+      console.log(e);
+      onBlur && onBlur(e);
+    },
+    [onBlur, id]
+  );
+
+  const hasError = !!(error && touched);
 
   return (
-    <Box overflowY="hidden" width="100%" display="flex" flexDirection="column" {...rest}>
+    <Box
+      overflowY="hidden"
+      width="100%"
+      display="flex"
+      flexDirection="column"
+      {...rest}
+    >
       <MarkdownEditor
-        onFocus={() => setTouched(true)}
-        onBlur={() => setTouched(false)}
+        borderColor={hasError ? "red" : "lightGray"}
+        onBlur={handleBlur}
         value={value}
-        onBeforeChange={(e, d, v) => setValue(v)}
+        onChange={setValue}
       />
-      <ErrorMessage>{touched && error}</ErrorMessage>
+      <ErrorLabel mt="2" hasError={!!(error && touched)}>
+        {error}
+      </ErrorLabel>
     </Box>
   );
 };
-
-
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 34684e545..d1fa3d9ac 100644
--- a/pkg/interface/src/views/apps/publish/components/lib/NoteForm.tsx
+++ b/pkg/interface/src/views/apps/publish/components/lib/NoteForm.tsx
@@ -44,6 +44,7 @@ export function PostForm(props: PostFormProps) {
         validationSchema={formSchema}
         initialValues={initial}
         onSubmit={onSubmit}
+        validateOnBlur
       >
         <Form style={{ display: "contents" }}>
           <Input width="100%" placeholder="Post Title" id="title" />
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 8f1b5d077..dec39b972 100644
--- a/pkg/interface/src/views/apps/publish/components/lib/Notebook.tsx
+++ b/pkg/interface/src/views/apps/publish/components/lib/Notebook.tsx
@@ -29,6 +29,7 @@ interface NotebookProps {
 
 interface NotebookState {
   isUnsubscribing: boolean;
+  tab: string;
 }
 
 export class Notebook extends PureComponent<
@@ -44,7 +45,7 @@ export class Notebook extends PureComponent<
     this.setTab = this.setTab.bind(this);
   }
 
-  setTab(tab) {
+  setTab(tab: string) {
     this.setState({ tab });
   }
 
@@ -102,9 +103,7 @@ export class Notebook extends PureComponent<
         <Row justifyContent={["flex-start", "flex-end"]}>
           {isWriter && (
             <Link to={`/~publish/notebook/${ship}/${book}/new`}>
-              <Button primary border>
-                New Post
-              </Button>
+              <Button primary>New Post</Button>
             </Link>
           )}
           {!isOwn ? (
@@ -117,8 +116,7 @@ export class Notebook extends PureComponent<
             ) : (
               <Button
                 ml={isWriter ? 2 : 0}
-                error
-                border
+                destructive
                 onClick={() => {
                   this.setState({ isUnsubscribing: true });
                   api.publish
@@ -150,18 +148,22 @@ export class Notebook extends PureComponent<
               label="About"
               id="about"
             />
-            <Tab
-              selected={state.tab}
-              setSelected={this.setTab}
-              label="Subscribers"
-              id="subscribers"
-            />
-            <Tab
-              selected={state.tab}
-              setSelected={this.setTab}
-              label="Settings"
-              id="settings"
-            />
+            {isAdmin && (
+              <>
+                <Tab
+                  selected={state.tab}
+                  setSelected={this.setTab}
+                  label="Subscribers"
+                  id="subscribers"
+                />
+                <Tab
+                  selected={state.tab}
+                  setSelected={this.setTab}
+                  label="Settings"
+                  id="settings"
+                />
+              </>
+            )}
           </Tabs>
           {state.tab === "all" && (
             <NotebookPosts
@@ -173,7 +175,11 @@ export class Notebook extends PureComponent<
               hideNicknames={hideNicknames}
             />
           )}
-          {state.tab === "about" && <Box color="black">{notebook?.about}</Box>}
+          {state.tab === "about" && (
+            <Box mt="3" color="black">
+              {notebook?.about}
+            </Box>
+          )}
           {state.tab === "subscribers" && (
             <Subscribers
               host={ship}
diff --git a/pkg/interface/src/views/apps/publish/components/lib/NotebookPosts.tsx b/pkg/interface/src/views/apps/publish/components/lib/NotebookPosts.tsx
index 26e388b06..82835370c 100644
--- a/pkg/interface/src/views/apps/publish/components/lib/NotebookPosts.tsx
+++ b/pkg/interface/src/views/apps/publish/components/lib/NotebookPosts.tsx
@@ -15,7 +15,7 @@ interface NotebookPostsProps {
 
 export function NotebookPosts(props: NotebookPostsProps) {
   return (
-    <Col>
+    <Col mt="3">
       {props.list.map((noteId: NoteId) => {
         const note = props.notes[noteId];
         if (!note) {
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 f9e7a9084..5737f8e3f 100644
--- a/pkg/interface/src/views/apps/publish/components/lib/Settings.tsx
+++ b/pkg/interface/src/views/apps/publish/components/lib/Settings.tsx
@@ -20,7 +20,7 @@ interface SettingsProps {
 }
 
 const Divider = (props) => (
-  <Box {...props} mb={4} borderBottom={1} borderBottomColor="lightGray" />
+  <Box {...props} borderBottom={1} borderBottomColor="lightGray" />
 );
 export function Settings(props: SettingsProps) {
   const history = useHistory();
@@ -36,10 +36,11 @@ export function Settings(props: SettingsProps) {
     <Box
       mx="auto"
       maxWidth="300px"
-      mb={4}
+      my={4}
       gridTemplateColumns="1fr"
       gridAutoRows="auto"
       display="grid"
+      gridRowGap={5}
     >
       {isUnmanaged && (
         <>
@@ -55,7 +56,7 @@ export function Settings(props: SettingsProps) {
           Permanently delete this notebook. (All current members will no longer
           see this notebook.)
         </Label>
-        <Button onClick={onDelete} mt={1} border error>
+        <Button mt="2" onClick={onDelete} destructive>
           Delete this notebook
         </Button>
       </Col>
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 069e851f3..db986541f 100644
--- a/pkg/interface/src/views/apps/publish/components/lib/Subscribers.tsx
+++ b/pkg/interface/src/views/apps/publish/components/lib/Subscribers.tsx
@@ -80,7 +80,7 @@ export class Subscribers extends Component<SubscribersProps> {
     const role = roleForShip(group, window.ship)
 
     return (
-      <Box>
+      <Box mt="3">
         { role === 'admin' && (
           <Button mb={3} border onClick={this.addAll}>
             Add all members as writers
diff --git a/pkg/interface/src/views/apps/publish/css/custom.css b/pkg/interface/src/views/apps/publish/css/custom.css
index fdab6d043..4f81edb24 100644
--- a/pkg/interface/src/views/apps/publish/css/custom.css
+++ b/pkg/interface/src/views/apps/publish/css/custom.css
@@ -65,12 +65,13 @@
 
 .publish .react-codemirror2 {
   width: 100%;
+  height: 100%;
 }
 
 .publish .CodeMirror {
   padding: 12px;
   height: 100% !important;
-  max-width: 700px;
+  overflow-y: hidden;
   width: 100% !important;
   cursor: text;
   font-size: 12px;

From 1f95c40a24093807116bf4fa2156ba61125b1a2f Mon Sep 17 00:00:00 2001
From: Liam Fitzgerald <liam@urizen.co>
Date: Wed, 23 Sep 2020 13:13:10 +1000
Subject: [PATCH 13/54] profile: fix form breakage caused by 1.2 migration

---
 pkg/interface/package-lock.json               | 255 +-----------------
 .../groups/components/lib/ContactCard.tsx     |  68 ++---
 .../components/lib/BackgroundPicker.tsx       |  56 ++--
 .../profile/components/lib/BucketList.tsx     |  88 +++---
 .../profile/components/lib/DisplayForm.tsx    |  43 ++-
 .../apps/profile/components/lib/DragTile.tsx  |   2 +-
 .../profile/components/lib/RemoteContent.tsx  |  52 ++--
 .../apps/profile/components/lib/S3Form.tsx    |  34 ++-
 .../src/views/apps/profile/profile.tsx        |   2 +-
 .../src/views/components/ColorInput.tsx       |  58 ++--
 .../src/views/components/ImageInput.tsx       |  76 ++++--
 11 files changed, 255 insertions(+), 479 deletions(-)

diff --git a/pkg/interface/package-lock.json b/pkg/interface/package-lock.json
index 32cbe70b9..1df355ea0 100644
--- a/pkg/interface/package-lock.json
+++ b/pkg/interface/package-lock.json
@@ -1709,11 +1709,11 @@
       "integrity": "sha512-3OPSdf9cejP/TSzWXuBaYbzLtAfBzQnc75SlPLkoPfwpxnv1Bvy9hiWngLY0WnKRR6lMOldnkYQCCuNWeDibYQ=="
     },
     "@tlon/indigo-react": {
-      "version": "github:liam-fitzgerald/indigo-react#36fe20029c6005b39581b05c2987cd7c6d606056",
-      "from": "github:liam-fitzgerald/indigo-react#lf/1.2.5",
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/@tlon/indigo-react/-/indigo-react-1.2.5.tgz",
+      "integrity": "sha512-NOQTwH74l/XXMIfQ4ZzymvZuk1WK1nmO552TmXrQxBUSb7HmdlA8anG5oRrvnLJTkajLCY59McLkDca+lCcvwg==",
       "requires": {
         "@reach/menu-button": "^0.10.5",
-        "formik": "^2.1.5",
         "react": "^16.13.1",
         "tslib": "^2.0.1"
       },
@@ -1806,58 +1806,12 @@
       "integrity": "sha512-x26ur3dSXgv5AwKS0lNfbjpCakGIduWU1DU91Zz58ONRWrIKGunmZBNv4P7N+e27sJkiGDsw/3fT4AtsqQBrBA==",
       "dev": true
     },
-    "@types/orderedmap": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/@types/orderedmap/-/orderedmap-1.0.0.tgz",
-      "integrity": "sha512-dxKo80TqYx3YtBipHwA/SdFmMMyLCnP+5mkEqN0eMjcTBzHkiiX0ES118DsjDBjvD+zeSsSU9jULTZ+frog+Gw==",
-      "dev": true
-    },
     "@types/prop-types": {
       "version": "15.7.3",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.3.tgz",
       "integrity": "sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw==",
       "dev": true
     },
-    "@types/prosemirror-model": {
-      "version": "1.7.2",
-      "resolved": "https://registry.npmjs.org/@types/prosemirror-model/-/prosemirror-model-1.7.2.tgz",
-      "integrity": "sha512-2l+yXvidg3AUHN07mO4Jd8Q84fo6ksFsy7LHUurLYrZ74uTahBp2fzcO49AKZMzww2EulXJ40Kl/OFaQ/7A1fw==",
-      "dev": true,
-      "requires": {
-        "@types/orderedmap": "*"
-      }
-    },
-    "@types/prosemirror-state": {
-      "version": "1.2.5",
-      "resolved": "https://registry.npmjs.org/@types/prosemirror-state/-/prosemirror-state-1.2.5.tgz",
-      "integrity": "sha512-a5DxAifiF6vmdSJ5jsDMkpykUgUJUy+T5Q5hCjFOKJ4cfd3m3q1lsFKr7Bc4r91Qb7rfqyiKCMDnASS8LIHrKw==",
-      "dev": true,
-      "requires": {
-        "@types/prosemirror-model": "*",
-        "@types/prosemirror-transform": "*",
-        "@types/prosemirror-view": "*"
-      }
-    },
-    "@types/prosemirror-transform": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/@types/prosemirror-transform/-/prosemirror-transform-1.1.1.tgz",
-      "integrity": "sha512-yYCYSoiRH+Wcbl8GJc0PFCzeyMzNQ1vL2xrHHSXZuNcIlH75VoiKrZFeZ6BS9cl8mYXjZrlmdBe8YOxYvyKM6A==",
-      "dev": true,
-      "requires": {
-        "@types/prosemirror-model": "*"
-      }
-    },
-    "@types/prosemirror-view": {
-      "version": "1.15.1",
-      "resolved": "https://registry.npmjs.org/@types/prosemirror-view/-/prosemirror-view-1.15.1.tgz",
-      "integrity": "sha512-ZdgIqDLWiO4wW4DhK8OjEVam3/DhBcggQeZ6zLts+UCflAZPnEk5dzRqFBVEyrvWqSAGLuPAoOgGAPjj/XwR8w==",
-      "dev": true,
-      "requires": {
-        "@types/prosemirror-model": "*",
-        "@types/prosemirror-state": "*",
-        "@types/prosemirror-transform": "*"
-      }
-    },
     "@types/react": {
       "version": "16.9.38",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-16.9.38.tgz",
@@ -2367,6 +2321,7 @@
       "version": "1.0.10",
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
       "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==",
+      "dev": true,
       "requires": {
         "sprintf-js": "~1.0.2"
       }
@@ -3610,11 +3565,6 @@
         "sha.js": "^2.4.8"
       }
     },
-    "crelt": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/crelt/-/crelt-1.0.4.tgz",
-      "integrity": "sha512-l1cwMUOssGLEj5zgbut4lxJq95ZabOXVZnDybNqQRUtXh1lvUK7e7kJNm8SfvTQzYpE3AVJhIVUJKf382lMA7A=="
-    },
     "cross-env": {
       "version": "7.0.2",
       "resolved": "https://registry.npmjs.org/cross-env/-/cross-env-7.0.2.tgz",
@@ -6270,14 +6220,6 @@
         "type-check": "~0.3.2"
       }
     },
-    "linkify-it": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-2.2.0.tgz",
-      "integrity": "sha512-GnAl/knGn+i1U/wjBz3akz2stz+HrHLsxMwHQGofCDfPvlf+gDKN58UtfmUquTY4/MXeE2x7k19KQmeoZi94Iw==",
-      "requires": {
-        "uc.micro": "^1.0.1"
-      }
-    },
     "loader-runner": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-2.4.0.tgz",
@@ -6408,18 +6350,6 @@
       "resolved": "https://registry.npmjs.org/markdown-escapes/-/markdown-escapes-1.0.4.tgz",
       "integrity": "sha512-8z4efJYk43E0upd0NbVXwgSTQs6cT3T06etieCMEg7dRbzCbxUCK/GHlX8mhHRDcp+OLlHkPKsvqQTCvsRl2cg=="
     },
-    "markdown-it": {
-      "version": "10.0.0",
-      "resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-10.0.0.tgz",
-      "integrity": "sha512-YWOP1j7UbDNz+TumYP1kpwnP0aEa711cJjrAQrzd0UXlbJfc5aAq0F/PZHjiioqDC1NKgvIMX+o+9Bk7yuM2dg==",
-      "requires": {
-        "argparse": "^1.0.7",
-        "entities": "~2.0.0",
-        "linkify-it": "^2.0.0",
-        "mdurl": "^1.0.1",
-        "uc.micro": "^1.0.5"
-      }
-    },
     "markdown-to-jsx": {
       "version": "6.11.4",
       "resolved": "https://registry.npmjs.org/markdown-to-jsx/-/markdown-to-jsx-6.11.4.tgz",
@@ -6448,11 +6378,6 @@
         "unist-util-visit-parents": "1.1.2"
       }
     },
-    "mdurl": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/mdurl/-/mdurl-1.0.1.tgz",
-      "integrity": "sha1-/oWy7HWlkDfyrf7BAP1sYBdhFS4="
-    },
     "media-typer": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
@@ -7223,11 +7148,6 @@
         "word-wrap": "~1.2.3"
       }
     },
-    "orderedmap": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/orderedmap/-/orderedmap-1.1.1.tgz",
-      "integrity": "sha512-3Ux8um0zXbVacKUkcytc0u3HgC0b0bBLT+I60r2J/En72cI0nZffqrA7Xtf2Hqs27j1g82llR5Mhbd0Z1XW4AQ=="
-    },
     "original": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/original/-/original-1.0.2.tgz",
@@ -7744,150 +7664,6 @@
       "resolved": "https://registry.npmjs.org/property-expr/-/property-expr-2.0.3.tgz",
       "integrity": "sha512-TEMKBo6s4gZUKmNYwaMkS2JdDxdWgUijW/U/jLAOHVyLZfU1KHXv+mC1J9gkfGOr8532XHqMJytko1lSjc0kmw=="
     },
-    "prosemirror": {
-      "version": "0.11.1",
-      "resolved": "https://registry.npmjs.org/prosemirror/-/prosemirror-0.11.1.tgz",
-      "integrity": "sha512-IZ35mmexuo3DNkMXs2A3bAm1jdlAJRVPor/bX1AWT+TdAR9fv6igUjRUFtQDCRUKwxH7ufwL1p6Um/MdgcbVIw=="
-    },
-    "prosemirror-commands": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/prosemirror-commands/-/prosemirror-commands-1.1.4.tgz",
-      "integrity": "sha512-kj4Qi+8h3EpJtZuuEDwZ9h2/QNGWDsIX/CzjmClxi9GhxWyBUMVUvIFk0mgdqHyX20lLeGmOpc0TLA5aPzgpWg==",
-      "requires": {
-        "prosemirror-model": "^1.0.0",
-        "prosemirror-state": "^1.0.0",
-        "prosemirror-transform": "^1.0.0"
-      }
-    },
-    "prosemirror-dropcursor": {
-      "version": "1.3.2",
-      "resolved": "https://registry.npmjs.org/prosemirror-dropcursor/-/prosemirror-dropcursor-1.3.2.tgz",
-      "integrity": "sha512-4c94OUGyobGnwcQI70OXyMhE/9T4aTgjU+CHxkd5c7D+jH/J0mKM/lk+jneFVKt7+E4/M0D9HzRPifu8U28Thw==",
-      "requires": {
-        "prosemirror-state": "^1.0.0",
-        "prosemirror-transform": "^1.1.0",
-        "prosemirror-view": "^1.1.0"
-      }
-    },
-    "prosemirror-example-setup": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/prosemirror-example-setup/-/prosemirror-example-setup-1.1.2.tgz",
-      "integrity": "sha512-MTpIMyqk08jFnzxeRMCinCEMtVSTUtxKgQBGxfCbVe9C6zIOqp9qZZJz5Ojaad1GETySyuj8+OIHHvQsIaaaGQ==",
-      "requires": {
-        "prosemirror-commands": "^1.0.0",
-        "prosemirror-dropcursor": "^1.0.0",
-        "prosemirror-gapcursor": "^1.0.0",
-        "prosemirror-history": "^1.0.0",
-        "prosemirror-inputrules": "^1.0.0",
-        "prosemirror-keymap": "^1.0.0",
-        "prosemirror-menu": "^1.0.0",
-        "prosemirror-schema-list": "^1.0.0",
-        "prosemirror-state": "^1.0.0"
-      }
-    },
-    "prosemirror-gapcursor": {
-      "version": "1.1.5",
-      "resolved": "https://registry.npmjs.org/prosemirror-gapcursor/-/prosemirror-gapcursor-1.1.5.tgz",
-      "integrity": "sha512-SjbUZq5pgsBDuV3hu8GqgIpZR5eZvGLM+gPQTqjVVYSMUCfKW3EGXTEYaLHEl1bGduwqNC95O3bZflgtAb4L6w==",
-      "requires": {
-        "prosemirror-keymap": "^1.0.0",
-        "prosemirror-model": "^1.0.0",
-        "prosemirror-state": "^1.0.0",
-        "prosemirror-view": "^1.0.0"
-      }
-    },
-    "prosemirror-history": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/prosemirror-history/-/prosemirror-history-1.1.3.tgz",
-      "integrity": "sha512-zGDotijea+vnfnyyUGyiy1wfOQhf0B/b6zYcCouBV8yo6JmrE9X23M5q7Nf/nATywEZbgRLG70R4DmfSTC+gfg==",
-      "requires": {
-        "prosemirror-state": "^1.2.2",
-        "prosemirror-transform": "^1.0.0",
-        "rope-sequence": "^1.3.0"
-      }
-    },
-    "prosemirror-inputrules": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/prosemirror-inputrules/-/prosemirror-inputrules-1.1.3.tgz",
-      "integrity": "sha512-ZaHCLyBtvbyIHv0f5p6boQTIJjlD6o2NPZiEaZWT2DA+j591zS29QQEMT4lBqwcLW3qRSf7ZvoKNbf05YrsStw==",
-      "requires": {
-        "prosemirror-state": "^1.0.0",
-        "prosemirror-transform": "^1.0.0"
-      }
-    },
-    "prosemirror-keymap": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/prosemirror-keymap/-/prosemirror-keymap-1.1.4.tgz",
-      "integrity": "sha512-Al8cVUOnDFL4gcI5IDlG6xbZ0aOD/i3B17VT+1JbHWDguCgt/lBHVTHUBcKvvbSg6+q/W4Nj1Fu6bwZSca3xjg==",
-      "requires": {
-        "prosemirror-state": "^1.0.0",
-        "w3c-keyname": "^2.2.0"
-      }
-    },
-    "prosemirror-markdown": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/prosemirror-markdown/-/prosemirror-markdown-1.5.0.tgz",
-      "integrity": "sha512-ugTyZfTu1l2E3EI6+DwD917mz2Sk5E4R01Nh67yMffGg4S9ZetC81g1VIKGCaak4jnoP4BMUIOUJyXAS6xFLaA==",
-      "requires": {
-        "markdown-it": "^10.0.0",
-        "prosemirror-model": "^1.0.0"
-      }
-    },
-    "prosemirror-menu": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/prosemirror-menu/-/prosemirror-menu-1.1.4.tgz",
-      "integrity": "sha512-2ROsji/X9ciDnVSRvSTqFygI34GEdHfQSsK4zBKjPxSEroeiHHcdRMS1ofNIf2zM0Vpp5/YqfpxynElymQkqzg==",
-      "requires": {
-        "crelt": "^1.0.0",
-        "prosemirror-commands": "^1.0.0",
-        "prosemirror-history": "^1.0.0",
-        "prosemirror-state": "^1.0.0"
-      }
-    },
-    "prosemirror-model": {
-      "version": "1.11.2",
-      "resolved": "https://registry.npmjs.org/prosemirror-model/-/prosemirror-model-1.11.2.tgz",
-      "integrity": "sha512-+gM+x1VUfGAyKR/g0bK7FC46fVNq0xVVL859QAQ7my2p5HzKrPps/pSbYn7T50XTG2r2IhZJChsUFUBHtcoN0Q==",
-      "requires": {
-        "orderedmap": "^1.1.0"
-      }
-    },
-    "prosemirror-schema-list": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/prosemirror-schema-list/-/prosemirror-schema-list-1.1.4.tgz",
-      "integrity": "sha512-pNTuZflacFOBlxrTcWSdWhjoB8BaucwfJVp/gJNxztOwaN3wQiC65axclXyplf6TKgXD/EkWfS/QAov3/Znadw==",
-      "requires": {
-        "prosemirror-model": "^1.0.0",
-        "prosemirror-transform": "^1.0.0"
-      }
-    },
-    "prosemirror-state": {
-      "version": "1.3.3",
-      "resolved": "https://registry.npmjs.org/prosemirror-state/-/prosemirror-state-1.3.3.tgz",
-      "integrity": "sha512-PLXh2VJsIgvlgSTH6I2Yg6vk1CzPDp21DFreVpQtDMY2S6WaMmrQgDTLRcsrD8X38v8Yc873H7+ogdGzyIPn+w==",
-      "requires": {
-        "prosemirror-model": "^1.0.0",
-        "prosemirror-transform": "^1.0.0"
-      }
-    },
-    "prosemirror-transform": {
-      "version": "1.2.8",
-      "resolved": "https://registry.npmjs.org/prosemirror-transform/-/prosemirror-transform-1.2.8.tgz",
-      "integrity": "sha512-hKqceqv9ZmMQXNQkhFjr0KFGPvkhygaWND+uIM0GxRpALrKfxP97SsgHTBs3OpJhDmh5N+mB4D/CksB291Eavg==",
-      "requires": {
-        "prosemirror-model": "^1.0.0"
-      }
-    },
-    "prosemirror-view": {
-      "version": "1.15.7",
-      "resolved": "https://registry.npmjs.org/prosemirror-view/-/prosemirror-view-1.15.7.tgz",
-      "integrity": "sha512-fSSXphXg+82qb4xNsHT0mX6ro0Wu1/l+WIFO5jYfyjd42r6ZWSg0gFItLgqOVPxoKQOlrPJUhrozTxiqx0EXOg==",
-      "requires": {
-        "prosemirror-model": "^1.1.0",
-        "prosemirror-state": "^1.0.0",
-        "prosemirror-transform": "^1.1.0"
-      }
-    },
     "proxy-addr": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.6.tgz",
@@ -8629,11 +8405,6 @@
         "inherits": "^2.0.1"
       }
     },
-    "rope-sequence": {
-      "version": "1.3.2",
-      "resolved": "https://registry.npmjs.org/rope-sequence/-/rope-sequence-1.3.2.tgz",
-      "integrity": "sha512-ku6MFrwEVSVmXLvy3dYph3LAMNS0890K7fabn+0YIRQ2T96T9F4gkFf0vf0WW0JUraNWwGRtInEpH7yO4tbQZg=="
-    },
     "run-async": {
       "version": "2.4.1",
       "resolved": "https://registry.npmjs.org/run-async/-/run-async-2.4.1.tgz",
@@ -9239,7 +9010,8 @@
     "sprintf-js": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
-      "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw="
+      "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=",
+      "dev": true
     },
     "ssri": {
       "version": "6.0.1",
@@ -9932,11 +9704,6 @@
       "integrity": "sha512-BLbiRkiBzAwsjut4x/dsibSTB6yWpwT5qWmC2OfuCg3GgVQCSgMs4vEctYPhsaGtd0AeuuHMkjZ2h2WG8MSzRw==",
       "dev": true
     },
-    "uc.micro": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-1.0.6.tgz",
-      "integrity": "sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA=="
-    },
     "unherit": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/unherit/-/unherit-1.1.3.tgz",
@@ -10158,11 +9925,6 @@
       "integrity": "sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ==",
       "dev": true
     },
-    "use-prosemirror": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/use-prosemirror/-/use-prosemirror-1.2.0.tgz",
-      "integrity": "sha512-qRq5xNdgNQKBFBOKlhGmpKd0yJoktmkiUPkD+SmS+BX9are1S/Emg4qf8vk/Npk32ECIgKxmbicd4xUzQFhNoQ=="
-    },
     "util": {
       "version": "0.11.1",
       "resolved": "https://registry.npmjs.org/util/-/util-0.11.1.tgz",
@@ -10261,11 +10023,6 @@
       "integrity": "sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ==",
       "dev": true
     },
-    "w3c-keyname": {
-      "version": "2.2.4",
-      "resolved": "https://registry.npmjs.org/w3c-keyname/-/w3c-keyname-2.2.4.tgz",
-      "integrity": "sha512-tOhfEwEzFLJzf6d1ZPkYfGj+FWhIpBux9ppoP3rlclw3Z0BZv3N7b7030Z1kYth+6rDuAsXUFr+d0VE6Ed1ikw=="
-    },
     "warning": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
diff --git a/pkg/interface/src/views/apps/groups/components/lib/ContactCard.tsx b/pkg/interface/src/views/apps/groups/components/lib/ContactCard.tsx
index 8059b417f..e331b4829 100644
--- a/pkg/interface/src/views/apps/groups/components/lib/ContactCard.tsx
+++ b/pkg/interface/src/views/apps/groups/components/lib/ContactCard.tsx
@@ -1,13 +1,17 @@
-import React, { Component } from "react";
+import React from "react";
 import { Sigil } from "~/logic/lib/sigil";
 import * as Yup from "yup";
 
-import { Link } from "react-router-dom";
-import { EditElement } from "./edit-element";
-import { Spinner } from "~/views/components/Spinner";
 import { uxToHex } from "~/logic/lib/util";
-import { Col, ManagedTextInputField as Input, Box, Text, Row } from "@tlon/indigo-react";
-import { Formik, Form, FormikHelpers } from "formik";
+import {
+  ManagedForm as Form,
+  Col,
+  ManagedTextInputField as Input,
+  Box,
+  Text,
+  Row,
+} from "@tlon/indigo-react";
+import { Formik, FormikHelpers } from "formik";
 import { Contact } from "~/types/contact-update";
 import { AsyncButton } from "~/views/components/AsyncButton";
 import { ColorInput } from "~/views/components/ColorInput";
@@ -93,30 +97,34 @@ export function ContactCard(props: ContactCardProps) {
         initialValues={contact}
         onSubmit={onSubmit}
       >
-        <Form>
-          <Col>
-            <Row
-              borderBottom={1}
-              borderBottomColor="washedGray"
-              pb={3}
-              alignItems="center"
-            >
-              <Sigil size={32} classes="" color={hexColor} ship={us} />
-              <Box ml={2}>
-                <Text fontFamily="mono">{us}</Text>
-              </Box>
-            </Row>
-            <ImageInput mt={3} id="avatar" label="Avatar" s3={props.s3} />
-            <ColorInput id="color" label="Sigil Color" />
-            <Input id="nickname" label="Nickname" />
-            <Input id="email" label="Email" />
-            <Input id="phone" label="Phone" />
-            <Input id="website" label="Website" />
-            <Input id="notes" label="Notes" />
-            <AsyncButton primary loadingText="Updating..." border>
-              Save
-            </AsyncButton>
-          </Col>
+        <Form
+          display="grid"
+          gridAutoRows="auto"
+          gridTemplateColumns="100%"
+          gridRowGap="5"
+          maxWidth="400px"
+        >
+          <Row
+            borderBottom={1}
+            borderBottomColor="washedGray"
+            pb={3}
+            alignItems="center"
+          >
+            <Sigil size={32} classes="" color={hexColor} ship={us} />
+            <Box ml={2}>
+              <Text fontFamily="mono">{us}</Text>
+            </Box>
+          </Row>
+          <ImageInput id="avatar" label="Avatar" s3={props.s3} />
+          <ColorInput id="color" label="Sigil Color" />
+          <Input id="nickname" label="Nickname" />
+          <Input id="email" label="Email" />
+          <Input id="phone" label="Phone" />
+          <Input id="website" label="Website" />
+          <Input id="notes" label="Notes" />
+          <AsyncButton primary loadingText="Updating..." border>
+            Save
+          </AsyncButton>
         </Form>
       </Formik>
     </Box>
diff --git a/pkg/interface/src/views/apps/profile/components/lib/BackgroundPicker.tsx b/pkg/interface/src/views/apps/profile/components/lib/BackgroundPicker.tsx
index c7325972d..a5213e573 100644
--- a/pkg/interface/src/views/apps/profile/components/lib/BackgroundPicker.tsx
+++ b/pkg/interface/src/views/apps/profile/components/lib/BackgroundPicker.tsx
@@ -1,7 +1,9 @@
 import React from "react";
 import {
   Box,
+  Row,
   Label,
+  Col,
   ManagedRadioButtonField as Radio,
   ManagedTextInputField as Input,
 } from "@tlon/indigo-react";
@@ -23,34 +25,32 @@ export function BackgroundPicker({
   api: GlobalApi;
   s3: S3State;
 }) {
+
+  const rowSpace = { my: 0, alignItems: 'center' };
+  const radioProps = { my: 4, mr: 4, name: 'bgType' };
   return (
-    <Box>
-      <Label>Landscape Background</Label>
-      <Box display="flex" alignItems="center">
-        <Box mt={3} mr={7}>
-          <Radio label="Image" id="url" name="bgType" />
-          {bgType === "url" && (
-            <ImageInput
-              api={api}
-              s3={s3}
-              id="bgUrl"
-              name="bgUrl"
-              label="URL"
-              url={bgUrl || ""}
-            />
-          )}
-          <Radio label="Color" id="color" name="bgType" />
-          {bgType === "color" && (
-            <Input
-              ml={4}
-              type="text"
-              label="Color"
-              id="bgColor"
-            />
-          )}
-          <Radio label="None" id="none" name="bgType" />
-        </Box>
-      </Box>
-    </Box>
+    <Col>
+      <Label mb="2">Landscape Background</Label>
+      <Row {...rowSpace}>
+        <Radio {...radioProps} label="Image" id="url" />
+        {bgType === "url" && (
+          <ImageInput
+            api={api}
+            s3={s3}
+            id="bgUrl"
+            name="bgUrl"
+            label="URL"
+            url={bgUrl || ""}
+          />
+        )}
+      </Row>
+      <Row {...rowSpace}>
+        <Radio label="Color" id="color" {...radioProps} />
+        {bgType === "color" && (
+          <Input ml={4} type="text" label="Color" id="bgColor" />
+        )}
+      </Row>
+      <Radio label="None" id="none" {...radioProps} />
+    </Col>
   );
 }
diff --git a/pkg/interface/src/views/apps/profile/components/lib/BucketList.tsx b/pkg/interface/src/views/apps/profile/components/lib/BucketList.tsx
index 7c43f96ec..cfe4725ba 100644
--- a/pkg/interface/src/views/apps/profile/components/lib/BucketList.tsx
+++ b/pkg/interface/src/views/apps/profile/components/lib/BucketList.tsx
@@ -2,6 +2,7 @@ import React, { useCallback } from "react";
 
 import {
   ManagedTextInputField as Input,
+  ManagedForm as Form,
   Box,
   Button,
   Col,
@@ -11,7 +12,7 @@ import {
   MenuList,
   MenuItem,
 } from "@tlon/indigo-react";
-import { Formik, Form } from "formik";
+import { Formik } from "formik";
 
 import GlobalApi from "~/logic/api/global";
 
@@ -53,49 +54,48 @@ export function BucketList({
 
   return (
     <Formik initialValues={{ newBucket: "" }} onSubmit={onSubmit}>
-      <Form>
-        <Col alignItems="start">
-          {_buckets.map((bucket) => (
-            <Box
-              key={bucket}
-              display="flex"
-              justifyContent="space-between"
-              alignItems="center"
-              borderRadius={1}
-              border={1}
-              borderColor="washedGray"
-              fontSize={1}
-              pl={2}
-              mb={2}
-              width="100%"
-            >
-              <Text>{bucket}</Text>
-              {bucket === selected && (
-                <Text p={1} color="green">
-                  Active
-                </Text>
-              )}
-              {bucket !== selected && (
-                <Menu>
-                  <MenuButton sm>Options</MenuButton>
-                  <MenuList>
-                    <MenuItem onSelect={onSelect(bucket)}>Make Active</MenuItem>
-                    <MenuItem onSelect={onDelete(bucket)}>Delete</MenuItem>
-                  </MenuList>
-                </Menu>
-              )}
-            </Box>
-          ))}
-          <Input
-            mt={2}
-            type="text"
-            label="New Bucket"
-            id="newBucket"
-          />
-          <Button border borderColor="washedGrey" type="submit">
-            Add
-          </Button>
-        </Col>
+      <Form
+        display="grid"
+        gridTemplateColumns="100%"
+        gridAutoRows="auto"
+        gridRowGap={2}
+      >
+        {_buckets.map((bucket) => (
+          <Box
+            key={bucket}
+            display="flex"
+            justifyContent="space-between"
+            alignItems="center"
+            borderRadius={1}
+            border={1}
+            borderColor="washedGray"
+            fontSize={1}
+            pl={2}
+            mb={2}
+          >
+            <Text>{bucket}</Text>
+            {bucket === selected && (
+              <Text p={2} color="green">
+                Active
+              </Text>
+            )}
+            {bucket !== selected && (
+              <Menu>
+                <MenuButton border={0} cursor="pointer" width="auto">
+                  Options
+                </MenuButton>
+                <MenuList>
+                  <MenuItem onSelect={onSelect(bucket)}>Make Active</MenuItem>
+                  <MenuItem onSelect={onDelete(bucket)}>Delete</MenuItem>
+                </MenuList>
+              </Menu>
+            )}
+          </Box>
+        ))}
+        <Input mt="2" label="New Bucket" id="newBucket" />
+        <Button mt="2" borderColor="washedGrey" type="submit">
+          Add
+        </Button>
       </Form>
     </Formik>
   );
diff --git a/pkg/interface/src/views/apps/profile/components/lib/DisplayForm.tsx b/pkg/interface/src/views/apps/profile/components/lib/DisplayForm.tsx
index 639136cc0..952f94ceb 100644
--- a/pkg/interface/src/views/apps/profile/components/lib/DisplayForm.tsx
+++ b/pkg/interface/src/views/apps/profile/components/lib/DisplayForm.tsx
@@ -14,7 +14,7 @@ import GlobalApi from "../../../../api/global";
 import { LaunchState } from "../../../../types/launch-update";
 import { DropLaunchTiles } from "./DropLaunch";
 import { S3State, BackgroundConfig } from "../../../../types";
-import { BackgroundPicker, BgType } from './BackgroundPicker';
+import { BackgroundPicker, BgType } from "./BackgroundPicker";
 
 const formSchema = Yup.object().shape({
   tileOrdering: Yup.array().of(Yup.string()),
@@ -47,14 +47,7 @@ interface DisplayFormProps {
 }
 
 export default function DisplayForm(props: DisplayFormProps) {
-  const {
-    api,
-    launch,
-    background,
-    hideAvatars,
-    hideNicknames,
-    s3
-  } = props;
+  const { api, launch, background, hideAvatars, hideNicknames, s3 } = props;
 
   let bgColor, bgUrl;
   if (background?.type === "url") {
@@ -99,9 +92,9 @@ export default function DisplayForm(props: DisplayFormProps) {
         <Form>
           <Box
             display="grid"
-            gridTemplateColumns="1fr"
+            gridTemplateColumns="100%"
             gridTemplateRows="auto"
-            gridRowGap={3}
+            gridRowGap={5}
           >
             <Box color="black" fontSize={1} mb={3} fontWeight={900}>
               Display Preferences
@@ -123,22 +116,20 @@ export default function DisplayForm(props: DisplayFormProps) {
               api={api}
               s3={s3}
             />
-            <Box>
-              <Checkbox
-                label="Disable avatars"
-                id="avatars"
-                caption="Do not show user-set avatars"
-              />
-              <Checkbox
-                label="Disable nicknames"
-                id="nicknames"
-                caption="Do not show user-set nicknames"
-              />
-            </Box>
+            <Checkbox
+              label="Disable avatars"
+              id="avatars"
+              caption="Do not show user-set avatars"
+            />
+            <Checkbox
+              label="Disable nicknames"
+              id="nicknames"
+              caption="Do not show user-set nicknames"
+            />
+            <Button border={1} borderColor="washedGray" type="submit">
+              Save
+            </Button>
           </Box>
-          <Button border={1} borderColor="washedGray" type="submit">
-            Save
-          </Button>
         </Form>
       )}
     </Formik>
diff --git a/pkg/interface/src/views/apps/profile/components/lib/DragTile.tsx b/pkg/interface/src/views/apps/profile/components/lib/DragTile.tsx
index 583926c47..c5f05e70a 100644
--- a/pkg/interface/src/views/apps/profile/components/lib/DragTile.tsx
+++ b/pkg/interface/src/views/apps/profile/components/lib/DragTile.tsx
@@ -83,7 +83,7 @@ function DragTileBasic(props: {
       }
       style={props.style}
     >
-      <Img width="48px" height="48px" src={tile.iconUrl} invert={isDojo} />
+      <Image width="48px" height="48px" src={tile.iconUrl} invert={isDojo} />
       <Text
         color={
           "black" // isDojo ? "white" : "black"
diff --git a/pkg/interface/src/views/apps/profile/components/lib/RemoteContent.tsx b/pkg/interface/src/views/apps/profile/components/lib/RemoteContent.tsx
index 557a2132d..afd5fac5f 100644
--- a/pkg/interface/src/views/apps/profile/components/lib/RemoteContent.tsx
+++ b/pkg/interface/src/views/apps/profile/components/lib/RemoteContent.tsx
@@ -1,5 +1,9 @@
 import React from "react";
-import { Box, Button, Checkbox } from '@tlon/indigo-react';
+import {
+  Box,
+  Button,
+  ManagedCheckboxField as Checkbox,
+} from "@tlon/indigo-react";
 import { Formik, Form } from "formik";
 import * as Yup from "yup";
 
@@ -10,7 +14,7 @@ const formSchema = Yup.object().shape({
   imageShown: Yup.boolean(),
   audioShown: Yup.boolean(),
   videoShown: Yup.boolean(),
-  oembedShown: Yup.boolean()
+  oembedShown: Yup.boolean(),
 });
 
 interface FormSchema {
@@ -39,7 +43,7 @@ export default function RemoteContentForm(props: RemoteContentFormProps) {
           imageShown,
           audioShown,
           videoShown,
-          oembedShown
+          oembedShown,
         } as FormSchema
       }
       onSubmit={(values, actions) => {
@@ -47,7 +51,7 @@ export default function RemoteContentForm(props: RemoteContentFormProps) {
           imageShown: values.imageShown,
           audioShown: values.audioShown,
           videoShown: values.videoShown,
-          oembedShown: values.oembedShown
+          oembedShown: values.oembedShown,
         });
         api.local.dehydrate();
         actions.setSubmitting(false);
@@ -59,36 +63,26 @@ export default function RemoteContentForm(props: RemoteContentFormProps) {
             display="grid"
             gridTemplateColumns="1fr"
             gridTemplateRows="audio"
-            gridRowGap={3}
+            gridRowGap={5}
           >
-            <Box color="black" fontSize={1} mb={3} fontWeight={900}>
+            <Box color="black" fontSize={1} 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>
+            <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"
+            />
+            <Button border={1} borderColor="washedGray" type="submit">
+              Save
+            </Button>
           </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/lib/S3Form.tsx b/pkg/interface/src/views/apps/profile/components/lib/S3Form.tsx
index 86dfaa7da..1647bda19 100644
--- a/pkg/interface/src/views/apps/profile/components/lib/S3Form.tsx
+++ b/pkg/interface/src/views/apps/profile/components/lib/S3Form.tsx
@@ -2,16 +2,17 @@ import React, { useCallback } from "react";
 
 import {
   ManagedTextInputField as Input,
+  ManagedForm as Form,
   Box,
   Button,
   Col,
   Text,
-  Menu
+  Menu,
 } from "@tlon/indigo-react";
 
-import { Formik, Form } from "formik";
+import { Formik } from "formik";
 import GlobalApi from "../../../../api/global";
-import { BucketList } from './BucketList';
+import { BucketList } from "./BucketList";
 import { S3State } from "../../../../types";
 
 interface FormSchema {
@@ -49,9 +50,6 @@ export default function S3Form(props: S3FormProps) {
   return (
     <>
       <Col>
-        <Box color="black" mb={4} fontSize={1} fontWeight={900}>
-          S3 Credentials
-        </Box>
         <Formik
           initialValues={
             {
@@ -64,23 +62,23 @@ export default function S3Form(props: S3FormProps) {
           }
           onSubmit={onSubmit}
         >
-          <Form>
-            <Input width="256px" type="text" label="Endpoint" id="s3endpoint" />
+          <Form
+            display="grid"
+            gridTemplateColumns="100%"
+            gridAutoRows="auto"
+            gridRowGap={5}
+          >
+            <Box color="black" fontSize={1} fontWeight={900}>
+              S3 Credentials
+            </Box>
+            <Input label="Endpoint" id="s3endpoint" />
+            <Input label="Access Key ID" id="s3accessKeyId" />
             <Input
-              width="256px"
-              type="text"
-              label="Access Key ID"
-              id="s3accessKeyId"
-            />
-            <Input
-              width="256px"
               type="password"
               label="Secret Access Key"
               id="s3secretAccessKey"
             />
-            <Button border={1} type="submit">
-              Submit
-            </Button>
+            <Button type="submit">Submit</Button>
           </Form>
         </Formik>
       </Col>
diff --git a/pkg/interface/src/views/apps/profile/profile.tsx b/pkg/interface/src/views/apps/profile/profile.tsx
index 735a5f769..7dc888634 100644
--- a/pkg/interface/src/views/apps/profile/profile.tsx
+++ b/pkg/interface/src/views/apps/profile/profile.tsx
@@ -22,7 +22,7 @@ const SidebarItem = ({ children, view, current }) => {
         px={3}
         backgroundColor={selected ? "washedBlue" : "white"}
       >
-        <Icon mr={2} display="inline-block" icon="Circle" fill={color} />
+        <Icon mr={2} display="inline-block" icon="Circle" color={color} />
         <Text color={color} fontSize={0}>
           {children}
         </Text>
diff --git a/pkg/interface/src/views/components/ColorInput.tsx b/pkg/interface/src/views/components/ColorInput.tsx
index 34654476d..e3e8ddc5b 100644
--- a/pkg/interface/src/views/components/ColorInput.tsx
+++ b/pkg/interface/src/views/components/ColorInput.tsx
@@ -1,41 +1,34 @@
 import React from "react";
 import { useField } from "formik";
 import styled from "styled-components";
-import { Col, Label, Row, Box, ErrorLabel } from "@tlon/indigo-react";
+import {
+  Col,
+  Label,
+  Row,
+  Box,
+  ErrorLabel,
+  StatelessTextInput as Input,
+} from "@tlon/indigo-react";
 
 import { uxToHex, hexToUx } from "~/logic/lib/util";
 
-const Input = styled.input`
-  background-color: ${ p => p.theme.colors.white };
-  color: ${ p => p.theme.colors.black };
-  box-sizing: border-box;
-  border: 1px solid;
-  border-right: none;
-  border-color: ${(p) => p.theme.colors.lightGray};
-  border-top-left-radius: ${(p) => p.theme.radii[2]}px;
-  border-bottom-left-radius: ${(p) => p.theme.radii[2]}px;
-  padding: ${(p) => p.theme.space[2]}px;
-  font-size: 12px;
-  line-height: 1.2;
-`;
-
 type ColorInputProps = Parameters<typeof Col>[0] & {
   id: string;
   label: string;
-}
+};
 
 export function ColorInput(props: ColorInputProps) {
-  const { id, label, ...rest } = props;
-  const [{ value }, { error }, { setValue }] = useField(id);
+  const { id, label, caption, ...rest } = props;
+  const [{ value, onBlur }, meta, { setValue }] = useField(id);
 
-  const hex = value.substr(2).replace('.', '');
-  const padded = hex.padStart(6, '0');
+  const hex = value.substr(2).replace(".", "");
+  const padded = hex.padStart(6, "0");
 
   const onChange = (e: any) => {
     const { value: newValue } = e.target as HTMLInputElement;
     const valid = newValue.match(/^(\d|[a-f]|[A-F]){0,6}$/);
 
-    if(!valid) {
+    if (!valid) {
       return;
     }
     const result = hexToUx(newValue);
@@ -43,10 +36,21 @@ export function ColorInput(props: ColorInputProps) {
   };
 
   return (
-    <Col {...rest}>
+    <Box display="flex" flexDirection="column" {...props}>
       <Label htmlFor={id}>{label}</Label>
-      <Row mt={2}>
-        <Input onChange={onChange} value={hex} />
+      {caption ? (
+        <Label mt="2" gray>
+          {caption}
+        </Label>
+      ) : null}
+      <Row mt="2" alignItems="flex-end">
+        <Input
+          borderTopRightRadius={0}
+          borderBottomRightRadius={0}
+          onBlur={onBlur}
+          onChange={onChange}
+          value={hex}
+        />
         <Box
           borderBottomRightRadius={1}
           borderTopRightRadius={1}
@@ -58,7 +62,9 @@ export function ColorInput(props: ColorInputProps) {
           bg={`#${padded}`}
         />
       </Row>
-      <ErrorLabel mt="2">{error}</ErrorLabel>
-    </Col>
+      <ErrorLabel mt="2" hasError={!!(meta.touched && meta.error)}>
+        {meta.error}
+      </ErrorLabel>
+    </Box>
   );
 }
diff --git a/pkg/interface/src/views/components/ImageInput.tsx b/pkg/interface/src/views/components/ImageInput.tsx
index 0d6d8a866..1388ed1b1 100644
--- a/pkg/interface/src/views/components/ImageInput.tsx
+++ b/pkg/interface/src/views/components/ImageInput.tsx
@@ -1,7 +1,13 @@
 import React, { useRef, useCallback, useState } from "react";
 
-import { Box, ManagedTextInputField as Input, Button } from "@tlon/indigo-react";
-import GlobalApi from "~/api/global";
+import {
+  Box,
+  StatelessTextInput as Input,
+  Row,
+  Button,
+  Label,
+  ErrorLabel,
+} from "@tlon/indigo-react";
 import { useField } from "formik";
 import { S3State } from "~/types/s3-update";
 import { useS3 } from "~/logic/lib/useS3";
@@ -10,16 +16,17 @@ type ImageInputProps = Parameters<typeof Box>[0] & {
   id: string;
   label: string;
   s3: S3State;
+  placeholder?: string;
 };
 
 export function ImageInput(props: ImageInputProps) {
-  const { id, label, s3, ...rest } = props;
+  const { id, label, s3, caption, placeholder, ...rest } = props;
 
   const { uploadDefault, canUpload } = useS3(s3);
 
   const [uploading, setUploading] = useState(false);
 
-  const [, , { setValue, setError }] = useField(id);
+  const [field, meta, { setValue, setError }] = useField(id);
 
   const ref = useRef<HTMLInputElement | null>(null);
 
@@ -44,29 +51,44 @@ export function ImageInput(props: ImageInputProps) {
   }, [ref]);
 
   return (
-    <Box {...rest} display="flex">
-      <Input disabled={uploading} type="text" label={label} id={id} />
-      {canUpload && (
-        <>
-          <Button
-            ml={1}
-            border={3}
-            borderColor="washedGray"
-            style={{ marginTop: "18px" }}
-            onClick={onClick}
-          >
-            {uploading ? "Uploading" : "Upload"}
-          </Button>
-          <input
-            style={{ display: "none" }}
-            type="file"
-            id="fileElement"
-            ref={ref}
-            accept="image/*"
-            onChange={onImageUpload}
-          />
-        </>
-      )}
+    <Box display="flex" flexDirection="column" {...props}>
+      <Label htmlFor={id}>{label}</Label>
+      {caption ? (
+        <Label mt="2" gray>
+          {caption}
+        </Label>
+      ) : null}
+      <Row mt="2" alignItems="flex-end">
+        <Input
+          type={"text"}
+          hasError={meta.touched && meta.error !== undefined}
+          placeholder={placeholder}
+          {...field}
+        />
+        {canUpload && (
+          <>
+            <Button
+              ml={1}
+              border={3}
+              borderColor="washedGray"
+              onClick={onClick}
+            >
+              {uploading ? "Uploading" : "Upload"}
+            </Button>
+            <input
+              style={{ display: "none" }}
+              type="file"
+              id="fileElement"
+              ref={ref}
+              accept="image/*"
+              onChange={onImageUpload}
+            />
+          </>
+        )}
+      </Row>
+      <ErrorLabel mt="2" hasError={!!(meta.touched && meta.error)}>
+        {meta.error}
+      </ErrorLabel>
     </Box>
   );
 }

From 6770e8f857aaac518176c548f80064718c07c17e Mon Sep 17 00:00:00 2001
From: Gavin Atkinson <gvnatknsn@protonmail.com>
Date: Wed, 23 Sep 2020 12:57:39 -0700
Subject: [PATCH 14/54] remove fontSize property

---
 pkg/interface/src/views/apps/profile/components/settings.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/pkg/interface/src/views/apps/profile/components/settings.tsx b/pkg/interface/src/views/apps/profile/components/settings.tsx
index 72c6794cd..6c9bf6866 100644
--- a/pkg/interface/src/views/apps/profile/components/settings.tsx
+++ b/pkg/interface/src/views/apps/profile/components/settings.tsx
@@ -36,7 +36,6 @@ export default function Settings({
   return (
     <Box
       backgroundColor="white"
-      fontSize={2}
       display="grid"
       gridTemplateRows="auto"
       gridTemplateColumns="1fr"

From cdbbaf0bdaf0f16014425100022742138cbffdee Mon Sep 17 00:00:00 2001
From: Matilde Park <matilde@tlon.io>
Date: Wed, 23 Sep 2020 16:44:25 -0400
Subject: [PATCH 15/54] leap: always blur and refocus input

---
 pkg/interface/src/views/components/leap/OmniboxInput.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/pkg/interface/src/views/components/leap/OmniboxInput.js b/pkg/interface/src/views/components/leap/OmniboxInput.js
index 9a32aface..0e816dfdf 100644
--- a/pkg/interface/src/views/components/leap/OmniboxInput.js
+++ b/pkg/interface/src/views/components/leap/OmniboxInput.js
@@ -8,6 +8,10 @@ export class OmniboxInput extends Component {
     <input
       ref={(el) => {
         this.input = el;
+          if (el) {
+            el.blur();
+            el.focus();
+          }
         }
       }
       className='ba b--transparent w-100 br2 white-d bg-gray0-d inter f9 pa2'

From 332b2bc481f863cf1bf49b32ad5a62523c3c1501 Mon Sep 17 00:00:00 2001
From: Matilde Park <matilde@tlon.io>
Date: Wed, 23 Sep 2020 17:24:39 -0400
Subject: [PATCH 16/54] leap: check for focus before blurring

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

diff --git a/pkg/interface/src/views/components/leap/OmniboxInput.js b/pkg/interface/src/views/components/leap/OmniboxInput.js
index 0e816dfdf..844a647ff 100644
--- a/pkg/interface/src/views/components/leap/OmniboxInput.js
+++ b/pkg/interface/src/views/components/leap/OmniboxInput.js
@@ -8,7 +8,7 @@ export class OmniboxInput extends Component {
     <input
       ref={(el) => {
         this.input = el;
-          if (el) {
+          if (el && document.activeElement.isSameNode(el)) {
             el.blur();
             el.focus();
           }

From 3452781b402e260f3848ad1be6442795f7f15488 Mon Sep 17 00:00:00 2001
From: Liam Fitzgerald <liam@urizen.co>
Date: Thu, 24 Sep 2020 10:05:17 +1000
Subject: [PATCH 17/54] push-hook: Proxy local pokes and fix kick path

---
 pkg/arvo/lib/push-hook.hoon          | 24 +++++++++++++++++++++---
 pkg/interface/src/logic/api/graph.ts |  2 +-
 2 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/pkg/arvo/lib/push-hook.hoon b/pkg/arvo/lib/push-hook.hoon
index bbe6f73c6..9f9e2af3a 100644
--- a/pkg/arvo/lib/push-hook.hoon
+++ b/pkg/arvo/lib/push-hook.hoon
@@ -21,10 +21,11 @@
 ::   ##  Pokes
 ::
 ::   %push-hook-action: Add/remove a resource from pushing.
-::   [update-mark.config]: A poke to proxy to the local store
+::   [update-mark.config]: A poke to proxy to the local store or a
+::   foreign push-hook
 ::
 /-  *push-hook
-/+  default-agent, resource
+/+  default-agent, resource, verb
 |%
 +$  card  card:agent:gall
 ::
@@ -182,6 +183,9 @@
         [cards this]
       ::
       ?:  =(mark update-mark.config)
+        ?:  (team:title [our src]:bowl)
+          :_  this
+          (forward-update:hc vase)
         =^  cards  state
           (poke-update:hc vase)
         [cards this]
@@ -201,7 +205,7 @@
       =/  =resource
         (de-path:resource t.path)
       =/  =vase
-        (initial-watch:og t.t.t.path resource)
+        (initial-watch:og t.t.t.t.path resource)
       :_  this
       [%give %fact ~ update-mark.config vase]~
     ::
@@ -333,5 +337,19 @@
     =/  =path
       resource+(en-path:resource u.rid)
     [%give %fact ~[path] update-mark.config vase]~
+  ::
+  ++  forward-update
+    |=  =vase
+    ^-  (list card:agent:gall)
+    =/  rid=(unit resource)
+      (resource-for-update:og vase)
+    ?~  rid  ~
+    =/  =path
+      resource+(en-path:resource u.rid)
+    =/  =wire
+      (make-wire resource+(en-path:resource u.rid))
+    =/  dap=term
+      ?:(=(our.bowl entity.u.rid) store-name.config dap.bowl)
+    [%pass wire %agent [entity.u.rid dap] %poke update-mark.config vase]~
   --
 --
diff --git a/pkg/interface/src/logic/api/graph.ts b/pkg/interface/src/logic/api/graph.ts
index cd034d123..98097016e 100644
--- a/pkg/interface/src/logic/api/graph.ts
+++ b/pkg/interface/src/logic/api/graph.ts
@@ -28,7 +28,7 @@ export default class GraphApi extends BaseApi<StoreState> {
   }
 
   private hookAction(ship: Patp, action: any): Promise<any> {
-    return this.action('graph-push-hook', 'graph-update', action, deSig(ship));
+    return this.action('graph-push-hook', 'graph-update', action);
   }
 
   createManagedGraph(

From 69d8130334b70907caafea3250858658b0abdd45 Mon Sep 17 00:00:00 2001
From: Liam Fitzgerald <liam@urizen.co>
Date: Thu, 24 Sep 2020 10:05:57 +1000
Subject: [PATCH 18/54] graph-view: en-path resource for md-hook

---
 pkg/arvo/ted/graph/join.hoon | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/pkg/arvo/ted/graph/join.hoon b/pkg/arvo/ted/graph/join.hoon
index cbf8d7cfb..6cb81d35b 100644
--- a/pkg/arvo/ted/graph/join.hoon
+++ b/pkg/arvo/ted/graph/join.hoon
@@ -53,7 +53,7 @@
 ::
 ;<  ~  bind:m
   %+  poke-our  %metadata-hook
-  metadata-hook-action+!>([%add-synced ship.action rid.action])
+  metadata-hook-action+!>([%add-synced ship.action (en-path:resource rid.action)])
 ::
 ;<  ~  bind:m  
   %+  poke-our  %graph-pull-hook

From 7daf0e692b569f28940f40a886ad88d3f9097f80 Mon Sep 17 00:00:00 2001
From: Liam Fitzgerald <liam@urizen.co>
Date: Thu, 24 Sep 2020 17:22:08 +1000
Subject: [PATCH 19/54] interface: cleanup more indigo shenanigans

---
 pkg/interface/package-lock.json               |  6 ++--
 pkg/interface/package.json                    |  2 +-
 .../components/lib/BackgroundPicker.tsx       |  1 +
 .../apps/publish/components/lib/EditPost.tsx  |  2 +-
 .../apps/publish/components/lib/NoteForm.tsx  | 35 +++++++++----------
 .../apps/publish/components/lib/new-post.tsx  |  2 +-
 .../src/views/components/ImageInput.tsx       |  4 +--
 7 files changed, 26 insertions(+), 26 deletions(-)

diff --git a/pkg/interface/package-lock.json b/pkg/interface/package-lock.json
index 1df355ea0..399ad94e5 100644
--- a/pkg/interface/package-lock.json
+++ b/pkg/interface/package-lock.json
@@ -1709,9 +1709,9 @@
       "integrity": "sha512-3OPSdf9cejP/TSzWXuBaYbzLtAfBzQnc75SlPLkoPfwpxnv1Bvy9hiWngLY0WnKRR6lMOldnkYQCCuNWeDibYQ=="
     },
     "@tlon/indigo-react": {
-      "version": "1.2.5",
-      "resolved": "https://registry.npmjs.org/@tlon/indigo-react/-/indigo-react-1.2.5.tgz",
-      "integrity": "sha512-NOQTwH74l/XXMIfQ4ZzymvZuk1WK1nmO552TmXrQxBUSb7HmdlA8anG5oRrvnLJTkajLCY59McLkDca+lCcvwg==",
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/@tlon/indigo-react/-/indigo-react-1.2.6.tgz",
+      "integrity": "sha512-Dng+OfQ6ViMrdJXtQvgsVrW9vglPGUmbv0ffi2MSwLfe6FhUdL1CHoOjGxm4pATLOou53Kqcrt4g1Svw7y9THw==",
       "requires": {
         "@reach/menu-button": "^0.10.5",
         "react": "^16.13.1",
diff --git a/pkg/interface/package.json b/pkg/interface/package.json
index 35af09a9e..9be987122 100644
--- a/pkg/interface/package.json
+++ b/pkg/interface/package.json
@@ -9,7 +9,7 @@
     "@reach/menu-button": "^0.10.5",
     "@reach/tabs": "^0.10.5",
     "@tlon/indigo-light": "^1.0.3",
-    "@tlon/indigo-react": "1.2.5",
+    "@tlon/indigo-react": "1.2.6",
     "aws-sdk": "^2.726.0",
     "classnames": "^2.2.6",
     "codemirror": "^5.55.0",
diff --git a/pkg/interface/src/views/apps/profile/components/lib/BackgroundPicker.tsx b/pkg/interface/src/views/apps/profile/components/lib/BackgroundPicker.tsx
index a5213e573..df4e8d617 100644
--- a/pkg/interface/src/views/apps/profile/components/lib/BackgroundPicker.tsx
+++ b/pkg/interface/src/views/apps/profile/components/lib/BackgroundPicker.tsx
@@ -35,6 +35,7 @@ export function BackgroundPicker({
         <Radio {...radioProps} label="Image" id="url" />
         {bgType === "url" && (
           <ImageInput
+            ml="3"
             api={api}
             s3={s3}
             id="bgUrl"
diff --git a/pkg/interface/src/views/apps/publish/components/lib/EditPost.tsx b/pkg/interface/src/views/apps/publish/components/lib/EditPost.tsx
index dde8d8d5a..5e84be7c4 100644
--- a/pkg/interface/src/views/apps/publish/components/lib/EditPost.tsx
+++ b/pkg/interface/src/views/apps/publish/components/lib/EditPost.tsx
@@ -38,7 +38,7 @@ export function EditPost(props: EditPostProps & RouteComponentProps) {
     <PostForm
       initial={initial}
       onSubmit={onSubmit}
-      submitLabel={`Update ${note.title}`}
+      submitLabel="Update"
       loadingText="Updating..."
     />
   );
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 d1fa3d9ac..2b4ef3a27 100644
--- a/pkg/interface/src/views/apps/publish/components/lib/NoteForm.tsx
+++ b/pkg/interface/src/views/apps/publish/components/lib/NoteForm.tsx
@@ -1,6 +1,11 @@
 import React from "react";
 import * as Yup from "yup";
-import { Box, ManagedTextInputField as Input } from "@tlon/indigo-react";
+import {
+  Box,
+  ManagedTextInputField as Input,
+  TwoUp,
+  Col,
+} from "@tlon/indigo-react";
 import { AsyncButton } from "../../../../components/AsyncButton";
 import { Formik, Form, FormikHelpers } from "formik";
 import { MarkdownField } from "./MarkdownField";
@@ -29,17 +34,7 @@ export function PostForm(props: PostFormProps) {
   const { initial, onSubmit, submitLabel, loadingText } = props;
 
   return (
-    <Box
-      width="100%"
-      height="100%"
-      p={[2, 4]}
-      display="grid"
-      justifyItems="start"
-      gridTemplateRows={["64px 64px 1fr", "64px 1fr"]}
-      gridTemplateColumns={["100%", "1fr 1fr"]}
-      gridColumnGap={2}
-      gridRowGap={2}
-    >
+    <Col width="100%" height="100%" p={[2, 4]}>
       <Formik
         validationSchema={formSchema}
         initialValues={initial}
@@ -47,15 +42,19 @@ export function PostForm(props: PostFormProps) {
         validateOnBlur
       >
         <Form style={{ display: "contents" }}>
-          <Input width="100%" placeholder="Post Title" id="title" />
-          <Box gridRow={["1/2", "auto"]} mt={1} justifySelf={["start", "end"]}>
-            <AsyncButton primary loadingText={loadingText}>
+          <TwoUp mb={4} gap={4}>
+            <Input
+              flexGrow={1}
+              placeholder="Post Title"
+              id="title"
+            />
+            <AsyncButton flexShrink={1} primary loadingText={loadingText}>
               {submitLabel}
             </AsyncButton>
-          </Box>
-          <MarkdownField gridColumn={["1/2", "1/3"]} id="body" />
+          </TwoUp>
+          <MarkdownField flexGrow={1} id="body" />
         </Form>
       </Formik>
-    </Box>
+    </Col>
   );
 }
diff --git a/pkg/interface/src/views/apps/publish/components/lib/new-post.tsx b/pkg/interface/src/views/apps/publish/components/lib/new-post.tsx
index c0e26905e..524dbab23 100644
--- a/pkg/interface/src/views/apps/publish/components/lib/new-post.tsx
+++ b/pkg/interface/src/views/apps/publish/components/lib/new-post.tsx
@@ -58,7 +58,7 @@ export default function NewPost(props: NewPostProps & RouteComponentProps) {
     <PostForm
       initial={initialValues}
       onSubmit={onSubmit}
-      submitLabel={`Publish to ${notebook?.title}`}
+      submitLabel="Publish"
       loadingText="Posting..."
     />
   );
diff --git a/pkg/interface/src/views/components/ImageInput.tsx b/pkg/interface/src/views/components/ImageInput.tsx
index 1388ed1b1..1ec0c6c7f 100644
--- a/pkg/interface/src/views/components/ImageInput.tsx
+++ b/pkg/interface/src/views/components/ImageInput.tsx
@@ -69,8 +69,8 @@ export function ImageInput(props: ImageInputProps) {
           <>
             <Button
               ml={1}
-              border={3}
-              borderColor="washedGray"
+              border={1}
+              borderColor="lightGray"
               onClick={onClick}
             >
               {uploading ? "Uploading" : "Upload"}

From 5cc4165b74bf21225eea93f3192f45811b7d4b3a Mon Sep 17 00:00:00 2001
From: Logan Allen <loganallc@gmail.com>
Date: Thu, 24 Sep 2020 13:47:11 -0500
Subject: [PATCH 20/54] interface: fix tab bar to display and link properly

---
 pkg/interface/src/views/apps/links/app.js            | 12 ++++++++----
 .../src/views/apps/links/components/link-detail.js   |  9 +++++++--
 .../src/views/apps/links/components/link-list.js     |  8 ++++++--
 .../src/views/apps/links/components/settings.js      |  7 ++++---
 4 files changed, 25 insertions(+), 11 deletions(-)

diff --git a/pkg/interface/src/views/apps/links/app.js b/pkg/interface/src/views/apps/links/app.js
index d8a786dec..3994f7c5c 100644
--- a/pkg/interface/src/views/apps/links/app.js
+++ b/pkg/interface/src/views/apps/links/app.js
@@ -137,9 +137,11 @@ export default class LinksApp extends Component {
             render={ (props) => {
               const resourcePath = 
                 `${props.match.params.ship}/${props.match.params.name}`;
+              const metPath = `/ship/~${resourcePath}`;
               const resource =
-                associations.graph[resourcePath] ?
-                  associations.graph[resourcePath] : { metadata: {} };
+                associations.graph[metPath] ?
+                  associations.graph[metPath] : { metadata: {} };
+
               const contactDetails = contacts[resource['group-path']] || {};
               const popout = props.match.url.includes('/popout/');
               const graph = graphs[resourcePath] || null;
@@ -160,6 +162,7 @@ export default class LinksApp extends Component {
                     api={api}
                     graph={graph}
                     graphResource={graphKeys.has(resourcePath)}
+                    resourcePath={resourcePath}
                     popout={popout}
                     metadata={resource.metadata}
                     contacts={contactDetails}
@@ -177,9 +180,10 @@ export default class LinksApp extends Component {
             render={ (props) => {
               const resourcePath = 
                 `${props.match.params.ship}/${props.match.params.name}`;
+              const metPath = `/ship/~${resourcePath}`;
               const resource =
-                associations.graph[resourcePath] ?
-                  associations.graph[resourcePath] : { metadata: {} };
+                associations.graph[metPath] ?
+                  associations.graph[metPath] : { metadata: {} };
               const popout = props.match.url.includes('/popout/');
               const contactDetails = contacts[resource['group-path']] || {};
 
diff --git a/pkg/interface/src/views/apps/links/components/link-detail.js b/pkg/interface/src/views/apps/links/components/link-detail.js
index 8c3453bc8..b4e2d9b6f 100644
--- a/pkg/interface/src/views/apps/links/components/link-detail.js
+++ b/pkg/interface/src/views/apps/links/components/link-detail.js
@@ -48,8 +48,13 @@ export const LinkDetail = (props) => {
           popout={props.popout}
           api={props.api}
         />
-        <Link className="dib f9 fw4 pt2 gray2 lh-solid" to="/~link">
-          {`<- ${title}`}
+        <Link className="dib f9 fw4 pt2 gray2 lh-solid"
+              to={`/~link/${resourcePath}`}>
+          <h2
+            className="dib f9 fw4 lh-solid v-top black white-d"
+            style={{ width: 'max-content' }}>
+            {`<- ${title}`}
+          </h2>
         </Link>
         <TabBar
           location={props.location}
diff --git a/pkg/interface/src/views/apps/links/components/link-list.js b/pkg/interface/src/views/apps/links/components/link-list.js
index b92b0407b..eb87d9d22 100644
--- a/pkg/interface/src/views/apps/links/components/link-list.js
+++ b/pkg/interface/src/views/apps/links/components/link-list.js
@@ -48,7 +48,11 @@ export const LinkList = (props) => {
           sidebarShown={props.sidebarShown}
           popout={props.popout}
           api={props.api} />
-        <h2 className='white-d dib f9 fw4 lh-solid v-top pt2'>{title}</h2>
+        <h2
+          className="dib f9 fw4 pt2 lh-solid v-top black white-d"
+          style={{ width: 'max-content' }}>
+          {title}
+        </h2>
         <TabBar
           location={props.location}
           popout={props.popout}
@@ -64,7 +68,7 @@ export const LinkList = (props) => {
               ship={props.ship}
               api={props.api} />
           </div>
-          { Array.from(props.graph.values()).map((node) => {
+          { Array.from(props.graph.values()).reverse().map((node) => {
               return (
                 <LinkItem
                   resource={resource}
diff --git a/pkg/interface/src/views/apps/links/components/settings.js b/pkg/interface/src/views/apps/links/components/settings.js
index c133ea0de..c17723a1c 100644
--- a/pkg/interface/src/views/apps/links/components/settings.js
+++ b/pkg/interface/src/views/apps/links/components/settings.js
@@ -143,7 +143,8 @@ export class SettingsScreen extends Component {
             popout={this.props.popout}
             api={this.props.api}
           />
-          <Link to="/~link" className="pt2">
+          <Link className="dib f9 fw4 pt2 gray2 lh-solid"
+                to={`/~link/${props.resourcePath}`}>
             <h2
               className="dib f9 fw4 lh-solid v-top"
               style={{ width: 'max-content' }}>
@@ -153,8 +154,8 @@ export class SettingsScreen extends Component {
           <TabBar
             location={props.location}
             popout={props.popout}
-            popoutHref={`/~link/popout/${props.resource}/settings`}
-            settings={`/~link/${props.resource}/settings`}
+            popoutHref={`/~link/popout/${props.resourcePath}/settings`}
+            settings={`/~link/${props.resourcePath}/settings`}
           />
           </div>
         <div className="w-100 pl3 mt4 cf">

From 1eef5ac05f18d2195ed4c36f8bc4310ed7218178 Mon Sep 17 00:00:00 2001
From: Logan Allen <loganallc@gmail.com>
Date: Thu, 24 Sep 2020 13:47:45 -0500
Subject: [PATCH 21/54] apps: fix issues with mark and remove unnecessary
 comments

---
 pkg/arvo/app/link-store.hoon   | 52 ----------------------------------
 pkg/arvo/mar/graph/update.hoon |  1 -
 2 files changed, 53 deletions(-)

diff --git a/pkg/arvo/app/link-store.hoon b/pkg/arvo/app/link-store.hoon
index 6dfcc4ab8..ee2367d7f 100644
--- a/pkg/arvo/app/link-store.hoon
+++ b/pkg/arvo/app/link-store.hoon
@@ -1,57 +1,5 @@
 ::  link [landscape]:
 ::
-::  social bookmarking
-::
-::    the paths under which links are submitted are generally expected to
-::    correspond to existing group paths. for strictly-local collections of
-::    links, arbitrary paths are probably fair game, but could trip up
-::    primitive ui implementations.
-::
-::    urls in paths are expected to be encoded using +wood, for @ta sanity.
-::    generally, use /lib/link's +build-discussion-path.
-::
-::    see link-listen-hook to see what's synced in, and similarly
-::    see link-proxy-hook to see what's exposed.
-::
-::  scry and subscription paths:
-::
-::      (map path pages)                      %local-pages
-::    /local-pages                          our saved pages
-::    /local-pages/some-path                our saved pages on path
-::
-::      (map path submissions)                %submissions
-::    /submissions                          all submissions we've seen
-::    /submissions/some-path                all submissions we've seen on path
-::
-::      (map path (map url notes))            %annotations
-::    /annotations                          our comments
-::    /annotations/wood-url                 our comments on url
-::    /annotations/wood-url/some-path       our comments on url on path
-::    /annotations//some-path               our comments on path
-::
-::      (map path (map url comments))         %discussions
-::    /discussions                          all comments
-::    /discussions/wood-url                 all comments on url
-::    /discussions/wood-url/some-path       all comments on url on path
-::    /discussions//some-path               all comments on path
-::
-::  subscription-only paths:
-::
-::      [path url]                            %observation
-::    /seen                                 updates whenever an item is seen
-::
-::  scry-only paths:
-::
-::
-::      (map path (set url))
-::    /unseen                               the ones we haven't seen yet
-::
-::      (set url)
-::    /unseen/some-path                     the ones we haven't seen here yet
-::
-::      ?
-::    /seen/wood-url/some-path              have we seen this here
-::
 /-  *link, gra=graph-store, *resource
 /+  store=link-store, graph-store, default-agent, verb, dbug
 ::
diff --git a/pkg/arvo/mar/graph/update.hoon b/pkg/arvo/mar/graph/update.hoon
index 4d8e1477e..1cd2a2068 100644
--- a/pkg/arvo/mar/graph/update.hoon
+++ b/pkg/arvo/mar/graph/update.hoon
@@ -5,7 +5,6 @@
   |%
   ++  noun  upd
   ++  json  (update:enjs upd)
-  ++  noun  upd
   --
 ::
 ++  grab

From 19b5d8cbfcb02c0946ed5518a29ca8159a04d1c9 Mon Sep 17 00:00:00 2001
From: Logan Allen <loganallc@gmail.com>
Date: Thu, 24 Sep 2020 14:59:15 -0500
Subject: [PATCH 22/54] interface: ported in Liam's graph-update reducer and
 threaded through some display parameters into LinkItem

---
 pkg/interface/src/logic/lib/OrderedMap.ts     | 22 +++++++++++++++
 .../src/logic/reducers/graph-update.js        | 28 ++++++++++---------
 pkg/interface/src/logic/store/store.ts        |  1 -
 pkg/interface/src/views/apps/links/app.js     |  1 +
 .../apps/links/components/lib/link-item.js    |  8 ++++--
 .../views/apps/links/components/link-list.js  |  9 ++++--
 6 files changed, 50 insertions(+), 19 deletions(-)
 create mode 100644 pkg/interface/src/logic/lib/OrderedMap.ts

diff --git a/pkg/interface/src/logic/lib/OrderedMap.ts b/pkg/interface/src/logic/lib/OrderedMap.ts
new file mode 100644
index 000000000..a640c2906
--- /dev/null
+++ b/pkg/interface/src/logic/lib/OrderedMap.ts
@@ -0,0 +1,22 @@
+
+export class OrderedMap<V> extends Map<number, V>
+  implements Iterable<[number, V]> {
+
+  [Symbol.iterator](): IterableIterator<[number, V]> {
+    const sorted = Array.from(super[Symbol.iterator]()).sort(
+      ([a], [b]) => b - a
+    );
+
+    let index = 0;
+    return {
+      [Symbol.iterator]: this[Symbol.iterator],
+      next: (): IteratorResult<[number, V]> => {
+        if (index < sorted.length) {
+          return { value: sorted[index++], done: false };
+        } else {
+          return { done: true, value: null };
+        }
+      },
+    };
+  }
+}
diff --git a/pkg/interface/src/logic/reducers/graph-update.js b/pkg/interface/src/logic/reducers/graph-update.js
index 5589e220c..00a5153a0 100644
--- a/pkg/interface/src/logic/reducers/graph-update.js
+++ b/pkg/interface/src/logic/reducers/graph-update.js
@@ -1,4 +1,5 @@
 import _ from 'lodash';
+import { OrderedMap } from "~/logic/lib/OrderedMap";
 
 
 export const GraphReducer = (json, state) => {
@@ -17,11 +18,6 @@ const keys = (json, state) => {
   if (data) {
     state.graphKeys = new Set(data.map((res) => {
       let resource = res.ship + '/' + res.name;
-
-      if (!(resource in state.graphs)) {
-        state.graphs[resource] = new Map();
-      }
-
       return resource;
     }));
   }
@@ -32,12 +28,12 @@ const addGraph = (json, state) => {
   const _processNode = (node) => {
     //  is empty
     if (!node.children) {
-      node.children = new Map();
+      node.children = new OrderedMap();
       return node;
     }
 
     //  is graph
-    let converted = new Map();
+    let converted = new OrderedMap();
     for (let i in node.children) {
       let item = node.children[i];
       let index = item[0].split('/').slice(1).map((ind) => {
@@ -62,7 +58,7 @@ const addGraph = (json, state) => {
     }
 
     let resource = data.resource.ship + '/' + data.resource.name;
-    state.graphs[resource] = new Map();
+    state.graphs[resource] = new OrderedMap();
 
     for (let i in data.graph) {
       let item = data.graph[i];
@@ -86,12 +82,19 @@ const removeGraph = (json, state) => {
     if (!('graphs' in state)) {
       state.graphs = {};
     }
-    let resource = data.ship + '/' + data.name;
+    let resource = data.resource.ship + '/' + data.resource.name;
     delete state.graphs[resource];
-    state.graphKeys.delete(resource);
   }
 };
 
+const mapifyChildren = (children) => {
+  return new OrderedMap(
+    children.map(([idx, node]) => {
+      const nd = {...node, children: mapifyChildren(node.children || []) }; 
+      return [parseInt(idx.slice(1), 10), nd];
+    }));
+};
+
 const addNodes = (json, state) => {
   const _addNode = (graph, index, node) => {
     //  set child of graph
@@ -128,8 +131,8 @@ const addNodes = (json, state) => {
 
       if (index.length === 0) { return; }
 
-      //  TODO: support adding nodes with children
-      item[1].children = new Map();
+      item[1].children = mapifyChildren(item[1].children || []);
+
       
       state.graphs[resource] = _addNode(
         state.graphs[resource],
@@ -167,4 +170,3 @@ const removeNodes = (json, state) => {
     });
   }
 };
-
diff --git a/pkg/interface/src/logic/store/store.ts b/pkg/interface/src/logic/store/store.ts
index aab7823db..3e02e25ac 100644
--- a/pkg/interface/src/logic/store/store.ts
+++ b/pkg/interface/src/logic/store/store.ts
@@ -43,7 +43,6 @@ export default class GlobalStore extends BaseStore<StoreState> {
     this.localReducer.dehydrate(this.state);
   }
 
-
   initialState(): StoreState {
     return {
       pendingMessages: new Map(),
diff --git a/pkg/interface/src/views/apps/links/app.js b/pkg/interface/src/views/apps/links/app.js
index 3994f7c5c..962ea1ac5 100644
--- a/pkg/interface/src/views/apps/links/app.js
+++ b/pkg/interface/src/views/apps/links/app.js
@@ -185,6 +185,7 @@ export default class LinksApp extends Component {
                 associations.graph[metPath] ?
                   associations.graph[metPath] : { metadata: {} };
               const popout = props.match.url.includes('/popout/');
+
               const contactDetails = contacts[resource['group-path']] || {};
 
               const indexArr = props.match.params.index.split('-');
diff --git a/pkg/interface/src/views/apps/links/components/lib/link-item.js b/pkg/interface/src/views/apps/links/components/lib/link-item.js
index 99223fe88..2f99cc3cd 100644
--- a/pkg/interface/src/views/apps/links/components/lib/link-item.js
+++ b/pkg/interface/src/views/apps/links/components/lib/link-item.js
@@ -8,6 +8,8 @@ export const LinkItem = (props) => {
   const {
     node,
     nickname,
+    color,
+    avatar,
     resource,
     hideAvatars,
     hideNicknames
@@ -18,14 +20,14 @@ export const LinkItem = (props) => {
   const size = node.children ? node.children.size : 0;
   const contents = node.post.contents;
 
-  const showAvatar = props.avatar && !hideAvatars;
+  const showAvatar = avatar && !hideAvatars;
   const showNickname = nickname && !hideNicknames;
 
   const mono = showNickname ? 'inter white-d' : 'mono white-d';
 
   const img = showAvatar
-    ? <img src={props.avatar} height={38} width={38} className="dib" />
-    : <Sigil ship={`~${author}`} size={38} color={'#' + props.color} />;
+    ? <img src={avatar} height={38} width={38} className="dib" />
+    : <Sigil ship={`~${author}`} size={38} color={'#' + color} />;
 
   return (
     <div className="w-100 pv3 flex bg-white bg-gray0-d lh-solid">
diff --git a/pkg/interface/src/views/apps/links/components/link-list.js b/pkg/interface/src/views/apps/links/components/link-list.js
index eb87d9d22..54adb00f1 100644
--- a/pkg/interface/src/views/apps/links/components/link-list.js
+++ b/pkg/interface/src/views/apps/links/components/link-list.js
@@ -68,12 +68,17 @@ export const LinkList = (props) => {
               ship={props.ship}
               api={props.api} />
           </div>
-          { Array.from(props.graph.values()).reverse().map((node) => {
+          { Array.from(props.graph.values()).map((node) => {
+              const { nickname, color, avatar } =
+                getContactDetails(props.contacts[ship]);
+
               return (
                 <LinkItem
                   resource={resource}
                   node={node}
-                  nickname={props.metadata.nickname}
+                  nickname={nickname}
+                  color={color}
+                  avatar={avatar}
                   hideAvatars={props.hideAvatars}
                   hideNicknames={props.hideNicknames}
                 />

From a1d5b68ba1f46ad0be29e6aa092b0d7fbace827c Mon Sep 17 00:00:00 2001
From: Liam Fitzgerald <liam@urizen.co>
Date: Fri, 25 Sep 2020 06:38:40 +1000
Subject: [PATCH 23/54] publish: use Row for NoteForm layout

---
 .../apps/publish/components/lib/NoteForm.tsx  | 20 ++++++++++---------
 1 file changed, 11 insertions(+), 9 deletions(-)

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 2b4ef3a27..651b3fafa 100644
--- a/pkg/interface/src/views/apps/publish/components/lib/NoteForm.tsx
+++ b/pkg/interface/src/views/apps/publish/components/lib/NoteForm.tsx
@@ -3,7 +3,7 @@ import * as Yup from "yup";
 import {
   Box,
   ManagedTextInputField as Input,
-  TwoUp,
+  Row,
   Col,
 } from "@tlon/indigo-react";
 import { AsyncButton } from "../../../../components/AsyncButton";
@@ -42,16 +42,18 @@ export function PostForm(props: PostFormProps) {
         validateOnBlur
       >
         <Form style={{ display: "contents" }}>
-          <TwoUp mb={4} gap={4}>
-            <Input
-              flexGrow={1}
-              placeholder="Post Title"
-              id="title"
-            />
-            <AsyncButton flexShrink={1} primary loadingText={loadingText}>
+          <Row flexDirection={["column-reverse", "row"]} mb={4} gapX={4}>
+            <Input flexGrow={1} placeholder="Post Title" id="title" />
+            <AsyncButton
+              ml={[0,2]}
+              mb={[4,0]}
+              flexShrink={1}
+              primary
+              loadingText={loadingText}
+            >
               {submitLabel}
             </AsyncButton>
-          </TwoUp>
+          </Row>
           <MarkdownField flexGrow={1} id="body" />
         </Form>
       </Formik>

From 528e4d345f90b283b00e8eee8ff7b5149da6cef4 Mon Sep 17 00:00:00 2001
From: Logan Allen <loganallc@gmail.com>
Date: Thu, 24 Sep 2020 16:48:23 -0500
Subject: [PATCH 24/54] interface: added oembeds and drag and drop back

---
 pkg/interface/src/views/apps/links/app.js     |   1 +
 .../apps/links/components/lib/link-preview.js |  28 +-
 .../apps/links/components/lib/link-submit.js  | 126 --------
 .../apps/links/components/lib/link-submit.tsx | 302 ++++++++++++++++++
 .../apps/links/components/link-detail.js      |   4 +-
 .../views/apps/links/components/link-list.js  |   5 +-
 6 files changed, 332 insertions(+), 134 deletions(-)
 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

diff --git a/pkg/interface/src/views/apps/links/app.js b/pkg/interface/src/views/apps/links/app.js
index 962ea1ac5..d6f9cad68 100644
--- a/pkg/interface/src/views/apps/links/app.js
+++ b/pkg/interface/src/views/apps/links/app.js
@@ -160,6 +160,7 @@ export default class LinksApp extends Component {
                   <LinkList
                     {...props}
                     api={api}
+                    s3={s3}
                     graph={graph}
                     graphResource={graphKeys.has(resourcePath)}
                     resourcePath={resourcePath}
diff --git a/pkg/interface/src/views/apps/links/components/lib/link-preview.js b/pkg/interface/src/views/apps/links/components/lib/link-preview.js
index 5992533e3..1bce933d9 100644
--- a/pkg/interface/src/views/apps/links/components/lib/link-preview.js
+++ b/pkg/interface/src/views/apps/links/components/lib/link-preview.js
@@ -1,21 +1,39 @@
 import React from 'react';
 import { cite } from '~/logic/lib/util';
+import RemoteContent from "~/views/components/RemoteContent";
+
 import moment from 'moment';
 
+
+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}/
+);
+
+
 export const LinkPreview = (props) => {
   const showNickname = props.nickname && !props.hideNicknames;
   const nameClass = showNickname ? 'inter' : 'mono';
-
   const author = props.post.author;
+  const title = props.post.contents[0].text;
+  const url = props.post.contents[1].url;
+  const hostname = URLparser.exec(url) ? URLparser.exec(url)[4] : null;
+
   const timeSent = 
     moment.unix(props.post['time-sent'] / 1000).format('hh:mm a');
 
-  const title = props.post.contents[0].text;
-  const url = props.post.contents[1].url;
-
+  const embed = (
+    <RemoteContent
+      unfold={true}
+      renderUrl={false}
+      url={url}
+      remoteContentPolicy={props.remoteContentPolicy}
+      className="mw-100"
+    />
+  );
 
   return (
     <div className="pb6 w-100">
+      <div className='w-100 tc'>{embed}</div>
       <div className="flex flex-column ml2 pt6 flex-auto">
         <a href={url}
            className="w-100 flex"
@@ -23,7 +41,7 @@ export const LinkPreview = (props) => {
            rel="noopener noreferrer">
           <p className="f8 truncate">{title}</p>
           <span className="gray2 ml2 f8 dib v-btm flex-shrink-0">
-            {url} ↗
+            {hostname} ↗
           </span>
         </a>
         <div className="w-100 pt1">
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 e76756d0e..000000000
--- a/pkg/interface/src/views/apps/links/components/lib/link-submit.js
+++ /dev/null
@@ -1,126 +0,0 @@
-import React, { Component } from 'react';
-import { Spinner } from '~/views/components/Spinner';
-import { createPost } from '~/logic/api/graph';
-
-
-export class LinkSubmit extends Component {
-  constructor() {
-    super();
-    this.state = {
-      linkValue: '',
-      linkTitle: '',
-      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;
-
-    const parentIndex = this.props.parentIndex || '';
-    let post = createPost([
-      { text: title },
-      { url: link }
-    ], parentIndex);
-
-    this.setState({ disabled: true }, () => {
-      this.props.api.graph.addPost(
-        `~${this.props.ship}`,
-        this.props.name,
-        post
-      ).then((r) => {
-        this.setState({
-          disabled: false,
-          linkValue: '',
-          linkTitle: '',
-        });
-      });
-    });
-  }
-
-  setLinkValue(event) {
-    this.setState({ linkValue: event.target.value });
-  }
-
-  setLinkTitle(event) {
-    this.setState({ linkTitle: event.target.value });
-  }
-
-  render() {
-    const activeClasses = (!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
-          }}
-          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}
-        />
-        <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();
-            }
-          }}
-          value={this.state.linkTitle}
-        />
-        <button
-          className={
-            'absolute bg-gray0-d f8 ml2 flex-shrink-0 ' + activeClasses
-          }
-          disabled={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..." />
-      </div>
-    );
-  }
-}
-
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 000000000..0396f5bbc
--- /dev/null
+++ b/pkg/interface/src/views/apps/links/components/lib/link-submit.tsx
@@ -0,0 +1,302 @@
+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';
+
+import { createPost } from '~/logic/api/graph';
+
+
+interface LinkSubmitProps {
+  api: GlobalApi;
+  s3: S3State;
+  name: string;
+  ship: string;
+}
+
+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 });
+
+    const parentIndex = this.props.parentIndex || '';
+    let post = createPost([
+      { text: title },
+      { url: link }
+    ], parentIndex);
+
+    this.props.api.graph.addPost(
+      `~${this.props.ship}`,
+      this.props.name,
+      post
+    ).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';
+
+    console.log(this.props.s3);
+
+    const isS3Ready =
+      ( this.props.s3.secretAccessKey &&
+        this.props.s3.endpoint &&
+        this.props.s3.accessKeyId 
+      );
+
+    return (
+      <div
+        className={`relative ba br1 w-100 mb6 ${focus}`}
+        onDragEnter={this.onDragEnter.bind(this)}
+        onDragOver={e => {
+          e.preventDefault();
+          if (isS3Ready) {
+            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 : (
+              isS3Ready ? (
+                <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>
+              ) : (
+                <span className="gray2 absolute pl2 pt3 pb2 f8"
+                      style={{pointerEvents: 'none'}}>
+                  Paste a link here
+                </span>
+              )
+            )
+          }
+          {!this.state.disabled && isS3Ready ? <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/apps/links/components/link-detail.js b/pkg/interface/src/views/apps/links/components/link-detail.js
index b4e2d9b6f..df69a8077 100644
--- a/pkg/interface/src/views/apps/links/components/link-detail.js
+++ b/pkg/interface/src/views/apps/links/components/link-detail.js
@@ -70,7 +70,9 @@ export const LinkDetail = (props) => {
             post={props.node.post}
             nickname={nickname}
             hideNicknames={props.hideNicknames}
-            commentNumber={props.node.children.size} />
+            commentNumber={props.node.children.size} 
+            remoteContentPolicy={props.remoteContentPolicy}
+          />
           <div className="flex">
             <CommentSubmit
               name={props.name}
diff --git a/pkg/interface/src/views/apps/links/components/link-list.js b/pkg/interface/src/views/apps/links/components/link-list.js
index 54adb00f1..4ac2ecc6b 100644
--- a/pkg/interface/src/views/apps/links/components/link-list.js
+++ b/pkg/interface/src/views/apps/links/components/link-list.js
@@ -4,7 +4,7 @@ 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';
-import { LinkSubmit } from './lib/link-submit';
+import LinkSubmit from './lib/link-submit';
 
 import { getContactDetails } from '~/logic/lib/util';
 
@@ -66,7 +66,8 @@ export const LinkList = (props) => {
             <LinkSubmit
               name={props.name}
               ship={props.ship}
-              api={props.api} />
+              api={props.api}
+              s3={props.s3} />
           </div>
           { Array.from(props.graph.values()).map((node) => {
               const { nickname, color, avatar } =

From 0496ef963ef787ba07afffa14c1723b8f4d90c7e Mon Sep 17 00:00:00 2001
From: Matilde Park <matilde@tlon.io>
Date: Thu, 24 Sep 2020 18:09:01 -0400
Subject: [PATCH 25/54] interface: add cursor css to tabs

---
 pkg/interface/src/views/components/Tab.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/pkg/interface/src/views/components/Tab.tsx b/pkg/interface/src/views/components/Tab.tsx
index d6ee66e9d..869c923c1 100644
--- a/pkg/interface/src/views/components/Tab.tsx
+++ b/pkg/interface/src/views/components/Tab.tsx
@@ -7,6 +7,7 @@ export const Tab = ({ selected, id, label, setSelected }) => (
     borderBottom={1}
     borderBottomColor={selected === id ? "black" : "washedGray"}
     px={2}
+    cursor='pointer'
     flexGrow={1}
     display="flex"
     alignItems="center"

From 88b43ccaa8d81f897e7c68105f454d4c9ba796cd Mon Sep 17 00:00:00 2001
From: Matilde Park <matilde@tlon.io>
Date: Thu, 24 Sep 2020 18:09:21 -0400
Subject: [PATCH 26/54] interface: fix flexbox for groupView button layout

---
 pkg/interface/src/views/components/Group.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/pkg/interface/src/views/components/Group.tsx b/pkg/interface/src/views/components/Group.tsx
index af1be6c46..b5e9d6fd5 100644
--- a/pkg/interface/src/views/components/Group.tsx
+++ b/pkg/interface/src/views/components/Group.tsx
@@ -25,16 +25,16 @@ class GroupMember extends Component<{ ship: Patp; options: any[] }, {}> {
 
     return (
       <div className='flex justify-between f9 items-center'>
-        <div className='flex flex-column'>
+        <div className='flex flex-column flex-shrink-0'>
           <Text mono mr='2'>{`${cite(ship)}`}</Text>
           {children}
         </div>
         {options.length > 0 && (
           <Menu>
-            <MenuButton sm>Options</MenuButton>
+            <MenuButton width='min-content'>Options</MenuButton>
             <MenuList>
               {options.map(({ onSelect, text }) => (
-                <MenuItem onSelect={onSelect}>{text}</MenuItem>
+                <MenuItem onSelect={onSelect}><Text fontsize='0'>{text}</Text></MenuItem>
               ))}
             </MenuList>
           </Menu>

From 73da90d866a83ce1d4680639335cc3550907ac46 Mon Sep 17 00:00:00 2001
From: Matilde Park <matilde@tlon.io>
Date: Thu, 24 Sep 2020 18:10:47 -0400
Subject: [PATCH 27/54] publish: set max width on new note title input

---
 .../src/views/apps/publish/components/lib/NoteForm.tsx        | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

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 651b3fafa..efcc457fd 100644
--- a/pkg/interface/src/views/apps/publish/components/lib/NoteForm.tsx
+++ b/pkg/interface/src/views/apps/publish/components/lib/NoteForm.tsx
@@ -42,8 +42,8 @@ export function PostForm(props: PostFormProps) {
         validateOnBlur
       >
         <Form style={{ display: "contents" }}>
-          <Row flexDirection={["column-reverse", "row"]} mb={4} gapX={4}>
-            <Input flexGrow={1} placeholder="Post Title" id="title" />
+          <Row flexDirection={["column-reverse", "row"]} mb={4} gapX={4} justifyContent='space-between'>
+            <Input maxWidth='40rem' flexGrow={1} placeholder="Post Title" id="title" />
             <AsyncButton
               ml={[0,2]}
               mb={[4,0]}

From 0362f37c48db4f86bab9c0b12d42d0e3aba4b514 Mon Sep 17 00:00:00 2001
From: Liam Fitzgerald <liam@urizen.co>
Date: Fri, 25 Sep 2020 08:19:23 +1000
Subject: [PATCH 28/54] link: iterate over OrderedMap correctly

---
 pkg/interface/src/views/apps/links/components/lib/comments.js | 2 +-
 pkg/interface/src/views/apps/links/components/link-list.js    | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

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 0a216ecdc..9d5ac9401 100644
--- a/pkg/interface/src/views/apps/links/components/lib/comments.js
+++ b/pkg/interface/src/views/apps/links/components/lib/comments.js
@@ -13,7 +13,7 @@ export const Comments = (props) => {
 
   return (
     <div>
-      { Array.from(props.comments.values()).map((comment) => {
+      { Array.from(props.comments).map(([date, comment]) => {
           const { nickname, color, member, avatar } =
             getContactDetails(contacts[comment.post.author]);
 
diff --git a/pkg/interface/src/views/apps/links/components/link-list.js b/pkg/interface/src/views/apps/links/components/link-list.js
index 4ac2ecc6b..8595dcd96 100644
--- a/pkg/interface/src/views/apps/links/components/link-list.js
+++ b/pkg/interface/src/views/apps/links/components/link-list.js
@@ -69,7 +69,7 @@ export const LinkList = (props) => {
               api={props.api}
               s3={props.s3} />
           </div>
-          { Array.from(props.graph.values()).map((node) => {
+          { Array.from(props.graph).map(([date, node]) => {
               const { nickname, color, avatar } =
                 getContactDetails(props.contacts[ship]);
 

From 7498b6d0cbb671b5fbbb64dad8748cdab982c946 Mon Sep 17 00:00:00 2001
From: Logan Allen <loganallc@gmail.com>
Date: Thu, 24 Sep 2020 17:19:54 -0500
Subject: [PATCH 29/54] link-listen-hook: silently discard %behn %wake

---
 pkg/arvo/app/link-listen-hook.hoon | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/pkg/arvo/app/link-listen-hook.hoon b/pkg/arvo/app/link-listen-hook.hoon
index b9cd26266..0d8dc59b4 100644
--- a/pkg/arvo/app/link-listen-hook.hoon
+++ b/pkg/arvo/app/link-listen-hook.hoon
@@ -36,9 +36,15 @@
   ^-  card
   [%pass wire %agent [ship term] %leave ~]
 ::
+++  on-arvo
+  |=  [=wire =sign-arvo]
+  ^-  (quip card _this)
+  ?+  sign-arvo  (on-arvo:def wire sign-arvo)
+      [%b *]     [~ this]
+  ==
+::
 ++  on-agent  on-agent:def
 ++  on-poke   on-poke:def
-++  on-arvo   on-arvo:def
 ++  on-peek   on-peek:def
 ++  on-watch  on-watch:def
 ++  on-leave  on-leave:def

From 41267a25f13e8ce0b3b45c4f39ca0bf1ca24ef85 Mon Sep 17 00:00:00 2001
From: Matilde Park <matilde@tlon.io>
Date: Thu, 24 Sep 2020 18:32:30 -0400
Subject: [PATCH 30/54] links: pass remoteContentPolicy to pending comment

Avoids a page crash when commenting a YouTube link.
---
 .../src/views/apps/links/components/lib/comments.js          | 4 +++-
 pkg/interface/src/views/apps/links/components/link-detail.js | 5 +++--
 2 files changed, 6 insertions(+), 3 deletions(-)

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 9d5ac9401..ab1858a70 100644
--- a/pkg/interface/src/views/apps/links/components/lib/comments.js
+++ b/pkg/interface/src/views/apps/links/components/lib/comments.js
@@ -6,7 +6,8 @@ import { getContactDetails } from '~/logic/lib/util';
 export const Comments = (props) => {
   const {
     hideNicknames,
-    hideAvatars
+    hideAvatars,
+    remoteContentPolicy
   } = props;
 
   const contacts = props.contacts ? props.contacts : {};
@@ -30,6 +31,7 @@ export const Comments = (props) => {
               member={member}
               hideNicknames={hideNicknames}
               hideAvatars={hideAvatars}
+              remoteContentPolicy={remoteContentPolicy}
             />
           );
         })
diff --git a/pkg/interface/src/views/apps/links/components/link-detail.js b/pkg/interface/src/views/apps/links/components/link-detail.js
index df69a8077..ea1f37607 100644
--- a/pkg/interface/src/views/apps/links/components/link-detail.js
+++ b/pkg/interface/src/views/apps/links/components/link-detail.js
@@ -70,7 +70,7 @@ export const LinkDetail = (props) => {
             post={props.node.post}
             nickname={nickname}
             hideNicknames={props.hideNicknames}
-            commentNumber={props.node.children.size} 
+            commentNumber={props.node.children.size}
             remoteContentPolicy={props.remoteContentPolicy}
           />
           <div className="flex">
@@ -87,7 +87,8 @@ export const LinkDetail = (props) => {
             popout={props.popout}
             api={props.api}
             hideAvatars={props.hideAvatars}
-            hideNicknames={props.hideNicknames} />
+            hideNicknames={props.hideNicknames}
+            remoteContentPolicy={props.remoteContentPolicy} />
         </div>
       </div>
     </div>

From 75e65573d31437f5c523ae4934962933a10f1eb5 Mon Sep 17 00:00:00 2001
From: Matilde Park <matilde@tlon.io>
Date: Thu, 24 Sep 2020 18:53:49 -0400
Subject: [PATCH 31/54] links: link-item retains hostname detection

---
 .../apps/links/components/lib/link-item.js    | 36 +++++++++++--------
 1 file changed, 21 insertions(+), 15 deletions(-)

diff --git a/pkg/interface/src/views/apps/links/components/lib/link-item.js b/pkg/interface/src/views/apps/links/components/lib/link-item.js
index 2f99cc3cd..ec6af53e2 100644
--- a/pkg/interface/src/views/apps/links/components/lib/link-item.js
+++ b/pkg/interface/src/views/apps/links/components/lib/link-item.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React from 'react';
 
 import { Sigil } from '~/logic/lib/sigil';
 import { Link } from 'react-router-dom';
@@ -15,10 +15,15 @@ export const LinkItem = (props) => {
     hideNicknames
   } = props;
 
+  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 author = node.post.author;
   const index = node.post.index.split('/').join('-');
   const size = node.children ? node.children.size : 0;
   const contents = node.post.contents;
+  const hostname = URLparser.exec(contents[1].url) ? URLparser.exec(contents[1].url)[4] : null;
 
   const showAvatar = avatar && !hideAvatars;
   const showNickname = nickname && !hideNicknames;
@@ -30,28 +35,29 @@ export const LinkItem = (props) => {
     : <Sigil ship={`~${author}`} size={38} color={'#' + color} />;
 
   return (
-    <div className="w-100 pv3 flex bg-white bg-gray0-d lh-solid">
+    <div className='w-100 pv3 flex bg-white bg-gray0-d lh-solid'>
       {img}
-      <div className="flex flex-column ml2 flex-auto">
-        <a href={contents[1].url}
-           className="w-100 flex"
-           target="_blank"
-           rel="noopener noreferrer">
-          <p className="f8 truncate">{props.title}</p>
-          <span className="gray2 dib v-btm ml2 f8 flex-shrink-0">
-            {contents[0].text} ↗
+      <div className='flex flex-column ml2 flex-auto'>
+        <a
+          href={contents[1].url}
+          className='w-100 flex'
+          target='_blank'
+          rel='noopener noreferrer'>
+          <p className='f8 truncate'>{contents[0].text}</p>
+          <span className='gray2 ml2 f8 dib v-btm flex-shrink-0'>
+            {hostname} ↗
           </span>
         </a>
-        <div className="w-100">
-          <span className={'f9 pr2 pl2 dib ' + mono} title={author}>
-            { showNickname ? nickname : cite(author) }
+        <div className='w-100'>
+          <span className={'f9 pr2 white-d dib ' + mono} title={author}>
+            {showNickname ? props.nickname : cite(author)}
           </span>
           <Link to={`/~link/${resource}/${index}`}>
-            <span className="f9 inter gray2 dib">{size} comments</span>
+            <span className='f9 inter gray2 dib'>{size} comments</span>
           </Link>
         </div>
       </div>
     </div>
   );
-}
+};
 

From 744232eef1af9d63592f1320124151bffe1f622b Mon Sep 17 00:00:00 2001
From: Matilde Park <matilde@tlon.io>
Date: Thu, 24 Sep 2020 18:59:26 -0400
Subject: [PATCH 32/54] links: all inputs use gray2

---
 .../views/apps/links/components/lib/link-submit.tsx    | 10 +++++-----
 pkg/interface/src/views/apps/links/css/custom.css      |  4 ++++
 2 files changed, 9 insertions(+), 5 deletions(-)

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
index 0396f5bbc..3a55b7442 100644
--- a/pkg/interface/src/views/apps/links/components/lib/link-submit.tsx
+++ b/pkg/interface/src/views/apps/links/components/lib/link-submit.tsx
@@ -188,7 +188,7 @@ export class LinkSubmit extends Component<LinkSubmitProps, LinkSubmitState> {
     const isS3Ready =
       ( this.props.s3.secretAccessKey &&
         this.props.s3.endpoint &&
-        this.props.s3.accessKeyId 
+        this.props.s3.accessKeyId
       );
 
     return (
@@ -206,7 +206,7 @@ export class LinkSubmit extends Component<LinkSubmitProps, LinkSubmitState> {
       >
         {this.state.dragover ? <SubmitDragger /> : null}
         <div className="relative">
-          { 
+          {
             ( this.state.linkValue ||
               this.state.urlFocus ||
               this.state.disabled
@@ -260,7 +260,7 @@ export class LinkSubmit extends Component<LinkSubmitProps, LinkSubmitState> {
         </div>
           <input
             type="text"
-            className="pl2 bg-transparent w-100 f8 white-d"
+            className="pl2 bg-transparent w-100 f8 white-d linkTitle"
             style={{
               resize: 'none',
               height: 40
@@ -292,8 +292,8 @@ export class LinkSubmit extends Component<LinkSubmitProps, LinkSubmitState> {
             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>
     ) ;
   }
diff --git a/pkg/interface/src/views/apps/links/css/custom.css b/pkg/interface/src/views/apps/links/css/custom.css
index f405be9ff..6c6906fd2 100644
--- a/pkg/interface/src/views/apps/links/css/custom.css
+++ b/pkg/interface/src/views/apps/links/css/custom.css
@@ -6,6 +6,10 @@
   padding-bottom: 56.25%;
 }
 
+.linkTitle::placeholder {
+  color: #7f7f7f;
+}
+
 .links.embed-container iframe, .links.embed-container object, .links.embed-container embed {
   position: absolute;
   top: 0;

From 999f8025f5daec087a6eed7b3bb48e736252e129 Mon Sep 17 00:00:00 2001
From: Matilde Park <matilde@tlon.io>
Date: Thu, 24 Sep 2020 19:06:25 -0400
Subject: [PATCH 33/54] links: fix s3 detection

All props are nested in 'credentials', so it would always return false
---
 .../src/views/apps/links/components/lib/link-submit.tsx   | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

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
index 3a55b7442..f00287fa6 100644
--- a/pkg/interface/src/views/apps/links/components/lib/link-submit.tsx
+++ b/pkg/interface/src/views/apps/links/components/lib/link-submit.tsx
@@ -183,12 +183,10 @@ export class LinkSubmit extends Component<LinkSubmitProps, LinkSubmitState> {
       ? 'b--black b--white-d'
       : 'b--gray4 b--gray2-d';
 
-    console.log(this.props.s3);
-
     const isS3Ready =
-      ( this.props.s3.secretAccessKey &&
-        this.props.s3.endpoint &&
-        this.props.s3.accessKeyId
+      ( this.props.s3.credentials.secretAccessKey &&
+        this.props.s3.credentials.endpoint &&
+        this.props.s3.credentials.accessKeyId
       );
 
     return (

From 7237132e9aa8673a13e787fe74a19239793c1848 Mon Sep 17 00:00:00 2001
From: Ted Blackman <ted@tlon.io>
Date: Thu, 24 Sep 2020 20:03:07 -0400
Subject: [PATCH 34/54] link-store: fix migration bugs

---
 pkg/arvo/app/link-store.hoon | 27 +++++++++++++++++++++------
 1 file changed, 21 insertions(+), 6 deletions(-)

diff --git a/pkg/arvo/app/link-store.hoon b/pkg/arvo/app/link-store.hoon
index ee2367d7f..86a82e372 100644
--- a/pkg/arvo/app/link-store.hoon
+++ b/pkg/arvo/app/link-store.hoon
@@ -5,7 +5,7 @@
 ::
 |%
 +$  state-any  $%(state-1 state-0)
-+$  state-1  [%1 ~]
++$  state-1  [%1 cards=(list card)]
 +$  state-0
   $:  %0
       by-group=(map path links)
@@ -44,9 +44,15 @@
 ++  on-load
   |=  old=vase
   ^-  (quip card _this)
+  ::
   =/  s  !<(state-any old)
   ?:  ?=(%1 -.s)
     [~ this(state s)]
+  ::  defer card emission to later event
+  ::
+  =;  [cards=(list card) that=_this]
+    :_  that(state [%1 cards])
+    [%pass /load %arvo %b %wait now.bowl]~
   ::
   :_  this(state *state-1)
   =/  orm  orm:graph-store
@@ -55,9 +61,9 @@
   %+  turn  ~(tap by by-group.s)
   |=  [=path =links]
   ^-  (list card)
-  ?.  ?=([@ @ *] path)
+  ?.  ?=([@ ~] path)
     (on-bad-path path links)
-  =/  =resource  [(slav %p i.path) i.t.path]
+  =/  =resource  [our.bowl i.path]
   :_  [(archive-graph resource)]~
   %+  add-graph  resource
   ^-  graph:gra
@@ -101,7 +107,7 @@
   ++  on-bad-path
     |=  [=path =links]
     ^-  (list card)
-    ~|  discarding-malformed-links+[path links]
+    ~&  discarding-malformed-links+[path links]
     ~
   ::
   ++  add-graph
@@ -124,11 +130,20 @@
     ==
   --
 ::
-++  on-poke   on-poke:def
+++  on-poke   ::on-poke:def
+  |=  [=mark =vase]
+  ^-  (quip card _this)
+  [cards.state this]
 ++  on-peek   on-peek:def
 ++  on-watch  on-watch:def
 ++  on-leave  on-leave:def
 ++  on-agent  on-agent:def
-++  on-arvo   on-arvo:def
+++  on-arvo
+  |=  [=wire =sign-arvo]
+  ^-  (quip card _this)
+  ?+    sign-arvo  (on-arvo:def wire sign-arvo)
+      [%b %wake *]
+    [cards.state this]
+  ==
 ++  on-fail   on-fail:def
 --

From 95cf1aaf58979b16a04232c8074f4cb89dd024a4 Mon Sep 17 00:00:00 2001
From: Matilde Park <matilde@tlon.io>
Date: Thu, 24 Sep 2020 20:05:25 -0400
Subject: [PATCH 35/54] leap: refer to module when indexing graph data

---
 pkg/interface/src/logic/lib/omnibox.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/pkg/interface/src/logic/lib/omnibox.js b/pkg/interface/src/logic/lib/omnibox.js
index ee616ddc9..731471239 100644
--- a/pkg/interface/src/logic/lib/omnibox.js
+++ b/pkg/interface/src/logic/lib/omnibox.js
@@ -103,6 +103,10 @@ export default function index(associations, apps) {
           app = 'groups';
         };
 
+        if (each['app-name'] === 'graph') {
+          app = each.metadata.module;
+        }
+
         const shipStart = each['app-path'].substr(each['app-path'].indexOf('~'));
 
         if (app === 'groups') {

From cec014fa96b55e5b2ea480ee5e1224fb7d9ac384 Mon Sep 17 00:00:00 2001
From: Logan Allen <loganallc@gmail.com>
Date: Thu, 24 Sep 2020 19:08:52 -0500
Subject: [PATCH 36/54] interface: last tweaks

---
 pkg/arvo/app/link-store.hoon                           |  5 +----
 pkg/interface/src/logic/api/metadata.ts                |  5 +++--
 .../src/views/apps/chat/components/settings.js         |  1 +
 .../views/apps/groups/components/lib/group-detail.js   |  3 ++-
 .../src/views/apps/links/components/settings.js        |  1 +
 .../src/views/components/metadata/settings.js          | 10 +++++++---
 6 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/pkg/arvo/app/link-store.hoon b/pkg/arvo/app/link-store.hoon
index 86a82e372..adcb9e695 100644
--- a/pkg/arvo/app/link-store.hoon
+++ b/pkg/arvo/app/link-store.hoon
@@ -130,10 +130,7 @@
     ==
   --
 ::
-++  on-poke   ::on-poke:def
-  |=  [=mark =vase]
-  ^-  (quip card _this)
-  [cards.state this]
+++  on-poke   on-poke:def
 ++  on-peek   on-peek:def
 ++  on-watch  on-watch:def
 ++  on-leave  on-leave:def
diff --git a/pkg/interface/src/logic/api/metadata.ts b/pkg/interface/src/logic/api/metadata.ts
index 216485ec6..2a099fee3 100644
--- a/pkg/interface/src/logic/api/metadata.ts
+++ b/pkg/interface/src/logic/api/metadata.ts
@@ -5,7 +5,7 @@ import { Path, Patp } from '~/types/noun';
 
 export default class MetadataApi extends BaseApi<StoreState> {
 
-  metadataAdd(appName: string, appPath: Path, groupPath: Path, title: string, description: string, dateCreated: string, color: string) {
+  metadataAdd(appName: string, appPath: Path, groupPath: Path, title: string, description: string, dateCreated: string, color: string, moduleName: string) {
     const creator = `~${this.ship}`;
     return this.metadataAction({
       add: {
@@ -19,7 +19,8 @@ export default class MetadataApi extends BaseApi<StoreState> {
           description,
           color,
           'date-created': dateCreated,
-          creator
+          creator,
+          'module': moduleName
         }
       }
     });
diff --git a/pkg/interface/src/views/apps/chat/components/settings.js b/pkg/interface/src/views/apps/chat/components/settings.js
index 74d39c15a..fdcaceb28 100644
--- a/pkg/interface/src/views/apps/chat/components/settings.js
+++ b/pkg/interface/src/views/apps/chat/components/settings.js
@@ -98,6 +98,7 @@ export class SettingsScreen extends Component {
           association={association}
           resource="chat"
           app="chat"
+          module=""
         />
         <Spinner
           awaiting={this.state.awaiting}
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 e3013ccc2..4b14b4aa0 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
@@ -281,7 +281,8 @@ export class GroupDetail extends Component {
                       this.state.title,
                       association.metadata.description,
                       association.metadata['date-created'],
-                      uxToHex(association.metadata.color)
+                      uxToHex(association.metadata.color),
+                      ''
                     ).then(() => {
                       this.setState({ awaiting: false });
                     });
diff --git a/pkg/interface/src/views/apps/links/components/settings.js b/pkg/interface/src/views/apps/links/components/settings.js
index c17723a1c..01d5389c2 100644
--- a/pkg/interface/src/views/apps/links/components/settings.js
+++ b/pkg/interface/src/views/apps/links/components/settings.js
@@ -169,6 +169,7 @@ export class SettingsScreen extends Component {
             association={props.resource}
             resource="collection"
             app="graph"
+            module="link"
           />
           <Spinner
             awaiting={this.state.awaiting}
diff --git a/pkg/interface/src/views/components/metadata/settings.js b/pkg/interface/src/views/components/metadata/settings.js
index 86c64d66e..0055cafe5 100644
--- a/pkg/interface/src/views/components/metadata/settings.js
+++ b/pkg/interface/src/views/components/metadata/settings.js
@@ -12,7 +12,8 @@ export const MetadataSettings = (props) => {
     changeLoading,
     api,
     resource,
-    app
+    app,
+    module
   } = props;
 
   const title =
@@ -41,6 +42,7 @@ export const MetadataSettings = (props) => {
               val,
               association.metadata.description,
               association.metadata['date-created'],
+              module
               uxToHex(association.metadata.color)
             ).then(() => {
               changeLoading(false, false, '', () => {});
@@ -61,7 +63,8 @@ export const MetadataSettings = (props) => {
                 association.metadata.title,
                 val,
                 association.metadata['date-created'],
-                uxToHex(association.metadata.color)
+                uxToHex(association.metadata.color),
+                module
               ).then(() => {
                 changeLoading(false, false, '', () => {});
               });
@@ -80,7 +83,8 @@ export const MetadataSettings = (props) => {
               association.metadata.title,
               association.metadata.description,
               association.metadata['date-created'],
-              val
+              val,
+              module
             ).then(() => {
               changeLoading(false, false, '', () => {});
             });

From d48772e309262195a927217b3a95e3b344fe4388 Mon Sep 17 00:00:00 2001
From: Matilde Park <matilde@tlon.io>
Date: Thu, 24 Sep 2020 20:16:50 -0400
Subject: [PATCH 37/54] interface: fixing syntax error in metadata settings

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

diff --git a/pkg/interface/src/views/components/metadata/settings.js b/pkg/interface/src/views/components/metadata/settings.js
index 0055cafe5..c93f2bde0 100644
--- a/pkg/interface/src/views/components/metadata/settings.js
+++ b/pkg/interface/src/views/components/metadata/settings.js
@@ -42,7 +42,7 @@ export const MetadataSettings = (props) => {
               val,
               association.metadata.description,
               association.metadata['date-created'],
-              module
+              module,
               uxToHex(association.metadata.color)
             ).then(() => {
               changeLoading(false, false, '', () => {});

From 6506390238af672504faff2e95c857916bcb9668 Mon Sep 17 00:00:00 2001
From: Matilde Park <matilde@tlon.io>
Date: Thu, 24 Sep 2020 20:19:22 -0400
Subject: [PATCH 38/54] leap: fix react-routing to links

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

diff --git a/pkg/interface/src/views/components/leap/Omnibox.js b/pkg/interface/src/views/components/leap/Omnibox.js
index bedbee1dc..0ecb29b9b 100644
--- a/pkg/interface/src/views/components/leap/Omnibox.js
+++ b/pkg/interface/src/views/components/leap/Omnibox.js
@@ -117,7 +117,7 @@ export class Omnibox extends Component {
     const { props } = this;
     this.setState({ results: this.initialResults(), query: '' }, () => {
       props.api.local.setOmnibox();
-      if (defaultApps.includes(app.toLowerCase()) || app === 'profile') {
+      if (defaultApps.includes(app.toLowerCase()) || app === 'profile' || app === 'Links') {
         props.history.push(link);
       } else {
         window.location.href = link;

From c373d57d23a528a084801d577860a9c2124323cd Mon Sep 17 00:00:00 2001
From: Liam Fitzgerald <liam@urizen.co>
Date: Fri, 25 Sep 2020 10:37:09 +1000
Subject: [PATCH 39/54] graph: subscribe to keys globally

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

diff --git a/pkg/interface/src/logic/subscription/global.ts b/pkg/interface/src/logic/subscription/global.ts
index 8a07dde07..b9e18eb54 100644
--- a/pkg/interface/src/logic/subscription/global.ts
+++ b/pkg/interface/src/logic/subscription/global.ts
@@ -28,7 +28,6 @@ const groupSubscriptions: AppSubscription[] = [
 ];
 
 const graphSubscriptions: AppSubscription[] = [
-  ['/keys', 'graph-store'],
   ['/updates', 'graph-store']
 ];
 
@@ -58,6 +57,7 @@ export default class GlobalSubscription extends BaseSubscription<StoreState> {
     this.subscribe('/all', 's3-store');
     this.subscribe('/all', 'launch');
     this.subscribe('/all', 'weather');
+    this.subscribe('/keys', 'graph-store');
   }
 
   restart() {

From 6af438f1f1544f348093d3d88f7f05dd1ffab0dd Mon Sep 17 00:00:00 2001
From: Liam Fitzgerald <liam@urizen.co>
Date: Fri, 25 Sep 2020 10:37:32 +1000
Subject: [PATCH 40/54] graph: handle already joined case

---
 pkg/interface/src/logic/lib/omnibox.js    | 3 ++-
 pkg/interface/src/views/apps/graph/app.js | 6 +++++-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/pkg/interface/src/logic/lib/omnibox.js b/pkg/interface/src/logic/lib/omnibox.js
index 731471239..94b23f177 100644
--- a/pkg/interface/src/logic/lib/omnibox.js
+++ b/pkg/interface/src/logic/lib/omnibox.js
@@ -120,7 +120,8 @@ export default function index(associations, apps) {
         } else {
           const obj = result(
             title,
-            `/~${each['app-name']}/join${each['app-path']}`,
+            `/~${each['app-name']}/join${each['app-path']}${
+              (each.metadata.module && '/' + each.metadata.module) || ''}`,
             app.charAt(0).toUpperCase() + app.slice(1),
             (associations?.contacts?.[each['group-path']]?.metadata?.title || null)
           );
diff --git a/pkg/interface/src/views/apps/graph/app.js b/pkg/interface/src/views/apps/graph/app.js
index 5eb3db923..bfe47dc91 100644
--- a/pkg/interface/src/views/apps/graph/app.js
+++ b/pkg/interface/src/views/apps/graph/app.js
@@ -44,8 +44,12 @@ export default class GraphApp extends PureComponent {
                 setTimeout(autoJoin, 2000);
               }
             };
-            autoJoin();
 
+            if(!graphKeys.has(resource)) {
+              autoJoin();
+            } else if(props.match.params.module) {
+              props.history.push(`/~${props.match.params.module}/${resource}`);
+            }
             return (
               <Center width="100%" height="100%">
                 <Text fontSize={1}>Redirecting...</Text>

From 898b3adeb581bf60339a87fed97f867a7a480475 Mon Sep 17 00:00:00 2001
From: Liam Fitzgerald <liam@urizen.co>
Date: Fri, 25 Sep 2020 10:59:12 +1000
Subject: [PATCH 41/54] publish: fix new notebook on mobile screen sizes

---
 .../src/views/apps/publish/components/lib/Sidebar.tsx        | 2 +-
 pkg/interface/src/views/apps/publish/components/skeleton.tsx | 5 ++++-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/pkg/interface/src/views/apps/publish/components/lib/Sidebar.tsx b/pkg/interface/src/views/apps/publish/components/lib/Sidebar.tsx
index 9add01baa..efbfffeb6 100644
--- a/pkg/interface/src/views/apps/publish/components/lib/Sidebar.tsx
+++ b/pkg/interface/src/views/apps/publish/components/lib/Sidebar.tsx
@@ -96,7 +96,7 @@ export function Sidebar(props: any) {
     );
   }
 
-  const display = props.path ? ['none', 'block'] : 'block';
+  const display = props.hidden ? ['none', 'block'] : 'block';
 
   return (
     <Col
diff --git a/pkg/interface/src/views/apps/publish/components/skeleton.tsx b/pkg/interface/src/views/apps/publish/components/skeleton.tsx
index b8d9fa877..cac1bf61d 100644
--- a/pkg/interface/src/views/apps/publish/components/skeleton.tsx
+++ b/pkg/interface/src/views/apps/publish/components/skeleton.tsx
@@ -89,7 +89,9 @@ export function Skeleton(props: SkeletonProps) {
     }, 1500);
   }, [noteId, notebook, ship, notebooks])
 
-  const panelDisplay = !path ? ["none", "block"] : "block";
+  const hideSidebar = path || props.location.pathname.endsWith('/new')
+
+  const panelDisplay = !hideSidebar ? ["none", "block"] : "block";
   return (
     <Box height="100%" width="100%" px={[0, 3]} pb={[0, 3]}>
       <Box
@@ -105,6 +107,7 @@ export function Skeleton(props: SkeletonProps) {
           notebooks={props.notebooks}
           contacts={props.contacts}
           path={path}
+          hidden={hideSidebar}
           invites={props.invites}
           associations={props.associations}
           api={props.api}

From 98acf2ee70722d10e542958f068ff7959ce0efc0 Mon Sep 17 00:00:00 2001
From: Matilde Park <matilde.park@sunshinegardens.org>
Date: Thu, 24 Sep 2020 21:21:05 -0400
Subject: [PATCH 42/54] glob: update to 0v6.5vpjh.iofq9.lseb0.1e4c8.2p7fo

---
 bin/solid.pill                    | 4 ++--
 pkg/arvo/app/glob.hoon            | 2 +-
 pkg/arvo/app/landscape/index.html | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/bin/solid.pill b/bin/solid.pill
index 693b79266..dc8bb15a8 100644
--- a/bin/solid.pill
+++ b/bin/solid.pill
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:06808af2c089441d2cb497fc95e3292b6229b3dfa034272d46c7c41f34eb6a3b
-size 6268465
+oid sha256:94a29366b074d54e45ca611afee71b20627c54f608452af4eddf8825f5d3cf9c
+size 6235040
diff --git a/pkg/arvo/app/glob.hoon b/pkg/arvo/app/glob.hoon
index 115dc036c..ca2e8d05d 100644
--- a/pkg/arvo/app/glob.hoon
+++ b/pkg/arvo/app/glob.hoon
@@ -5,7 +5,7 @@
 /-  glob
 /+  default-agent, verb, dbug
 |%
-++  hash  0v3.u1ets.ipgbo.eo23m.md70h.djpj0
+++  hash  0v6.5vpjh.iofq9.lseb0.1e4c8.2p7fo
 +$  state-0  [%0 hash=@uv glob=(unit (each glob:glob tid=@ta))]
 +$  all-states
   $%  state-0
diff --git a/pkg/arvo/app/landscape/index.html b/pkg/arvo/app/landscape/index.html
index 455706b60..85238d82a 100644
--- a/pkg/arvo/app/landscape/index.html
+++ b/pkg/arvo/app/landscape/index.html
@@ -23,7 +23,7 @@
     <div id="root"></div>
     <script src="/~landscape/js/channel.js"></script>
     <script src="/~landscape/js/session.js"></script>
-    <script src="/~landscape/js/bundle/index.df81e597349a655b83f2.js"></script>
+    <script src="/~landscape/js/bundle/index.44d6526272e0af8d1bd5.js"></script>
     <script src="https://sdk.amazonaws.com/js/aws-sdk-2.1.12.min.js"></script>
   </body>
 </html>

From 577192ce119b15c9418bf3a2103fb52bbe822b99 Mon Sep 17 00:00:00 2001
From: Liam Fitzgerald <liam@urizen.co>
Date: Fri, 25 Sep 2020 12:07:03 +1000
Subject: [PATCH 43/54] links: fix broken Input import

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

diff --git a/pkg/interface/src/views/apps/links/components/new.tsx b/pkg/interface/src/views/apps/links/components/new.tsx
index 78ea51e95..c474954ac 100644
--- a/pkg/interface/src/views/apps/links/components/new.tsx
+++ b/pkg/interface/src/views/apps/links/components/new.tsx
@@ -1,6 +1,6 @@
 import React, { useCallback } from "react";
 import { RouteComponentProps } from "react-router-dom";
-import { Box, Input, Col } from "@tlon/indigo-react";
+import { Box, ManagedTextInputField as Input, Col } from "@tlon/indigo-react";
 import { Formik, Form } from "formik";
 import * as Yup from "yup";
 
@@ -69,7 +69,7 @@ export function NewScreen(props: object) {
           <Box
             display="grid"
             gridTemplateRows="auto"
-            gridRowGap={2}
+            gridRowGap={4}
             gridTemplateColumns="300px">
             <Input
               id="name"

From f4d75ad74dddf4703a1319b1fa47f401efd87a93 Mon Sep 17 00:00:00 2001
From: Liam Fitzgerald <liam@urizen.co>
Date: Fri, 25 Sep 2020 12:07:21 +1000
Subject: [PATCH 44/54] graph: add restore thread

---
 pkg/arvo/ted/graph/restore.hoon | 37 +++++++++++++++++++++++++++++++++
 1 file changed, 37 insertions(+)
 create mode 100644 pkg/arvo/ted/graph/restore.hoon

diff --git a/pkg/arvo/ted/graph/restore.hoon b/pkg/arvo/ted/graph/restore.hoon
new file mode 100644
index 000000000..33cf02dc0
--- /dev/null
+++ b/pkg/arvo/ted/graph/restore.hoon
@@ -0,0 +1,37 @@
+/-  spider, graph=graph-store, *metadata-store, *group, group-store
+/+  strandio, resource, graph-view
+=>
+|% 
+++  strand  strand:spider
+++  poke  poke:strandio
+++  poke-our   poke-our:strandio
+--
+=,  strand=strand:spider
+^-  thread:spider
+|=  arg=vase
+=/  m  (strand ,vase)
+^-  form:m
+=+  !<([rid=resource title=@t description=@t group=resource module=@t ~] arg)
+;<  =bowl:spider  bind:m  get-bowl:strandio
+::  unarchive graph and share it
+;<  ~  bind:m
+  (poke-our %graph-store %graph-update !>([%0 now.bowl %unarchive-graph rid]))
+;<  ~  bind:m
+  (poke-our %graph-push-hook %push-hook-action !>([%add rid]))
+::
+::  Setup metadata
+::
+=/  =metadata
+  %*  .  *metadata
+    title         title
+    description   description
+    date-created  now.bowl
+    creator       our.bowl
+    module        module
+  ==
+=/  act=metadata-action
+  [%add (en-path:resource group) graph+(en-path:resource rid) metadata]
+;<  ~  bind:m  (poke-our %metadata-hook %metadata-action !>(act))
+;<  ~  bind:m
+  (poke-our %metadata-hook %metadata-hook-action !>([%add-owned (en-path:resource group)]))
+(pure:m !>(~))

From 4fad47d1513e7e65bc76331fa24c3bfb0c26fa97 Mon Sep 17 00:00:00 2001
From: Matilde Park <matilde.park@sunshinegardens.org>
Date: Thu, 24 Sep 2020 22:17:49 -0400
Subject: [PATCH 45/54] glob: update to 0v4.6aspk.m4l21.aha5i.79git.eu8bv

---
 bin/solid.pill                    | 4 ++--
 pkg/arvo/app/glob.hoon            | 2 +-
 pkg/arvo/app/landscape/index.html | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/bin/solid.pill b/bin/solid.pill
index dc8bb15a8..dfc73793b 100644
--- a/bin/solid.pill
+++ b/bin/solid.pill
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:94a29366b074d54e45ca611afee71b20627c54f608452af4eddf8825f5d3cf9c
-size 6235040
+oid sha256:5b632629f515ac203f2bd796e914825631ea69b3ad64f81072075f9c4fcfec24
+size 6236161
diff --git a/pkg/arvo/app/glob.hoon b/pkg/arvo/app/glob.hoon
index ca2e8d05d..5ffeab535 100644
--- a/pkg/arvo/app/glob.hoon
+++ b/pkg/arvo/app/glob.hoon
@@ -5,7 +5,7 @@
 /-  glob
 /+  default-agent, verb, dbug
 |%
-++  hash  0v6.5vpjh.iofq9.lseb0.1e4c8.2p7fo
+++  hash  0v4.6aspk.m4l21.aha5i.79git.eu8bv
 +$  state-0  [%0 hash=@uv glob=(unit (each glob:glob tid=@ta))]
 +$  all-states
   $%  state-0
diff --git a/pkg/arvo/app/landscape/index.html b/pkg/arvo/app/landscape/index.html
index 85238d82a..24c8fba89 100644
--- a/pkg/arvo/app/landscape/index.html
+++ b/pkg/arvo/app/landscape/index.html
@@ -23,7 +23,7 @@
     <div id="root"></div>
     <script src="/~landscape/js/channel.js"></script>
     <script src="/~landscape/js/session.js"></script>
-    <script src="/~landscape/js/bundle/index.44d6526272e0af8d1bd5.js"></script>
+    <script src="/~landscape/js/bundle/index.9434b770c96703512531.js"></script>
     <script src="https://sdk.amazonaws.com/js/aws-sdk-2.1.12.min.js"></script>
   </body>
 </html>

From f77522755dc20bd1392e9bf160f2b0bf3edc9caa Mon Sep 17 00:00:00 2001
From: Liam Fitzgerald <liam@urizen.co>
Date: Fri, 25 Sep 2020 16:21:29 +1000
Subject: [PATCH 46/54] metadata-store: rebuild indices

The OTA deployment of urbit-os-v1.0.50 unintentionally wiped the indices
during the state migration. This caused widespread permissions issues,
as agents were unable to tell which group is associated with what channel.
Fortunately, the indices are a simple transform of the associations noun,
which was kept intact. This commit introduces a state migration to rebuild
the indices, in order to restore connectivity on the network.
---
 pkg/arvo/app/metadata-store.hoon | 54 ++++++++++++++++++++++++++++++--
 1 file changed, 52 insertions(+), 2 deletions(-)

diff --git a/pkg/arvo/app/metadata-store.hoon b/pkg/arvo/app/metadata-store.hoon
index 3421a3622..af0ffe2e7 100644
--- a/pkg/arvo/app/metadata-store.hoon
+++ b/pkg/arvo/app/metadata-store.hoon
@@ -55,15 +55,17 @@
 +$  state-1   [%1 base-state-0]
 +$  state-2   [%2 base-state-0]
 +$  state-3   [%3 base-state-1]
++$  state-4   [%4 base-state-1]
 +$  versioned-state
   $%  state-0
       state-1
       state-2
       state-3
+      state-4
   ==
 --
 ::
-=|  state-3
+=|  state-4
 =*  state  -
 %+  verb  |
 %-  agent:dbug
@@ -82,8 +84,21 @@
     =/  old  !<(versioned-state vase)
     =|  cards=(list card)
     |^
-    ?:  ?=(%3 -.old)
+    ?:  ?=(%4 -.old)
       [cards this(state old)]
+    ?:  ?=(%3 -.old)
+      %_    $
+        -.old  %4
+        ::
+          resource-indices.old
+        (rebuild-resource-indices associations.old)
+        ::
+          app-indices.old
+        (rebuild-app-indices associations.old)
+        ::
+          group-indices.old
+        (rebuild-group-indices associations.old)
+      ==
     ?:  ?=(%2 -.old)
       =/  new-state=state-3
         %*  .  *state-3
@@ -119,6 +134,41 @@
       ==
     $(old new-state-1)
     ::
+    ++  rebuild-app-indices
+      =|  app-indices=(jug app-name [group-path app-path])
+      |=  =^associations
+      ^-  (jug app-name [group-path app-path])
+      ?~  associations  app-indices
+      =.  app-indices
+        %+  ~(put ju app-indices)  app-name.p.n.associations
+        [-.p.n.associations app-path.p.n.associations]
+      %-  ~(uni by $(associations l.associations))
+      $(associations r.associations)
+    ::
+    ++  rebuild-group-indices
+      =|  group-indices=(jug group-path md-resource)
+      |=  =^associations
+      ^-  (jug group-path md-resource)
+      ?~  associations  group-indices
+      =.  group-indices
+        %+  ~(put ju group-indices)  
+          -.p.n.associations 
+        +.p.n.associations
+      %-  ~(uni by $(associations l.associations))
+      $(associations r.associations)
+    ::
+    ++  rebuild-resource-indices
+      =|  resource-indices=(jug md-resource group-path)
+      |=  =^associations
+      ^-  (jug md-resource group-path)
+      ?~  associations  resource-indices
+      =.  resource-indices
+        %+  ~(put ju resource-indices)  
+          +.p.n.associations
+        -.p.n.associations
+      %-  ~(uni by $(associations l.associations)) 
+      $(associations r.associations)
+    ::
     ++  poke-md-hook
       |=  act=metadata-hook-action
       ^-  card

From e5c3c5263ff896498ba65a759dd70a682bcfe9f4 Mon Sep 17 00:00:00 2001
From: Fang <git@fang.io>
Date: Fri, 25 Sep 2020 11:20:06 +0200
Subject: [PATCH 47/54] glob: update to 0v5.6e3d0.3hm4q.iib09.rb2jb.9h4k4

---
 bin/solid.pill                    | 4 ++--
 pkg/arvo/app/glob.hoon            | 2 +-
 pkg/arvo/app/landscape/index.html | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/bin/solid.pill b/bin/solid.pill
index dfc73793b..5dcec501e 100644
--- a/bin/solid.pill
+++ b/bin/solid.pill
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:5b632629f515ac203f2bd796e914825631ea69b3ad64f81072075f9c4fcfec24
-size 6236161
+oid sha256:eab360913b845f8775002cfe1830defcd252b490ac90e8dfa093297b56531392
+size 19090656
diff --git a/pkg/arvo/app/glob.hoon b/pkg/arvo/app/glob.hoon
index 5ffeab535..32d69c083 100644
--- a/pkg/arvo/app/glob.hoon
+++ b/pkg/arvo/app/glob.hoon
@@ -1,7 +1,7 @@
 ::  glob [landscape]:
 ::
 ::  prompts content delivery and Gall state storage for Landscape JS blob
-::
+++  hash  0v5.6e3d0.3hm4q.iib09.rb2jb.9h4k4
 /-  glob
 /+  default-agent, verb, dbug
 |%
diff --git a/pkg/arvo/app/landscape/index.html b/pkg/arvo/app/landscape/index.html
index 24c8fba89..3a6208048 100644
--- a/pkg/arvo/app/landscape/index.html
+++ b/pkg/arvo/app/landscape/index.html
@@ -23,7 +23,7 @@
     <div id="root"></div>
     <script src="/~landscape/js/channel.js"></script>
     <script src="/~landscape/js/session.js"></script>
-    <script src="/~landscape/js/bundle/index.9434b770c96703512531.js"></script>
+    <script src="/~landscape/js/bundle/index.9f00eb9b1c58d2b1bd3c.js"></script>
     <script src="https://sdk.amazonaws.com/js/aws-sdk-2.1.12.min.js"></script>
   </body>
 </html>

From 9efa389e5ae3ed679a52653fc536524e2d0c6461 Mon Sep 17 00:00:00 2001
From: Fang <git@fang.io>
Date: Fri, 25 Sep 2020 11:31:17 +0200
Subject: [PATCH 48/54] glob: update hash correctly

---
 pkg/arvo/app/glob.hoon | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/pkg/arvo/app/glob.hoon b/pkg/arvo/app/glob.hoon
index 32d69c083..4d3b3f172 100644
--- a/pkg/arvo/app/glob.hoon
+++ b/pkg/arvo/app/glob.hoon
@@ -1,11 +1,11 @@
 ::  glob [landscape]:
 ::
 ::  prompts content delivery and Gall state storage for Landscape JS blob
-++  hash  0v5.6e3d0.3hm4q.iib09.rb2jb.9h4k4
+::
 /-  glob
 /+  default-agent, verb, dbug
 |%
-++  hash  0v4.6aspk.m4l21.aha5i.79git.eu8bv
+++  hash  0v5.6e3d0.3hm4q.iib09.rb2jb.9h4k4
 +$  state-0  [%0 hash=@uv glob=(unit (each glob:glob tid=@ta))]
 +$  all-states
   $%  state-0

From d576c9479f0d135362a33e05db7c42f61dc069e0 Mon Sep 17 00:00:00 2001
From: pkova <pyry.kovanen@gmail.com>
Date: Fri, 25 Sep 2020 14:11:40 +0300
Subject: [PATCH 49/54] dojo: parse %as in ++parse-value instead of
 ++parse-build

Allows things like `+hello &helm-hi 'hi'`. Fixes #1476.
---
 pkg/arvo/app/dojo.hoon | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/pkg/arvo/app/dojo.hoon b/pkg/arvo/app/dojo.hoon
index da42334f2..2716c009f 100644
--- a/pkg/arvo/app/dojo.hoon
+++ b/pkg/arvo/app/dojo.hoon
@@ -218,7 +218,6 @@
         ;~(plug (cold %ur lus) parse-url)
         ;~(plug (cold %ge lus) parse-model)
         ;~(plug (cold %te hep) sym (star ;~(pfix ace parse-source)))
-        ;~(plug (cold %as pad) sym ;~(pfix ace parse-source))
         ;~(plug (cold %do cab) parse-hoon ;~(pfix ace parse-source))
         parse-value
       ==
@@ -284,6 +283,7 @@
     ==
   ++  parse-value
     ;~  pose
+      ;~(plug (cold %as pad) sym ;~(pfix ace parse-source))
       (stag %sa ;~(pfix tar pad sym))
       (stag %ex parse-hoon)
       (stag %tu (ifix [lac rac] (most ace parse-source)))

From f6b2a45c625dadaabedd7f9967e840080d640e5d Mon Sep 17 00:00:00 2001
From: Logan Allen <loganallc@gmail.com>
Date: Fri, 25 Sep 2020 14:18:26 -0500
Subject: [PATCH 50/54] chat-hook: send invites to all unsubscribed members of
 unmanaged chats

---
 pkg/arvo/app/chat-hook.hoon | 29 +++++++++++++++++++++++++++--
 1 file changed, 27 insertions(+), 2 deletions(-)

diff --git a/pkg/arvo/app/chat-hook.hoon b/pkg/arvo/app/chat-hook.hoon
index e6aa7e2e5..ed7b55140 100644
--- a/pkg/arvo/app/chat-hook.hoon
+++ b/pkg/arvo/app/chat-hook.hoon
@@ -22,8 +22,10 @@
       state-5
       state-6
       state-7
+      state-8
   ==
 ::
++$  state-8  [%8 state-base]
 +$  state-7  [%7 state-base]
 +$  state-6  [%6 state-base]
 +$  state-5  [%5 state-base]
@@ -54,7 +56,7 @@
   $%  [%chat-update update:store]
   ==
 --
-=|  state-7
+=|  state-8
 =*  state  -
 ::
 %-  agent:dbug
@@ -83,8 +85,31 @@
     =/  old  !<(versioned-state old-vase)
     =|  cards=(list card)
     |-
-    ?:  ?=(%7 -.old)
+    ?:  ?=(%8 -.old)
       [cards this(state old)]
+    ?:  ?=(%7 -.old)
+      =/  subscribers=(jug path ship)
+        %+  roll  ~(val by sup.bol)
+        |=  [[=ship =path] out=(jug path ship)]
+        ::  /(mailbox|backlog)/~ship/resource.name
+        ::
+        ?.  ?=([@ @ @ *] path)  out
+        =/  pax=^path  [i.t.path i.t.t.path ~]
+        (~(put ju out) pax ship)
+      =.  cards
+        %+  weld  cards
+        ^-  (list card)
+        %+  murn  ~(tap by subscribers)
+        |=  [=path ships=(set ship)]
+        ^-  (unit card)
+        ?>  ?=([@ @ ~] path)
+        =/  group-path  (group-from-chat:cc path)
+        =/  members     (members-from-path:grp group-path)
+        ?:  (is-managed-path:grp group-path)  ~
+        %-  some
+        =+  [%invite t.path (~(dif in members) ships)]
+        [%pass /inv %agent [our.bol %chat-view] %poke %chat-view-action !>(-)]
+      $(-.old %8)
     ?:  ?=(%6 -.old)
       =.  cards
         %+  weld  cards

From e17e508379fac7b87a331f15d47bdd72aeec6dbf Mon Sep 17 00:00:00 2001
From: Logan Allen <loganallc@gmail.com>
Date: Fri, 25 Sep 2020 14:44:24 -0500
Subject: [PATCH 51/54] chat-hook: fix, test, and ensure sending invite works

---
 pkg/arvo/app/chat-hook.hoon | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/pkg/arvo/app/chat-hook.hoon b/pkg/arvo/app/chat-hook.hoon
index ed7b55140..34beffd77 100644
--- a/pkg/arvo/app/chat-hook.hoon
+++ b/pkg/arvo/app/chat-hook.hoon
@@ -96,18 +96,20 @@
         ?.  ?=([@ @ @ *] path)  out
         =/  pax=^path  [i.t.path i.t.t.path ~]
         (~(put ju out) pax ship)
+      =/  group  ~(. grpl bol)
       =.  cards
         %+  weld  cards
         ^-  (list card)
-        %+  murn  ~(tap by subscribers)
-        |=  [=path ships=(set ship)]
+        %+  murn  ~(tap in ~(key by synced.old))
+        |=  =path
         ^-  (unit card)
         ?>  ?=([@ @ ~] path)
         =/  group-path  (group-from-chat:cc path)
-        =/  members     (members-from-path:grp group-path)
-        ?:  (is-managed-path:grp group-path)  ~
+        =/  members     (members-from-path:group group-path)
+        ?:  (is-managed-path:group group-path)  ~
+        =/  ships=(set ship)  (~(get ju subscribers) path)
         %-  some
-        =+  [%invite t.path (~(dif in members) ships)]
+        =+  [%invite path (~(dif in members) ships)]
         [%pass /inv %agent [our.bol %chat-view] %poke %chat-view-action !>(-)]
       $(-.old %8)
     ?:  ?=(%6 -.old)

From 3636a5b646a7066d2ca953dc22db2036ab33050e Mon Sep 17 00:00:00 2001
From: Tyler Brown Cifu Shuster <tyler@fivepaths.com>
Date: Fri, 25 Sep 2020 15:55:57 -0700
Subject: [PATCH 52/54] links: prevents title from being overwritten

---
 .../src/views/apps/links/components/lib/link-submit.tsx       | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

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
index f00287fa6..7d53bd30d 100644
--- a/pkg/interface/src/views/apps/links/components/lib/link-submit.tsx
+++ b/pkg/interface/src/views/apps/links/components/lib/link-submit.tsx
@@ -98,11 +98,11 @@ export class LinkSubmit extends Component<LinkSubmitProps, LinkSubmitState> {
         fetch(`https://noembed.com/embed?url=${linkValue}`)
         .then(response => response.json())
         .then((result) => {
-          if (result.title) {
+          if (result.title && !this.state.linkTitle) {
             this.setState({ linkTitle: result.title });
           }
         }).catch((error) => {/*noop*/});
-      } else {
+      } else if (!this.state.linkTitle) {
         this.setState({
           linkTitle: decodeURIComponent(linkValue
             .split('/')

From ff3dd549ef944a40acad7a70d100faccb778d4ec Mon Sep 17 00:00:00 2001
From: Tyler Brown Cifu Shuster <tyler@fivepaths.com>
Date: Fri, 25 Sep 2020 16:13:29 -0700
Subject: [PATCH 53/54] interface: open dev server to network

---
 pkg/interface/config/webpack.dev.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/pkg/interface/config/webpack.dev.js b/pkg/interface/config/webpack.dev.js
index e2cb44ea4..c3cb8e2f3 100644
--- a/pkg/interface/config/webpack.dev.js
+++ b/pkg/interface/config/webpack.dev.js
@@ -44,6 +44,8 @@ let devServer = {
   contentBase: path.join(__dirname, '../dist'),
   hot: true,
   port: 9000,
+  host: '0.0.0.0',
+  disableHostCheck: true,
   historyApiFallback: true
 };
 

From 26a3a1761cf3af1bb91f123b8f9b535c792d831f Mon Sep 17 00:00:00 2001
From: Tyler Brown Cifu Shuster <tyler@fivepaths.com>
Date: Mon, 28 Sep 2020 12:32:53 -0700
Subject: [PATCH 54/54] landscape: increase z-index of dropdown search

fixes #3583
---
 pkg/interface/src/views/components/DropdownSearch.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/pkg/interface/src/views/components/DropdownSearch.tsx b/pkg/interface/src/views/components/DropdownSearch.tsx
index 598aad795..94c3c4b8f 100644
--- a/pkg/interface/src/views/components/DropdownSearch.tsx
+++ b/pkg/interface/src/views/components/DropdownSearch.tsx
@@ -128,7 +128,7 @@ export function DropdownSearch<C>(props: DropdownSearchProps<C>) {
   );
 
   return (
-    <Box position="relative">
+    <Box position="relative" zIndex={9}>
       <Label htmlFor={props.id}>{props.label}</Label>
       {caption ? <Label mt="2" gray>{caption}</Label> : null}
       {!props.disabled && (