Merge branch 'release/next-js' into james/image-input

bin/solid.pill

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:abc163491b53cc9d48a70ea378dde8bb455648e3f6e7f57a0c7a8e164d4ca105
+oid sha256:accbadc701471f6b071ed286164a0bf4d3f8a2e64cfaea9019e123bd9edca569
-size 10226599
+size 10292454

pkg/arvo/app/glob.hoon

@@ -5,7 +5,7 @@
 /-  glob
 /+  default-agent, verb, dbug
 |%
-++  hash  0v2i7ds.j99ka.5dpja.pef1e.b04e0
+++  hash  0v4.7tk5q.9ha4l.tbmji.fvkno.s9pfq
 +$  state-0  [%0 hash=@uv glob=(unit (each glob:glob tid=@ta))]
 +$  all-states
   $%  state-0

pkg/arvo/app/graph-store.hoon

@@ -46,19 +46,8 @@
       %0  
     %_    $
       -.old  %1
-    ::
+      cards  cards
-        validators.old
+      validators.old  validators.old
-      (~(put in validators.old) %graph-validator-link)
-    ::
-        cards
-      %+  weld  cards
-      %+  turn
-        ~(tap in (~(put in validators.old) %graph-validator-link))
-      |=  validator=@t
-      ^-  card
-      =/  =wire  /validator/[validator]
-      =/  =rave:clay  [%sing %b [%da now.bowl] /[validator]]
-      [%pass wire %arvo %c %warp our.bowl [%home `rave]]
     ::
         graphs.old
       %-  ~(run by graphs.old)
@@ -285,19 +274,10 @@
               graphs       (~(put by graphs) resource [graph mark])
               update-logs  (~(put by update-logs) resource update-log)
               archive      (~(del by archive) resource)
-            ::
-              validators
-            ?~  mark  validators
-            (~(put in validators) u.mark)
           ==
       %-  zing
       :~  (give [/keys ~] %keys (~(put in ~(key by graphs)) resource))
           (give [/updates ~] %add-graph resource *graph:store mark overwrite)
-          ?~  mark  ~
-          ?:  (~(has in validators) u.mark)  ~
-          =/  wire  /validator/[u.mark]
-          =/  =rave:clay  [%sing %b [%da now.bowl] /[u.mark]]
-          [%pass wire %arvo %c %warp our.bowl [%home `rave]]~
       ==
     ::
     ++  remove-graph
@@ -1119,13 +1099,8 @@
   ?+  wire  (on-arvo:def wire sign-arvo)
   ::
   ::  old wire, do nothing 
-      [%graph *]  [~ this]
+      [%graph *]        [~ this]
-  ::
+      [%validator @ ~]  [~ this]
-      [%validator @ ~]
-    :_  this
-    =*  validator  i.t.wire
-    =/  =rave:clay  [%next %b [%da now.bowl] /[validator]]
-    [%pass wire %arvo %c %warp our.bowl [%home `rave]]~
   ::
       [%try-rejoin @ *]
     =/  rid=resource:store  (de-path:res t.t.wire)

pkg/arvo/app/landscape/index.html

@@ -24,6 +24,6 @@
     <div id="portal-root"></div>
     <script src="/~landscape/js/channel.js"></script>
     <script src="/~landscape/js/session.js"></script>
-    <script src="/~landscape/js/bundle/index.3a0ba646997cd338b513.js"></script>
+    <script src="/~landscape/js/bundle/index.857da0dbc92427b1460b.js"></script>
   </body>
 </html>

pkg/arvo/app/observe-hook.hoon

@@ -14,6 +14,7 @@
       [%2 observers=(map serial observer:sur)]
       [%3 observers=(map serial observer:sur)]
       [%4 observers=(map serial observer:sur)]
+      [%5 observers=(map serial observer:sur) warm-cache=_|]
   ==
 ::
 +$  serial   @uv
@@ -27,7 +28,7 @@
 --
 ::
 %-  agent:dbug
-=|  [%4 observers=(map serial observer:sur)]
+=|  [%5 observers=(map serial observer:sur) warm-cache=_|]
 =*  state  -
 ::
 ^-  agent:gall
@@ -42,6 +43,7 @@
       (act [%watch %group-store /groups %group-on-leave])
       (act [%watch %group-store /groups %group-on-remove-member])
       (act [%watch %metadata-store /updates %md-on-add-group-feed])
+      (act [%warm-cache-all ~])
   ==
   ::
   ++  act
@@ -66,8 +68,13 @@
   =|  cards=(list card)
   |-
   ?-  -.old-state
-      %4
+      %5
     [cards this(state old-state)]
+      %4
+    =.  cards
+      :_  cards
+      (act [%warm-cache-all ~])
+    $(old-state [%5 observers.old-state %.n])
   ::
       %3
     =.  cards
@@ -110,11 +117,19 @@
   ?>  (team:title our.bowl src.bowl)
   ?.  ?=(%observe-action mark)
     (on-poke:def mark vase)
+  |^
   =/  =action:sur  !<(action:sur vase)
   =*  observer  observer.action
   =/  vals  (silt ~(val by observers))
   ?-  -.action
-      %watch
+    %watch           (watch observer vals)
+    %ignore          (ignore observer vals)
+    %warm-cache-all  warm-cache-all
+    %cool-cache-all  cool-cache-all
+  ==
+  ::
+  ++  watch
+    |=  [=observer:sur vals=(set observer:sur)]
     ?:  ?|(=(app.observer %spider) =(app.observer %observe-hook)) 
       ~|('we avoid infinite loops' !!)
     ?:  (~(has in vals) observer)
@@ -129,7 +144,8 @@
         path.observer
     == 
   ::
-      %ignore
+  ++  ignore
+    |=  [=observer:sur vals=(set observer:sur)]
     ?.  (~(has in vals) observer)
       ~|('cannot remove nonexistent observer' !!)
     =/  key  (got-by-val observers observer)
@@ -142,7 +158,19 @@
         %leave
         ~
     == 
-  ==
+  ::
+  ++  warm-cache-all
+    ?:  warm-cache
+      ~|('cannot warm up cache that is already warm' !!)
+    :_  this(warm-cache %.y)
+    =/  =rave:clay  [%sing [%t da+now.bowl /mar]]
+    [%pass /warm-cache %arvo %c %warp our.bowl %home `rave]~
+  ::
+  ++  cool-cache-all
+    ?.  warm-cache
+      ~|('cannot cool down cache that is already cool' !!)
+    [~ this(warm-cache %.n)]
+  --
 ::
 ++  on-agent
   |=  [=wire =sign:agent:gall]
@@ -260,9 +288,48 @@
     ==  == 
   --
 ::
+++  on-arvo
+  |=  [=wire =sign-arvo]
+  ^-  (quip card _this)
+  :_  this
+  ?+    wire  (on-arvo:def wire sign-arvo)
+      [%warm-cache ~]
+    ?.  warm-cache
+      ~
+    ?>  ?=([%clay %writ *] sign-arvo)
+    =*  riot  p.sign-arvo
+    ?~  riot
+      =/  =rave:clay  [%next [%t da+now.bowl /mar]]
+      [%pass /warm-cache %arvo %c %warp our.bowl %home `rave]~
+    :-  =/  =rave:clay  [%next [%t q.p.u.riot /mar]]
+        [%pass /warm-cache %arvo %c %warp our.bowl %home `rave]
+    %+  turn  !<((list path) q.r.u.riot)
+    |=  pax=path
+    ^-  card
+    =.  pax  (snip (slag 1 pax))
+    =/  mark=@ta
+      %+  roll  pax
+      |=  [=term mark=term]
+      ?:  ?=(%$ mark)
+        term
+      :((cury cat 3) mark '-' term)
+    =/  =rave:clay  [%sing %b da+now.bowl /[mark]]
+    [%pass [%mar mark ~] %arvo %c %warp our.bowl %home `rave]
+  ::
+      [%mar ^]
+    ?.  warm-cache
+      ~
+    ?>  ?=([%clay %writ *] sign-arvo)
+    =*  riot  p.sign-arvo
+    =*  mark  t.wire
+    ?~  riot
+      ~
+    =/  =rave:clay  [%next %b q.p.u.riot mark]
+    [%pass wire %arvo %c %warp our.bowl %home `rave]~
+  ==
+::
 ++  on-watch  on-watch:def
 ++  on-leave  on-leave:def
 ++  on-peek   on-peek:def
-++  on-arvo   on-arvo:def
 ++  on-fail   on-fail:def
 --

pkg/arvo/sur/observe-hook.hoon

@@ -1,7 +1,14 @@
 |%
 +$  observer  [app=term =path thread=term]
 +$  action
-  $%  [%watch =observer]
+  $%  ::  %gall actions
+      ::
+      [%watch =observer]
       [%ignore =observer]
+    ::
+      ::  %clay actions
+      ::
+      [%warm-cache-all ~]
+      [%cool-cache-all ~]
   ==
 --

pkg/arvo/ted/gcp/is-configured.hoon

@@ -6,7 +6,6 @@
 /-  gcp, spider, settings
 /+  strandio
 =,  strand=strand:spider
-=,  enjs:format
 ^-  thread:spider
 |^
 |=  *
@@ -22,7 +21,7 @@
   ==
 %-  pure:m
 !>
-%+  frond  %gcp-configured
+^-  json
 b+has
 ::
 ++  has-settings

pkg/interface/package-lock.json

@@ -1783,36 +1783,30 @@
       "dependencies": {
         "@babel/runtime": {
           "version": "7.12.5",
-          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.12.5.tgz",
+          "bundled": true,
-          "integrity": "sha512-plcc+hbExy3McchJCEQG3knOsuh3HH+Prx1P6cLIkET/0dLuQDEnrT+s27Axgc9bqfsmNUNHfscgMUdBpC9xfg==",
           "requires": {
             "regenerator-runtime": "^0.13.4"
           }
         },
         "@types/lodash": {
           "version": "4.14.168",
-          "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.168.tgz",
+          "bundled": true
-          "integrity": "sha512-oVfRvqHV/V6D1yifJbVRU3TMp8OT6o6BG+U9MkwuJ3U8/CsDHvalRpsxBqivn71ztOFZBTfJMvETbqHiaNSj7Q=="
         },
         "@urbit/eslint-config": {
           "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/@urbit/eslint-config/-/eslint-config-1.0.0.tgz",
+          "bundled": true
-          "integrity": "sha512-Xmzb6MvM7KorlPJEq/hURZZ4BHSVy/7CoQXWogsBSTv5MOZnMqwNKw6yt24k2AO/2UpHwjGptimaNLqFfesJbw=="
         },
         "big-integer": {
           "version": "1.6.48",
-          "resolved": "https://registry.npmjs.org/big-integer/-/big-integer-1.6.48.tgz",
+          "bundled": true
-          "integrity": "sha512-j51egjPa7/i+RdiRuJbPdJ2FIUYYPhvYLjzoYbcMMm62ooO6F94fETG4MTs46zPAF9Brs04OajboA/qTGuz78w=="
         },
         "lodash": {
           "version": "4.17.20",
-          "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.20.tgz",
+          "bundled": true
-          "integrity": "sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA=="
         },
         "regenerator-runtime": {
           "version": "0.13.7",
-          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.7.tgz",
+          "bundled": true
-          "integrity": "sha512-a54FxoJDIr27pgf7IgeQGxmqUNYrcV338lf/6gH456HZ/PhX+5BcwHXG9ajESmwe6WRO0tAzRUrRmNONWgkrew=="
         }
       }
     },

pkg/interface/src/logic/api/gcp.ts

@@ -1,19 +1,16 @@
 import BaseApi from './base';
-import {StoreState} from '../store/type';
+import type {StoreState} from '../store/type';
-import {GcpToken} from '../types/gcp-state';
+import type {GcpToken} from '../../types/gcp-state';
 
 
 export default class GcpApi extends BaseApi<StoreState> {
-  isConfigured() {
+  // Does not touch the store; use the value manually.
-    return this.spider('noun', 'json', 'gcp-is-configured', {})
+  async isConfigured(): Promise<boolean> {
-      .then((data) => {
+    return this.spider('noun', 'json', 'gcp-is-configured', {});
-        this.store.handleEvent({
-          data
-        });
-      });
   }
 
-  getToken() {
+  // Does not return the token; read it out of the store.
+  async getToken(): Promise<void> {
     return this.spider('noun', 'gcp-token', 'gcp-get-token', {})
       .then((token) => {
         this.store.handleEvent({

pkg/interface/src/logic/lib/BigIntOrderedMap.ts

@@ -1,4 +1,5 @@
 import bigInt, { BigInteger } from 'big-integer';
+import { immerable } from 'immer';
 
 interface NonemptyNode<V> {
   n: [BigInteger, V];
@@ -14,6 +15,7 @@ type MapNode<V> = NonemptyNode<V> | null;
  */
 export class BigIntOrderedMap<V> implements Iterable<[BigInteger, V]> {
   private root: MapNode<V> = null;
+  [immerable] = true;
   size = 0;
 
   constructor(initial: [BigInteger, V][] = []) {

pkg/interface/src/logic/lib/GcpClient.ts

@@ -26,7 +26,7 @@ class GcpUpload implements StorageUpload {
     this.#accessKey = accessKey;
   }
 
-  async promise(): UploadResult {
+  async promise(): Promise<UploadResult> {
     const {Bucket, Key, ContentType, Body} = this.#params;
     const urlParams = {
       uploadType: 'media',

pkg/interface/src/logic/lib/gcpManager.ts

@@ -5,10 +5,9 @@
 // 1. call configure with a GlobalApi and GlobalStore.
 // 2. call start() to start the token refresh loop.
 //
-// If the ship does not have GCP storage configured, we don't try to get
+// If the ship does not have GCP storage configured, we don't try to
-// a token, but we keep checking at regular intervals to see if it gets
+// get a token. If GCP storage is configured, we try to invoke the GCP
-// configured. If GCP storage is configured, we try to invoke the GCP
+// get-token thread on the ship until it gives us an access token. Once
-// get-token thread on the ship until it gives us an access token.  Once
 // we have a token, we refresh it every hour or so according to its
 // intrinsic expiry.
 //
@@ -25,7 +24,7 @@ class GcpManager {
   }
 
   #running = false;
-  #timeoutId: number | null = null;
+  #timeoutId: ReturnType<typeof setTimeout> | null = null;
 
   start() {
     if (this.#running) {
@@ -61,19 +60,17 @@ class GcpManager {
   }
 
   #consecutiveFailures: number = 0;
-
+  #configured: boolean = false;
-  private isConfigured() {
-    return useStorageState.getState().gcp.configured;
-  }
 
   private refreshLoop() {
-    if (!this.isConfigured()) {
+    if (!this.#configured) {
-      this.#api.gcp.isConfigured()
+      this.#api!.gcp.isConfigured()
-        .then(() => {
+        .then((configured) => {
-          if (this.isConfigured() === undefined) {
+          if (configured === undefined) {
             throw new Error("can't check whether GCP is configured?");
           }
-          if (this.isConfigured()) {
+          this.#configured = configured;
+          if (this.#configured) {
             this.refreshLoop();
           } else {
             console.log('GcpManager: GCP storage not configured; stopping.');
@@ -86,7 +83,7 @@ class GcpManager {
         });
       return;
     }
-    this.#api.gcp.getToken()
+    this.#api!.gcp.getToken()
       .then(() => {
         const token = useStorageState.getState().gcp.token;
         if (token) {

pkg/interface/src/logic/lib/useCopy.ts

@@ -16,5 +16,5 @@ export function useCopy(copied: string, display: string) {
     display,
   ]);
 
-  return { copyDisplay, doCopy };
+  return { copyDisplay, doCopy, didCopy };
 }

pkg/interface/src/logic/lib/useRunIO.ts

@@ -0,0 +1,52 @@
+import { useState, useEffect } from "react";
+import { useWaitForProps } from "./useWaitForProps";
+import {unstable_batchedUpdates} from "react-dom";
+
+export type IOInstance<I, P, O> = (
+  input: I
+) => (props: P) => Promise<[(p: P) => boolean, O]>;
+
+export function useRunIO<I, O>(
+  io: (i: I) => Promise<O>,
+  after: (o: O) => void,
+  key: string
+) {
+  const [resolve, setResolve] = useState<() => void>(() => () => {});
+  const [reject, setReject] = useState<(e: any) => void>(() => () => {});
+  const [output, setOutput] = useState<O | null>(null);
+  const [done, setDone] = useState(false);
+  const run = (i: I) =>
+    new Promise((res, rej) => {
+      setResolve(() => res);
+      setReject(() => rej);
+      io(i)
+        .then((o) => {
+          unstable_batchedUpdates(() => {
+            setOutput(o);
+            setDone(true);
+          });
+        })
+        .catch(rej);
+    });
+
+  useEffect(() => {
+    reject(new Error("useRunIO: key changed"));
+    setDone(false);
+    setOutput(null);
+  }, [key]);
+
+  useEffect(() => {
+    if (!done) {
+      return;
+    }
+    try {
+      after(output!);
+      resolve();
+    } catch (e) {
+      reject(e);
+    }
+  }, [done]);
+
+  return run;
+}
+

pkg/interface/src/logic/lib/util.ts

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useState, useCallback, useMemo } from 'react';
 import _ from 'lodash';
 import f, { compose, memoize } from 'lodash/fp';
 import bigInt, { BigInteger } from 'big-integer';
@@ -400,11 +400,15 @@ interface useHoveringInterface {
 
 export const useHovering = (): useHoveringInterface => {
   const [hovering, setHovering] = useState(false);
-  const bind = {
+  const onMouseOver = useCallback(() => setHovering(true), [])
-    onMouseOver: () => setHovering(true),
+  const onMouseLeave = useCallback(() => setHovering(false), [])
-    onMouseLeave: () => setHovering(false)
+  const bind = useMemo(() => ({
-  };
+    onMouseOver,
-  return { hovering, bind };
+    onMouseLeave,
+  }), [onMouseLeave, onMouseOver]);
+
+  
+  return useMemo(() => ({ hovering, bind }), [hovering, bind]);
 };
 
 const DM_REGEX = /ship\/~([a-z]|-)*\/dm--/;

pkg/interface/src/logic/reducers/gcp-reducer.ts

@@ -1,27 +1,17 @@
-import _ from 'lodash';
 import {StoreState} from '../store/type';
-import {GcpToken} from '../../types/gcp-state';
+import type {GcpToken} from '../../types/gcp-state';
-import { Cage } from '~/types/cage';
+import type {Cage} from '~/types/cage';
 import useStorageState, { StorageState } from '../state/storage';
 import { reduceState } from '../state/base';
 
 export default class GcpReducer {
   reduce(json: Cage) {
     reduceState<StorageState, any>(useStorageState, json, [
-      reduceConfigured,
       reduceToken
     ]);
   }
 }
 
-const reduceConfigured = (json, state: StorageState): StorageState => {
-  let data = json['gcp-configured'];
-  if (data !== undefined) {
-    state.gcp.configured = data;
-  }
-  return state;
-}
-
 const reduceToken = (json: Cage, state: StorageState): StorageState => {
   let data = json['gcp-token'];
   if (data) {
@@ -37,7 +27,7 @@ const setToken = (data: any, state: StorageState): StorageState => {
   return state;
 }
 
-const isToken = (token: any): boolean => {
+const isToken = (token: any): token is GcpToken => {
   return (typeof(token.accessKey) === 'string' &&
           typeof(token.expiresIn) === 'number');
 }

pkg/interface/src/logic/subscription/global.ts

@@ -49,6 +49,7 @@ export default class GlobalSubscription extends BaseSubscription<StoreState> {
   }
 
   restart() {
-    this.start();
+    this.openSubscriptions = {};
+    super.restart();
   }
 }

pkg/interface/src/types/gcp-state.ts

@@ -4,6 +4,5 @@ export interface GcpToken {
 };
 
 export interface GcpState {
-  configured?: boolean;
   token?: GcpToken
 };

pkg/interface/src/views/apps/chat/components/ChatMessage.tsx

@@ -29,8 +29,8 @@ import {
   Groups,
   Associations
 } from '~/types';
-import TextContent from './content/text';
+import TextContent from '../../../landscape/components/Graph/content/text';
-import CodeContent from './content/code';
+import CodeContent from '../../../landscape/components/Graph/content/code';
 import RemoteContent from '~/views/components/RemoteContent';
 import { Mention } from '~/views/components/MentionText';
 import { Dropdown } from '~/views/components/Dropdown';
@@ -42,8 +42,7 @@ import useContactState from '~/logic/state/contact';
 import { useIdlingState } from '~/logic/lib/idling';
 import ProfileOverlay from '~/views/components/ProfileOverlay';
 import {useCopy} from '~/logic/lib/useCopy';
-import {PermalinkEmbed} from '../../permalinks/embed';
+import {GraphContentWide} from '~/views/landscape/components/Graph/GraphContentWide';
-import {referenceToPermalink} from '~/logic/lib/permalinks';
 
 
 export const DATESTAMP_FORMAT = '[~]YYYY.M.D';
@@ -284,8 +283,7 @@ class ChatMessage extends Component<ChatMessageProps> {
       hideHover
     } = this.props;
 
-    let onReply = this.props?.onReply;
+    let onReply = this.props?.onReply ?? (() => {});
-    onReply ??= () => {};
     const transcluded = this.props?.transcluded ?? 0;
     let { renderSigil } = this.props;
 
@@ -397,12 +395,11 @@ export const MessageAuthor = ({
       msg.author !== window.ship) &&
     `~${msg.author}` in contacts
       ? contacts[`~${msg.author}`]
-      : false;
+      : undefined;
 
   const showNickname = useShowNickname(contact);
   const { hideAvatars } = useSettingsState(selectCalmState);
-  const shipName = showNickname ? contact.nickname : cite(msg.author);
+  const shipName = showNickname && contact?.nickname || cite(msg.author) || `~${msg.author}`;
-  const copyNotice = 'Copied';
   const color = contact
     ? `#${uxToHex(contact.color)}`
     : dark
@@ -413,28 +410,10 @@ export const MessageAuthor = ({
     : dark
     ? 'mix-blend-diff'
     : 'mix-blend-darken';
-  const [displayName, setDisplayName] = useState(shipName);
+
-  const [nameMono, setNameMono] = useState(showNickname ? false : true);
+  const { copyDisplay, doCopy, didCopy } = useCopy(`~${msg.author}`, shipName);
   const { hovering, bind } = useHovering();
-  const [showOverlay, setShowOverlay] = useState(false);
+  const nameMono = !(showNickname || didCopy);
-
-  const toggleOverlay = () => {
-    setShowOverlay((value) => !value);
-  };
-
-  const showCopyNotice = () => {
-    setDisplayName(copyNotice);
-    setNameMono(false);
-  };
-
-  useEffect(() => {
-    const resetDisplay = () => {
-      setDisplayName(shipName);
-      setNameMono(showNickname ? false : true);
-    };
-    const timer = setTimeout(() => resetDisplay(), 800);
-    return () => clearTimeout(timer);
-  }, [shipName, displayName]);
 
   const img =
     contact?.avatar && !hideAvatars ? (
@@ -471,10 +450,7 @@ export const MessageAuthor = ({
   return (
     <Box display='flex' alignItems='flex-start' {...rest}>
       <Box
-        onClick={() => {
+       height={24}
-          setShowOverlay(true);
-        }}
-        height={24}
         pr={2}
         mt={'1px'}
         pl={'12px'}
@@ -501,13 +477,10 @@ export const MessageAuthor = ({
             mono={nameMono}
             fontWeight={nameMono ? '400' : '500'}
             cursor='pointer'
-            onClick={() => {
+            onClick={doCopy}
-              writeText(`~${msg.author}`);
-              showCopyNotice();
-            }}
             title={`~${msg.author}`}
           >
-            {displayName}
+            {copyDisplay}
           </Text>
           <Text flexShrink={0} fontSize={0} gray>
             {timestamp}
@@ -539,7 +512,6 @@ export const Message = ({
   ...rest
 }) => {
   const { hovering, bind } = useHovering();
-  const contacts = useContactState((state) => state.contacts);
   return (
     <Box width="100%" position='relative' {...rest}>
       {timestampHover ? (
@@ -558,66 +530,14 @@ export const Message = ({
       ) : (
         <></>
       )}
-      <Box width="100%" {...bind}>
+      <GraphContentWide
-        {msg.contents.map((content, i) => {
+        {...bind}
-          switch (Object.keys(content)[0]) {
+        width="100%"
-            case 'text':
+        post={msg}
-              return (
+        transcluded={transcluded}
-                <TextContent
+        api={api}
-                  key={i}
+        showOurContact={showOurContact}
-                  api={api}
+      />
-                  fontSize={1}
-                  lineHeight={'20px'}
-                  content={content}
-                />
-              );
-            case 'code':
-            return <CodeContent key={i} content={content} />;
-            case 'reference':
-              const { link } = referenceToPermalink(content);
-              return (
-                <PermalinkEmbed
-                  link={link}
-                  api={api}
-                  transcluded={transcluded}
-                  showOurContact={showOurContact}
-                />
-              );
-            case 'url':
-             return (
-                <Box
-                  key={i}
-                  flexShrink={0}
-                  fontSize={1}
-                  lineHeight='20px'
-                  color='black'
-                  width="fit-content"
-                  maxWidth="500px"
-                >
-                  <RemoteContent
-                    key={content.url}
-                    url={content.url}
-                  />
-                </Box>
-              );
-            case 'mention':
-              const first = (i) => i === 0;
-              return (
-                <Mention
-                  key={i}
-                  first={first(i)}
-                  group={group}
-                  scrollWindow={scrollWindow}
-                  ship={content.mention}
-                  contact={contacts?.[`~${content.mention}`]}
-                  api={api}
-                />
-              );
-            default:
-              return null;
-          }
-        })}
-      </Box>
     </Box>
   );
 };

pkg/interface/src/views/apps/permalinks/TranscludedNode.tsx

@@ -100,7 +100,7 @@ function TranscludedPublishNode(props: {
         ?.get(bigInt.one)
         ?.children?.peekLargest()?.[1]!;
       return (
-        <Col gapY="2">
+        <Col color="black" gapY="2">
           <Author
             px="2"
             showImage

pkg/interface/src/views/apps/profile/components/EditProfile.tsx

@@ -93,9 +93,6 @@ export function EditProfile(props: any): ReactElement {
   };
 
   const history = useHistory();
-  if (contact) {
-    contact.isPublic = isPublic;
-  }
 
   const onSubmit = async (values: any, actions: any) => {
     try {
@@ -143,7 +140,7 @@ export function EditProfile(props: any): ReactElement {
     <>
       <Formik
         validationSchema={formSchema}
-        initialValues={contact || emptyContact}
+        initialValues={{...contact, isPublic } || emptyContact}
         onSubmit={onSubmit}
       >
         {({ setFieldValue }) => (

pkg/interface/src/views/apps/publish/components/MetadataForm.tsx

@@ -1,105 +0,0 @@
-import React, { useEffect } from "react";
-import { AsyncButton } from "../../../components/AsyncButton";
-import * as Yup from "yup";
-import {
-  Box,
-  ManagedTextInputField as Input,
-  ManagedCheckboxField as Checkbox,
-  Col,
-  Button,
-  Center,
-} from "@tlon/indigo-react";
-import { Formik, Form, useFormikContext, FormikHelpers } from "formik";
-import GlobalApi from "~/logic/api/global";
-import { Notebook } from "~/types/publish-update";
-import { Contacts } from "@urbit/api/contacts";
-import { FormError } from "~/views/components/FormError";
-import { RouteComponentProps, useHistory } from "react-router-dom";
-import {Association} from "@urbit/api";
-import { uxToHex } from "~/logic/lib/util";
-
-interface MetadataFormProps {
-  host: string;
-  book: string;
-  association: Association;
-  api: GlobalApi;
-}
-
-interface FormSchema {
-  name: string;
-  description: string;
-}
-
-const formSchema = Yup.object({
-  name: Yup.string().required("Notebook must have a name"),
-  description: Yup.string()
-});
-
-const ResetOnPropsChange = (props: { init: FormSchema; book: string }) => {
-  const { resetForm } = useFormikContext<FormSchema>();
-  useEffect(() => {
-    resetForm({ values: props.init });
-  }, [props.book]);
-
-  return null;
-};
-
-
-export function MetadataForm(props: MetadataFormProps) {
-  const { api, book } = props;
-  const { metadata } = props.association || {};
-
-  const initialValues: FormSchema = {
-    name: metadata?.title,
-    description: metadata?.description,
-  };
-
-
-  const onSubmit = async (
-    values: FormSchema,
-    actions: FormikHelpers<FormSchema>
-  ) => {
-    try {
-      const { name, description } = values;
-      await api.metadata.metadataAdd(
-        "publish",
-        props.association.resource,
-        props.association.group,
-        name,
-        description,
-        props.association.metadata["date-created"],,
-        uxToHex(props.association.metadata.color)
-      );
-      actions.setStatus({ success: null });
-    } catch (e) {
-      console.log(e);
-      actions.setStatus({ error: e.message });
-    }
-  };
-
-  return (
-    <Formik
-      validationSchema={formSchema}
-      initialValues={initialValues}
-      onSubmit={onSubmit}
-    >
-      <Form style={{ display: "contents" }}>
-          <Input
-            id="name"
-            label="Rename"
-            caption="Change the name of this notebook"
-          />
-          <Input
-            id="description"
-            label="Change description"
-            caption="Change the description of this notebook"
-          />
-          <ResetOnPropsChange init={initialValues} book={book} />
-          <AsyncButton primary loadingText="Updating.." border>
-            Save
-          </AsyncButton>
-          <FormError message="Failed to update settings" />
-      </Form>
-    </Formik>
-  );
-}

pkg/interface/src/views/components/CommentItem.tsx

@@ -15,6 +15,7 @@ import { getLatestCommentRevision } from '~/logic/lib/publish';
 import {useCopy} from '~/logic/lib/useCopy';
 import { getPermalinkForGraph} from '~/logic/lib/permalinks';
 import useMetadataState from '~/logic/state/metadata';
+import {GraphContentWide} from '../landscape/components/Graph/GraphContentWide';
 
 const ClickBox = styled(Box)`
   cursor: pointer;
@@ -101,19 +102,16 @@ export function CommentItem(props: CommentItemProps): ReactElement {
           </Row>
         </Author>
       </Row>
-      <Box
+      <GraphContentWide
         borderRadius="1"
         p="1"
         mb="1"
         backgroundColor={props.highlighted ? 'washedBlue' : 'white'}
-      >
+        transcluded={0}
-        <MentionText
+        api={api}
-          transcluded={0}
+        post={post}
-          api={api}
+        showOurContact
-          group={group}
+      />
-          content={post?.contents}
-        />
-      </Box>
     </Box>
   );
 }

pkg/interface/src/views/components/GroupLink.tsx

@@ -1,8 +1,7 @@
 import React, { useEffect, useState, useLayoutEffect, ReactElement } from 'react';
-
+import { useHistory } from 'react-router-dom';
 import { Box, Text, Row, Col } from '@tlon/indigo-react';
 import { Associations, Groups } from '@urbit/api';
-
 import GlobalApi from '~/logic/api/global';
 import { MetadataIcon } from '../landscape/components/MetadataIcon';
 import { JoinGroup } from '../landscape/components/JoinGroup';
@@ -23,27 +22,12 @@ export function GroupLink(
   const name = resource.slice(6);
   const [preview, setPreview] = useState<MetadataUpdatePreview | null>(null);
   const associations = useMetadataState(state => state.associations);
-
+  const { save, restore } = useVirtual();
+  const history = useHistory();
   const joined = resource in associations.groups;
 
-  const { save, restore } = useVirtual();
-
   const { modal, showModal } = useModal({
-    modal:
+    modal: <JoinGroup api={api} autojoin={name} />
-      joined && preview ? (
-        <Box width="fit-content" p="4">
-          <GroupSummary
-            metadata={preview.metadata}
-            memberCount={preview.members}
-            channelCount={preview?.['channel-count']}
-          />
-        </Box>
-      ) : (
-        <JoinGroup
-          api={api}
-          autojoin={name}
-        />
-      )
   });
 
   useEffect(() => {
@@ -72,7 +56,9 @@ export function GroupLink(
         alignItems="center"
         py="2"
         pr="2"
-        onClick={showModal}
+        onClick={
+          joined ? () => history.push(`/~landscape/ship/${name}`) : showModal
+        }
         cursor='pointer'
         opacity={preview ? '1' : '0.6'}
       >

pkg/interface/src/views/components/Invite/index.tsx

@@ -1,27 +1,28 @@
-import React, { useState, useEffect, useCallback } from 'react';
+import React, { useState, useEffect, useCallback } from "react";
-import { useHistory } from 'react-router-dom';
+import { useHistory } from "react-router-dom";
 
 import {
   MetadataUpdatePreview,
   Contacts,
   JoinRequests,
   Groups,
-  Associations
+  Associations,
-} from '@urbit/api';
+} from "@urbit/api";
-import { Invite } from '@urbit/api/invite';
+import { Invite } from "@urbit/api/invite";
-import { Text, Icon, Row } from '@tlon/indigo-react';
+import { Text, Icon, Row } from "@tlon/indigo-react";
 
-import { cite, useShowNickname } from '~/logic/lib/util';
+import { cite, useShowNickname } from "~/logic/lib/util";
-import GlobalApi from '~/logic/api/global';
+import GlobalApi from "~/logic/api/global";
-import { resourceFromPath } from '~/logic/lib/group';
+import { resourceFromPath } from "~/logic/lib/group";
-import { GroupInvite } from './Group';
+import { GroupInvite } from "./Group";
-import { InviteSkeleton } from './InviteSkeleton';
+import { InviteSkeleton } from "./InviteSkeleton";
-import { JoinSkeleton } from './JoinSkeleton';
+import { JoinSkeleton } from "./JoinSkeleton";
-import { useWaitForProps } from '~/logic/lib/useWaitForProps';
+import { useWaitForProps } from "~/logic/lib/useWaitForProps";
-import useGroupState from '~/logic/state/group';
+import useGroupState from "~/logic/state/group";
-import useContactState from '~/logic/state/contact';
+import useContactState from "~/logic/state/contact";
-import useMetadataState from '~/logic/state/metadata';
+import useMetadataState from "~/logic/state/metadata";
-import useGraphState from '~/logic/state/graph';
+import useGraphState from "~/logic/state/graph";
+import { useRunIO } from "~/logic/lib/useRunIO";
 
 interface InviteItemProps {
   invite?: Invite;
@@ -32,62 +33,81 @@ interface InviteItemProps {
   api: GlobalApi;
 }
 
+export function useInviteAccept(
+  resource: string,
+  api: GlobalApi,
+  app?: string,
+  uid?: string,
+  invite?: Invite,
+) {
+  const { ship, name } = resourceFromPath(resource);
+  const history = useHistory();
+  const associations = useMetadataState((s) => s.associations);
+  const groups = useGroupState((s) => s.groups);
+  const graphKeys = useGraphState((s) => s.graphKeys);
+
+  const waiter = useWaitForProps({ associations, graphKeys, groups });
+  return useRunIO<void, boolean>(
+    async () => {
+      if (!(app && invite && uid)) {
+        return false;
+      }
+      if (resource in groups) {
+        await api.invite.decline(app, uid);
+        return false;
+      }
+
+      await api.groups.join(ship, name);
+      await api.invite.accept(app, uid);
+      await waiter((p) => {
+        return (
+          (resource in p.groups &&
+            resource in (p.associations?.graph ?? {}) &&
+            p.graphKeys.has(resource.slice(7))) ||
+          resource in (p.associations?.groups ?? {})
+        );
+      });
+      return true;
+    },
+    (success: boolean) => {
+      if (!success) {
+        return;
+      }
+      if (groups?.[resource]?.hidden) {
+        const { metadata } = associations.graph[resource];
+        if (metadata && "graph" in metadata.config) {
+          if (metadata.config.graph === "chat") {
+            history.push(
+              `/~landscape/messages/resource/${metadata.config.graph}${resource}`
+            );
+          } else {
+            history.push(
+              `/~landscape/home/resource/${metadata.config.graph}${resource}`
+            );
+          }
+        } else {
+          console.error("unknown metadata: ", metadata);
+        }
+      } else {
+        history.push(`/~landscape${resource}`);
+      }
+    },
+    resource
+  );
+}
+
 export function InviteItem(props: InviteItemProps) {
   const [preview, setPreview] = useState<MetadataUpdatePreview | null>(null);
   const { pendingJoin, invite, resource, uid, app, api } = props;
-  const { ship, name } = resourceFromPath(resource);
+  const { name } = resourceFromPath(resource);
-  const groups = useGroupState(state => state.groups);
+  const contacts = useContactState((state) => state.contacts);
-  const graphKeys = useGraphState(s => s.graphKeys);
-  const associations = useMetadataState(state => state.associations);
-  const contacts = useContactState(state => state.contacts);
   const contact = contacts?.[`~${invite?.ship}`] ?? {};
   const showNickname = useShowNickname(contact);
-  const waiter = useWaitForProps(
-    { associations, groups, pendingJoin, graphKeys: Array.from(graphKeys) },
-    50000
-  );
 
-  const history = useHistory();
+  const inviteAccept = useInviteAccept(resource, api, app, uid, invite);
-  const inviteAccept = useCallback(async () => {
-    if (!(app && invite && uid)) {
-      return;
-    }
-    if(resource in groups) {
-      await api.invite.decline(app, uid);
-      return;
-    }
-
-    api.groups.join(ship, name);
-    await waiter(p => !!p.pendingJoin);
-
-    api.invite.accept(app, uid);
-    await waiter((p) => {
-      return (
-        resource in p.groups &&
-        (resource in (p.associations?.graph ?? {}) ||
-          resource in (p.associations?.groups ?? {}))
-      );
-    });
-
-    if (groups?.[resource]?.hidden) {
-      await waiter(p => p.graphKeys.includes(resource.slice(7)));
-      const { metadata } = associations.graph[resource];
-      if (metadata && 'graph' in metadata.config) {
-        if (metadata.config.graph === 'chat') {
-          history.push(`/~landscape/messages/resource/${metadata.config.graph}${resource}`);
-        } else {
-          history.push(`/~landscape/home/resource/${metadata.config.graph}${resource}`);
-        }
-      } else {
-        console.error('unknown metadata: ', metadata);
-      }
-    } else {
-      history.push(`/~landscape${resource}`);
-    }
-  }, [app, history, waiter, invite, uid, resource, groups, associations]);
 
   const inviteDecline = useCallback(async () => {
-    if(!(app && uid)) {
+    if (!(app && uid)) {
       return;
     }
     await api.invite.decline(app, uid);
@@ -96,7 +116,7 @@ export function InviteItem(props: InviteItemProps) {
   const handlers = { onAccept: inviteAccept, onDecline: inviteDecline };
 
   useEffect(() => {
-    if (!app || app === 'groups') {
+    if (!app || app === "groups") {
       (async () => {
         setPreview(await api.metadata.preview(resource));
       })();
@@ -108,7 +128,7 @@ export function InviteItem(props: InviteItemProps) {
     }
   }, [invite]);
 
-  if(pendingJoin?.hidden) {
+  if (pendingJoin?.hidden) {
     return null;
   }
 
@@ -123,7 +143,7 @@ export function InviteItem(props: InviteItemProps) {
         {...handlers}
       />
     );
-  } else if (invite && name.startsWith('dm--')) {
+  } else if (invite && name.startsWith("dm--")) {
     return (
       <InviteSkeleton
         gapY="3"
@@ -133,16 +153,18 @@ export function InviteItem(props: InviteItemProps) {
       >
         <Row py="1" alignItems="center">
           <Icon display="block" color="blue" icon="Bullet" mr="2" />
-          <Text mr="1"
+          <Text
+            mr="1"
             mono={!showNickname}
-            fontWeight={showNickname ? '500' : '400'}>
+            fontWeight={showNickname ? "500" : "400"}
+          >
             {showNickname ? contact?.nickname : cite(`~${invite!.ship}`)}
           </Text>
           <Text mr="1">invited you to a DM</Text>
         </Row>
       </InviteSkeleton>
     );
-  } else if (status && name.startsWith('dm--')) {
+  } else if (status && name.startsWith("dm--")) {
     return (
       <JoinSkeleton api={api} resource={resource} status={status} gapY="3">
         <Row py="1" alignItems="center">
@@ -162,9 +184,11 @@ export function InviteItem(props: InviteItemProps) {
       >
         <Row py="1" alignItems="center">
           <Icon display="block" color="blue" icon="Bullet" mr="2" />
-          <Text mr="1"
+          <Text
+            mr="1"
             mono={!showNickname}
-            fontWeight={showNickname ? '500' : '400'}>
+            fontWeight={showNickname ? "500" : "400"}
+          >
             {showNickname ? contact?.nickname : cite(`~${invite!.ship}`)}
           </Text>
           <Text mr="1">
@@ -174,14 +198,12 @@ export function InviteItem(props: InviteItemProps) {
       </InviteSkeleton>
     );
   } else if (pendingJoin) {
-    const [, , ship, name] = resource.split('/');
+    const [, , ship, name] = resource.split("/");
     return (
       <JoinSkeleton api={api} resource={resource} status={pendingJoin}>
         <Row py="1" alignItems="center">
           <Icon display="block" color="blue" icon="Bullet" mr="2" />
-          <Text mr="1">
+          <Text mr="1">You are joining</Text>
-            You are joining
-          </Text>
           <Text mono>
             {cite(ship)}/{name}
           </Text>

pkg/interface/src/views/components/MentionText.tsx

@@ -6,7 +6,7 @@ import RichText from '~/views/components/RichText';
 import { cite, useShowNickname, uxToHex } from '~/logic/lib/util';
 import ProfileOverlay from '~/views/components/ProfileOverlay';
 import { useHistory } from 'react-router-dom';
-import useContactState from '~/logic/state/contact';
+import useContactState, {useContact} from '~/logic/state/contact';
 import {referenceToPermalink} from '~/logic/lib/permalinks';
 import GlobalApi from '~/logic/api/global';
 
@@ -40,46 +40,28 @@ export function MentionText(props: MentionTextProps) {
 }
 
 export function Mention(props: {
-  contact: Contact;
-  group: Group;
-  scrollWindow?: HTMLElement;
   ship: string;
   first?: Boolean;
   api: any;
 }) {
-  const { ship, scrollWindow, first, api, ...rest } = props;
+  const { ship, first, api, ...rest } = props;
-  let { contact } = props;
+  const contact = useContact(ship);
-  const contacts = useContactState(state => state.contacts);
-  contact = contact?.color ? contact : contacts?.[`~${ship}`];
-  const history = useHistory();
   const showNickname = useShowNickname(contact);
   const name = showNickname ? contact?.nickname : cite(ship);
-  const group = props.group ?? { hidden: true };
-  const [showOverlay, setShowOverlay] = useState(false);
-
-  const toggleOverlay = useCallback(() => {
-    setShowOverlay((value) => !value);
-  }, [showOverlay]);
 
   return (
-    <Box position='relative' display='inline-block' cursor='pointer' {...rest}>
+    <ProfileOverlay ship={ship} api={api}>
-        <ProfileOverlay
+      <Text
-          ship={ship}
+        marginLeft={first? 0 : 1}
-          api={api}
+        marginRight={1}
-        >
+        px={1}
-          <Text
+        bg='washedBlue'
-            onClick={() => toggleOverlay()}
+        color='blue'
-            marginLeft={first? 0 : 1}
+        fontSize={showNickname ? 1 : 0}
-            marginRight={1}
+        mono={!showNickname}
-            px={1}
+      >
-            bg='washedBlue'
+        {name}
-            color='blue'
+      </Text>
-            fontSize={showNickname ? 1 : 0}
+    </ProfileOverlay>
-            mono={!showNickname}
-          >
-          {name}
-        </Text>
-      </ProfileOverlay>
-    </Box>
   );
 }

pkg/interface/src/views/components/ProfileOverlay.tsx

@@ -1,4 +1,4 @@
-import React, { PureComponent, useCallback, useEffect, useRef, useState, useMemo } from 'react';
+import React, { PureComponent, useCallback, useEffect, useRef, useState, useMemo, ReactNode } from 'react';
 import { Contact, Group, uxToHex } from '@urbit/api';
 import _ from 'lodash';
 import VisibilitySensor from 'react-visibility-sensor';
@@ -40,6 +40,7 @@ const FixedOverlay = styled(Col)`
 type ProfileOverlayProps = BoxProps & {
   ship: string;
   api: any;
+  children: ReactNode;
 };
 
 const ProfileOverlay = (props: ProfileOverlayProps) => {

pkg/interface/src/views/landscape/components/Graph/GraphContentWide.tsx

@@ -0,0 +1,82 @@
+import React from "react";
+import { Post, ReferenceContent } from "@urbit/api";
+import { Box } from "@tlon/indigo-react";
+
+import GlobalApi from "~/logic/api/global";
+import TextContent from "./content/text";
+import CodeContent from "./content/code";
+import RemoteContent from "~/views/components/RemoteContent";
+import { Mention } from "~/views/components/MentionText";
+import { PermalinkEmbed } from "~/views/apps/permalinks/embed";
+import { referenceToPermalink } from "~/logic/lib/permalinks";
+import { PropFunc } from "~/types";
+
+function GraphContentWideInner(
+  props: {
+    transcluded?: number;
+    post: Post;
+    api: GlobalApi;
+    showOurContact: boolean;
+  } & PropFunc<typeof Box>
+) {
+  const { post, transcluded = 0, showOurContact, api, ...rest } = props;
+
+  return (
+    <Box {...rest}>
+      {post.contents.map((content, i) => {
+        switch (Object.keys(content)[0]) {
+          case "text":
+            return (
+              <TextContent
+                key={i}
+                api={api}
+                fontSize={1}
+                lineHeight={"20px"}
+                content={content}
+              />
+            );
+          case "code":
+            return <CodeContent key={i} content={content} />;
+          case "reference":
+            const { link } = referenceToPermalink(content as ReferenceContent);
+            return (
+              <PermalinkEmbed
+                link={link}
+                api={api}
+                transcluded={transcluded}
+                showOurContact={showOurContact}
+              />
+            );
+          case "url":
+            return (
+              <Box
+                key={i}
+                flexShrink={0}
+                fontSize={1}
+                lineHeight="20px"
+                color="black"
+                width="fit-content"
+                maxWidth="min(500px, 100%)"
+              >
+                <RemoteContent key={content.url} url={content.url} />
+              </Box>
+            );
+          case "mention":
+            const first = (i) => i === 0;
+            return (
+              <Mention
+                key={i}
+                first={first(i)}
+                ship={content.mention}
+                api={api}
+              />
+            );
+          default:
+            return null;
+        }
+      })}
+    </Box>
+  );
+}
+
+export const GraphContentWide = React.memo(GraphContentWideInner);

pkg/interface/src/views/landscape/components/GroupSummary.tsx

@@ -23,7 +23,7 @@ export function GroupSummary(props: GroupSummaryProps & PropFunc<typeof Col>): R
     anchorRef
   );
   return (
-    <Col {...rest} ref={anchorRef} gapY="4">
+    <Col {...rest} ref={anchorRef} gapY="4" maxWidth={['100%', '288px']}>
       <Row gapX="2" width="100%">
         <MetadataIcon
           width="40px"

pkg/interface/src/views/landscape/components/Home/Post/PostItem/PostContent.js

@@ -1,30 +1,35 @@
 import React from 'react';
-import { Col } from '@tlon/indigo-react';
+import { Col, Box } from '@tlon/indigo-react';
-import { MentionText } from '~/views/components/MentionText';
+import { GraphContentWide } from "~/views/landscape/components/Graph/GraphContentWide";
-import useContactState from '~/logic/state/contact';
+import styled from 'styled-components';
 
+const TruncatedBox = styled(Col)`
+  display: -webkit-box;
+  -webkit-line-clamp: ${p => p.truncate ?? 'unset'};
+  -webkit-box-orient: vertical;
+
+`;
 
 export function PostContent(props) {
   const { post, isParent, api, isReply } = props;
-  const contacts = useContactState(state => state.contacts);
 
   return (
-    <Col
+    <TruncatedBox
+      display="-webkit-box"
       width="100%"
-      pl="2"
+      px="2"
-      pr="2"
+      pb="2"
-      pb={isParent || isReply ? "0" : "2"}
+      truncate={isParent ? null : 8}
-      maxHeight={ isParent ? "none" : "300px" }
       textOverflow="ellipsis"
       overflow="hidden"
-      display="inline-block">
+     >
-      <MentionText
+      <GraphContentWide
-        contacts={contacts}
-        content={post.contents}
-        api={api}
         transcluded={0}
+        post={post}
+        api={api}
+        showOurContact
       />
-    </Col>
+    </TruncatedBox>
   );
 }
 

pkg/interface/src/views/landscape/components/JoinGroup.tsx

@@ -151,47 +151,50 @@ export function JoinGroup(props: JoinGroupProps): ReactElement {
           </StatelessAsyncButton>
         </Col>
       ) : preview ? (
-        <GroupSummary
+        <>
-          metadata={preview.metadata}
+          <GroupSummary
-          memberCount={preview?.members}
+            metadata={preview.metadata}
-          channelCount={preview?.['channel-count']}
+            memberCount={preview?.members}
-        >
+            channelCount={preview?.['channel-count']}
-          { Object.keys(preview.channels).length > 0 && (
+          >
-            <Col
+            { Object.keys(preview.channels).length > 0 && (
-              gapY="2"
+              <Col
-              p="2"
+                gapY="2"
-              borderRadius="2"
+                p="2"
-              border="1"
+                borderRadius="2"
-              borderColor="washedGray"
+                border="1"
-              bg="washedBlue"
+                borderColor="washedGray"
-              maxHeight="300px"
+                bg="washedBlue"
-              overflowY="auto"
+                maxHeight="300px"
-            >
+                overflowY="auto"
-              <Text gray fontSize="1">
+              >
-                Channels
+                <Text gray fontSize="1">
-              </Text>
+                  Channels
-              <Box width="100%" flexShrink="0">
+                </Text>
-                {Object.values(preview.channels).map(({ metadata }: any) => (
+                <Box width="100%" flexShrink="0">
-                  <Row width="100%">
+                  {Object.values(preview.channels).map(({ metadata }: any) => (
-                    <Icon
+                    <Row width="100%">
-                      mr="2"
+                      <Icon
-                      color="blue"
+                        mr="2"
-                      icon={getModuleIcon(metadata?.config?.graph) as any}
+                        color="blue"
-                    />
+                        icon={getModuleIcon(metadata?.config?.graph) as any}
-                    <Text color="blue">{metadata.title} </Text>
+                      />
-                  </Row>
+                      <Text color="blue">{metadata.title} </Text>
-                ))}
+                    </Row>
-                </Box>
+                  ))}
-            </Col>
+                  </Box>
-          )}
+              </Col>
+            )}
+          </GroupSummary>
           <StatelessAsyncButton
+            marginTop={3}
             primary
             name="join"
             onClick={() => onConfirm(preview.group)}
           >
             Join {preview.metadata.title}
           </StatelessAsyncButton>
-        </GroupSummary>
+        </>
       ) : (
         <Col width="100%" gapY="4">
           <Formik

pkg/npm/api/lib/BigIntOrderedMap.ts

@@ -1,4 +1,5 @@
 import { BigInteger } from "big-integer";
+import { immerable } from 'immer';
 
 interface NonemptyNode<V> {
   n: [BigInteger, V];
@@ -14,6 +15,7 @@ type MapNode<V> = NonemptyNode<V> | null;
  */
 export default class BigIntOrderedMap<V> implements Iterable<[BigInteger, V]> {
   private root: MapNode<V> = null;
+  [immerable] = true;
   size: number = 0;
 
   constructor(initial: [BigInteger, V][] = []) {

pkg/npm/api/package.json

@@ -21,6 +21,7 @@
     "@types/lodash": "^4.14.168",
     "@urbit/eslint-config": "^1.0.0",
     "big-integer": "^1.6.48",
+    "immer": "^9.0.1",
     "lodash": "^4.17.20"
   }
 }