Merge branch 'release/next-js' into release/next-userspace

pkg/interface/config/webpack.dev.js

@@ -94,7 +94,11 @@ module.exports = {
         use: {
           loader: 'babel-loader',
           options: {
-            presets: ['@babel/preset-env', '@babel/typescript', '@babel/preset-react'],
+            presets: ['@babel/preset-env', '@babel/typescript', ['@babel/preset-react', {
+              runtime: 'automatic',
+              development: true,
+              importSource: '@welldone-software/why-did-you-render',
+            }]],
             plugins: [
               '@babel/transform-runtime',
               '@babel/plugin-proposal-object-rest-spread',

pkg/interface/package-lock.json

@@ -1995,6 +1995,15 @@
         "@xtuc/long": "4.2.2"
       }
     },
+    "@welldone-software/why-did-you-render": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/@welldone-software/why-did-you-render/-/why-did-you-render-6.1.0.tgz",
+      "integrity": "sha512-0s+PuKQ4v9VV1SZSM6iS7d2T7X288T3DF+K8yfkFAhI31HhJGGH1SY1ssVm+LqjSMyrVWT60ZF5r0qUsO0Z9Lw==",
+      "dev": true,
+      "requires": {
+        "lodash": "^4"
+      }
+    },
     "@xtuc/ieee754": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz",

pkg/interface/package.json

@@ -71,6 +71,7 @@
     "@types/yup": "^0.29.11",
     "@typescript-eslint/eslint-plugin": "^4.15.0",
     "@urbit/eslint-config": "file:../npm/eslint-config",
+    "@welldone-software/why-did-you-render": "^6.1.0",
     "babel-eslint": "^10.1.0",
     "babel-loader": "^8.2.2",
     "babel-plugin-lodash": "^3.3.4",

pkg/interface/src/index.js

@@ -1,3 +1,4 @@
+import './wdyr';
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 

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

@@ -77,7 +77,6 @@ export default class MetadataApi extends BaseApi<StoreState> {
           tempChannel.delete();
         },
         (ev: any) => {
-          console.log(ev);
           if ('metadata-hook-update' in ev) {
             done = true;
             tempChannel.delete();

pkg/interface/src/logic/lib/sigil.js

@@ -23,9 +23,10 @@ export const Sigil = memo(
     size,
     svgClass = '',
     icon = false,
-    padding = 0
+    padding = 0,
+    display = 'inline-block'
   }) => {
-    const innerSize = Number(size) - 2*padding;
+    const innerSize = Number(size) - 2 * padding;
     const paddingPx = `${padding}px`;
     const foregroundColor = foreground
       ? foreground
@@ -34,14 +35,14 @@ export const Sigil = memo(
       <Box
         backgroundColor={color}
         borderRadius={icon ? '1' : '0'}
-        display='inline-block'
+        display={display}
         height={size}
         width={size}
         className={classes}
       />
     ) : (
       <Box
-        display='inline-block'
+        display={display}
         borderRadius={icon ? '1' : '0'}
         flexBasis={size}
         backgroundColor={color}

pkg/interface/src/logic/reducers/hark-update.ts

@@ -133,7 +133,7 @@ function graphWatchSelf(json: any, state: HarkState): HarkState {
 function readAll(json: any, state: HarkState): HarkState {
   const data = _.get(json, 'read-all');
   if(data) { 
-    clearState(state);
+    state = clearState(state);
   }
   return state;
 }
@@ -149,15 +149,15 @@ function removeGraph(json: any, state: HarkState): HarkState {
 function seenIndex(json: any, state: HarkState): HarkState {
   const data = _.get(json, 'seen-index');
   if(data) {
-    updateNotificationStats(state, data.index, 'last', () => data.time);
+    state = updateNotificationStats(state, data.index, 'last', () => data.time);
   }
   return state;
 }
 
 function readEach(json: any, state: HarkState): HarkState {
   const data = _.get(json, 'read-each');
-  if(data) {
+  if (data) {
-    updateUnreads(state, data.index, u => u.delete(data.target));
+    state = updateUnreads(state, data.index, u => u.delete(data.target));
   }
   return state;
 }
@@ -165,7 +165,7 @@ function readEach(json: any, state: HarkState): HarkState {
 function readSince(json: any, state: HarkState): HarkState {
   const data = _.get(json, 'read-count');
   if(data) {
-    updateUnreadCount(state, data, () => 0);
+    state = updateUnreadCount(state, data, () => 0);
   }
   return state;
 }
@@ -173,7 +173,7 @@ function readSince(json: any, state: HarkState): HarkState {
 function unreadSince(json: any, state: HarkState): HarkState {
   const data = _.get(json, 'unread-count');
   if(data) {
-    updateUnreadCount(state, data.index, u => u + 1);
+    state = updateUnreadCount(state, data.index, u => u + 1);
   }
   return state;
 }
@@ -181,7 +181,7 @@ function unreadSince(json: any, state: HarkState): HarkState {
 function unreadEach(json: any, state: HarkState): HarkState {
   const data = _.get(json, 'unread-each');
   if(data) {
-    updateUnreads(state, data.index, us => us.add(data.target));
+    state = updateUnreads(state, data.index, us => us.add(data.target));
   }
   return state;
 }
@@ -191,13 +191,14 @@ function unreads(json: any, state: HarkState): HarkState {
   if(data) {
     data.forEach(({ index, stats }) => {
       const { unreads, notifications, last } = stats;
-      updateNotificationStats(state, index, 'notifications', x => x + notifications);
+      state = updateNotificationStats(state, index, 'notifications', x => x + notifications);
-      updateNotificationStats(state, index, 'last', () => last);
+      state = updateNotificationStats(state, index, 'last', () => last);
       if('count' in unreads) {
-        updateUnreadCount(state, index, (u = 0) => u + unreads.count);
+        state = updateUnreadCount(state, index, (u = 0) => u + unreads.count);
       } else {
+        state = updateUnreads(state, index, s => new Set());
         unreads.each.forEach((u: string) => {
-          updateUnreads(state, index, s => s.add(u));
+          state = updateUnreads(state, index, s => s.add(u));
         });
       }
     });
@@ -205,7 +206,7 @@ function unreads(json: any, state: HarkState): HarkState {
   return state;
 }
 
-function clearState(state: HarkState) {
+function clearState(state: HarkState): HarkState {
   const initialState = {
     notifications: new BigIntOrderedMap<Timebox>(),
     archivedNotifications: new BigIntOrderedMap<Timebox>(),
@@ -225,6 +226,7 @@ function clearState(state: HarkState) {
   Object.keys(initialState).forEach((key) => {
     state[key] = initialState[key];
   });
+  return state;
 }
 
 function updateUnreadCount(state: HarkState, index: NotifIndex, count: (c: number) => number): HarkState {
@@ -242,10 +244,9 @@ function updateUnreads(state: HarkState, index: NotifIndex, f: (us: Set<string>)
   if(!('graph' in index)) {
     return state;
   }
-  const unreads = _.get(state.unreads.graph, [index.graph.graph, index.graph.index, 'unreads'], new Set<string>());
+  let unreads = _.get(state.unreads.graph, [index.graph.graph, index.graph.index, 'unreads'], new Set<string>());
-  const oldSize = unreads.size;
   f(unreads);
-  const newSize = unreads.size;
+
   _.set(state.unreads.graph, [index.graph.graph, index.graph.index, 'unreads'], unreads);
   return state;
 }
@@ -254,7 +255,7 @@ function updateNotificationStats(state: HarkState, index: NotifIndex, statField:
   if(statField === 'notifications') {
     state.notificationsCount = f(state.notificationsCount);
   }
-  if('graph' in index) {
+  if ('graph' in index) {
     const curr = _.get(state.unreads.graph, [index.graph.graph, index.graph.index, statField], 0);
     _.set(state.unreads.graph, [index.graph.graph, index.graph.index, statField], f(curr));
   } else if('group' in index) {
@@ -276,7 +277,6 @@ function added(json: any, state: HarkState): HarkState {
     );
     if (arrIdx !== -1) {
       if (timebox[arrIdx]?.notification?.read) {
-        // TODO this is additive, and with a persistent state it keeps incrementing
         state = updateNotificationStats(state, index, 'notifications', x => x+1);
       }
       timebox[arrIdx] = { index, notification };
@@ -361,7 +361,7 @@ function read(json: any, state: HarkState): HarkState {
   const data = _.get(json, 'read-note', false);
   if (data) {
     const { time, index } = data;
-    updateNotificationStats(state, index, 'notifications', x => x-1);
+    state = updateNotificationStats(state, index, 'notifications', x => x-1);
     setRead(time, index, true, state);
   }
   return state;
@@ -371,7 +371,7 @@ function unread(json: any, state: HarkState): HarkState {
   const data = _.get(json, 'unread-note', false);
   if (data) {
     const { time, index } = data;
-    updateNotificationStats(state, index, 'notifications', x => x+1);
+    state = updateNotificationStats(state, index, 'notifications', x => x+1);
     setRead(time, index, false, state);
   }
   return state;
@@ -397,7 +397,7 @@ function archive(json: any, state: HarkState): HarkState {
       state.notifications.set(time, unarchived);
     }
     const newlyRead = archived.filter(x => !x.notification.read).length;
-    updateNotificationStats(state, index, 'notifications', x => x - newlyRead);
+    state = updateNotificationStats(state, index, 'notifications', x => x - newlyRead);
   }
   return state;
 }

pkg/interface/src/logic/state/base.ts

@@ -34,7 +34,7 @@ export const reduceState = <
 export let stateStorageKeys: string[] = [];
 
 export const stateStorageKey = (stateName: string) => {
-  stateName = `Landcape${stateName}State`;
+  stateName = `Landscape${stateName}State`;
   stateStorageKeys = [...new Set([...stateStorageKeys, stateName])];
   return stateName;
 };

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

@@ -24,7 +24,7 @@ type ChatInputProps = IuseStorage & {
   message: string;
   deleteMessage(): void;
   hideAvatars: boolean;
-}
+};
 
 interface ChatInputState {
   inCodeMode: boolean;
@@ -60,20 +60,23 @@ class ChatInput extends Component<ChatInputProps, ChatInputState> {
 
   submit(text) {
     const { props, state } = this;
-    const [,,ship,name] = props.station.split('/');
+    const [, , ship, name] = props.station.split('/');
     if (state.inCodeMode) {
-      this.setState({
+      this.setState(
-        inCodeMode: false
+        {
-      }, async () => {
+          inCodeMode: false
-        const output = await props.api.graph.eval(text);
+        },
-        const contents: Content[] = [{ code: { output, expression: text } }];
+        async () => {
-        const post = createPost(contents);
+          const output = await props.api.graph.eval(text);
-        props.api.graph.addPost(ship, name, post);
+          const contents: Content[] = [{ code: { output, expression: text } }];
-      });
+          const post = createPost(contents);
+          props.api.graph.addPost(ship, name, post);
+        }
+      );
       return;
     }
 
-    const post = createPost(tokenizeMessage((text)));
+    const post = createPost(tokenizeMessage(text));
 
     props.deleteMessage();
 
@@ -86,8 +89,8 @@ class ChatInput extends Component<ChatInputProps, ChatInputState> {
       this.chatEditor.current.editor.setValue(url);
       this.setState({ uploadingPaste: false });
     } else {
-      const [,,ship,name] = props.station.split('/');
+      const [, , ship, name] = props.station.split('/');
-      props.api.graph.addPost(ship,name, createPost([{ url }]));
+      props.api.graph.addPost(ship, name, createPost([{ url }]));
     }
   }
 
@@ -110,7 +113,8 @@ class ChatInput extends Component<ChatInputProps, ChatInputState> {
       return;
     }
     Array.from(files).forEach((file) => {
-      this.props.uploadDefault(file)
+      this.props
+        .uploadDefault(file)
         .then(this.uploadSuccess)
         .catch(this.uploadError);
     });
@@ -119,32 +123,40 @@ class ChatInput extends Component<ChatInputProps, ChatInputState> {
   render() {
     const { props, state } = this;
 
-    const color = props.ourContact
+    const color = props.ourContact ? uxToHex(props.ourContact.color) : '000000';
-      ? uxToHex(props.ourContact.color) : '000000';
 
-    const sigilClass = props.ourContact
+    const sigilClass = props.ourContact ? '' : 'mix-blend-diff';
-      ? '' : 'mix-blend-diff';
 
-    const avatar = (
+    const avatar =
-        props.ourContact &&
+      props.ourContact && props.ourContact?.avatar && !props.hideAvatars ? (
-        ((props.ourContact?.avatar) && !props.hideAvatars)
+        <BaseImage
-      )
-      ? <BaseImage
           src={props.ourContact.avatar}
-          height={16}
+          height={24}
-          width={16}
+          width={24}
           style={{ objectFit: 'cover' }}
           borderRadius={1}
           display='inline-block'
         />
-      : <Sigil
+      ) : (
-        ship={window.ship}
+        <Box
-        size={16}
+          width={24}
-        color={`#${color}`}
+          height={24}
-        classes={sigilClass}
+          display='flex'
-        icon
+          justifyContent='center'
-        padding={2}
+          alignItems='center'
-        />;
+          backgroundColor={`#${color}`}
+          borderRadius={1}
+        >
+          <Sigil
+            ship={window.ship}
+            size={16}
+            color={`#${color}`}
+            classes={sigilClass}
+            icon
+            padding={2}
+          />
+        </Box>
+      );
 
     return (
       <Row
@@ -158,7 +170,7 @@ class ChatInput extends Component<ChatInputProps, ChatInputState> {
         className='cf'
         zIndex={0}
       >
-        <Row p='2' alignItems='center'>
+        <Row p='12px 4px 12px 12px' alignItems='center'>
           {avatar}
         </Row>
         <ChatEditor
@@ -170,31 +182,23 @@ class ChatInput extends Component<ChatInputProps, ChatInputState> {
           onPaste={this.onPaste.bind(this)}
           placeholder='Message...'
         />
-        <Box
+        <Box mx={2} flexShrink={0} height='16px' width='16px' flexBasis='16px'>
-          mx={2}
+          {this.props.canUpload ? (
-          flexShrink={0}
+            this.props.uploading ? (
-          height='16px'
+              <LoadingSpinner />
-          width='16px'
+            ) : (
-          flexBasis='16px'
+              <Icon
-        >
+                icon='Links'
-          {this.props.canUpload
+                width='16'
-            ? this.props.uploading
+                height='16'
-              ? <LoadingSpinner />
+                onClick={() =>
-              : <Icon icon='Links'
+                  this.props.promptUpload().then(this.uploadSuccess)
-                width="16"
+                }
-                height="16"
+              />
-                onClick={() => this.props.promptUpload().then(this.uploadSuccess)}
+            )
-                />
+          ) : null}
-            : null
-          }
         </Box>
-        <Box
+        <Box mr={2} flexShrink={0} height='16px' width='16px' flexBasis='16px'>
-          mr={2}
-          flexShrink={0}
-          height='16px'
-          width='16px'
-          flexBasis='16px'
-        >
           <Icon
             icon='Dojo'
             onClick={this.toggleCode}
@@ -206,4 +210,6 @@ class ChatInput extends Component<ChatInputProps, ChatInputState> {
   }
 }
 
-export default withLocalState(withStorage(ChatInput, { accept: 'image/*' }), ['hideAvatars']);
+export default withLocalState(withStorage(ChatInput, { accept: 'image/*' }), [
+  'hideAvatars'
+]);

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

@@ -10,7 +10,7 @@ import React, {
 import moment from 'moment';
 import _ from 'lodash';
 import VisibilitySensor from 'react-visibility-sensor';
-import { Box, Row, Text, Rule, BaseImage } from '@tlon/indigo-react';
+import { Box, Row, Text, Rule, BaseImage, Icon, Col } from '@tlon/indigo-react';
 import { Sigil } from '~/logic/lib/sigil';
 import OverlaySigil from '~/views/components/OverlaySigil';
 import {
@@ -33,12 +33,13 @@ import TextContent from './content/text';
 import CodeContent from './content/code';
 import RemoteContent from '~/views/components/RemoteContent';
 import { Mention } from '~/views/components/MentionText';
+import { Dropdown } from '~/views/components/Dropdown';
 import styled from 'styled-components';
 import useLocalState from '~/logic/state/local';
-import useSettingsState, {selectCalmState} from "~/logic/state/settings";
+import useSettingsState, { selectCalmState } from '~/logic/state/settings';
 import Timestamp from '~/views/components/Timestamp';
 import useContactState from '~/logic/state/contact';
-import {useIdlingState} from '~/logic/lib/idling';
+import { useIdlingState } from '~/logic/lib/idling';
 
 export const DATESTAMP_FORMAT = '[~]YYYY.M.D';
 
@@ -64,39 +65,156 @@ export const DayBreak = ({ when, shimTop = false }: DayBreakProps) => (
   </Row>
 );
 
-export const UnreadMarker = React.forwardRef(({ dayBreak, when, api, association }, ref) => {
+export const UnreadMarker = React.forwardRef(
-  const [visible, setVisible] = useState(false);
+  ({ dayBreak, when, api, association }, ref) => {
-  const idling = useIdlingState();
+    const [visible, setVisible] = useState(false);
-  const dismiss = useCallback(() => {
+    const idling = useIdlingState();
-    api.hark.markCountAsRead(association, '/', 'message');
+    const dismiss = useCallback(() => {
-  }, [api, association]);
+      api.hark.markCountAsRead(association, '/', 'message');
+    }, [api, association]);
 
-  useEffect(() => {
+    useEffect(() => {
-    if(visible && !idling) {
+      if (visible && !idling) {
-      dismiss();
+        dismiss();
-    }
+      }
-  }, [visible, idling]);
+    }, [visible, idling]);
 
+    return (
+      <Row
+        position='absolute'
+        ref={ref}
+        px={2}
+        mt={2}
+        height={5}
+        justifyContent='center'
+        alignItems='center'
+        width='100%'
+      >
+        <Rule borderColor='lightBlue' />
+        <VisibilitySensor onChange={setVisible}>
+          <Text color='blue' fontSize={0} flexShrink='0' px={2}>
+            New messages below
+          </Text>
+        </VisibilitySensor>
+        <Rule borderColor='lightBlue' />
+      </Row>
+    );
+  }
+);
+
+const MessageActionItem = (props) => {
   return (
-  <Row
+    <Row
-    position='absolute'
+      color='black'
-    ref={ref}
+      cursor='pointer'
-    px={2}
+      fontSize={1}
-    mt={2}
+      fontWeight='500'
-    height={5}
+      px={3}
-    justifyContent='center'
+      py={2}
-    alignItems='center'
+      onClick={props.onClick}
-    width='100%'
+    >
-  >
+      <Text fontWeight='500' color={props.color}>
-    <Rule borderColor='lightBlue' />
+        {props.children}
-    <VisibilitySensor onChange={setVisible}>
+      </Text>
-    <Text color='blue' fontSize={0} flexShrink='0' px={2}>
+    </Row>
-      New messages below
+  );
-    </Text>
+};
-    </VisibilitySensor>
+
-    <Rule borderColor='lightBlue' />
+const MessageActions = ({ api, history, msg, group }) => {
-  </Row>
+  const isAdmin = () => group.tags.role.admin.has(window.ship);
-)});
+  const isOwn = () => msg.author === window.ship;
+  return (
+    <Box
+      borderRadius={1}
+      background='white'
+      border='1px solid'
+      borderColor='lightGray'
+      position='absolute'
+      top='-12px'
+      right={2}
+    >
+      <Row>
+        {isOwn() ? (
+          <Box
+            padding={1}
+            size={'24px'}
+            cursor='pointer'
+            onClick={(e) => console.log(e)}
+          >
+            <Icon icon='NullIcon' size={3} />
+          </Box>
+        ) : null}
+        <Box
+          padding={1}
+          size={'24px'}
+          cursor='pointer'
+          onClick={(e) => console.log(e)}
+        >
+          <Icon icon='Chat' size={3} />
+        </Box>
+        <Dropdown
+          dropWidth='250px'
+          width='auto'
+          alignY='top'
+          alignX='right'
+          flexShrink={'0'}
+          offsetY={8}
+          offsetX={-24}
+          options={
+            <Col
+              py={2}
+              backgroundColor='white'
+              color='washedGray'
+              border={1}
+              borderRadius={2}
+              borderColor='lightGray'
+              boxShadow='0px 0px 0px 3px'
+            >
+              {isOwn() ? (
+                <MessageActionItem onClick={(e) => console.log(e)}>
+                  Edit Message
+                </MessageActionItem>
+              ) : null}
+              <MessageActionItem onClick={(e) => console.log(e)}>
+                Reply
+              </MessageActionItem>
+              <MessageActionItem onClick={(e) => console.log(e)}>
+                Copy Message Link
+              </MessageActionItem>
+              {isAdmin() || isOwn() ? (
+                <MessageActionItem onClick={(e) => console.log(e)} color='red'>
+                  Delete Message
+                </MessageActionItem>
+              ) : null}
+              <MessageActionItem onClick={(e) => console.log(e)}>
+                View Signature
+              </MessageActionItem>
+            </Col>
+          }
+        >
+          <Box padding={1} size={'24px'} cursor='pointer'>
+            <Icon icon='Menu' size={3} />
+          </Box>
+        </Dropdown>
+      </Row>
+    </Box>
+  );
+};
+
+const MessageWrapper = (props) => {
+  const { hovering, bind } = useHovering();
+  return (
+    <Box
+      py='1'
+      backgroundColor={hovering ? 'washedGray' : 'transparent'}
+      position='relative'
+      {...bind}
+    >
+      {props.children}
+      {/* {hovering ? <MessageActions {...props} /> : null} */}
+    </Box>
+  );
+};
 
 interface ChatMessageProps {
   msg: Post;
@@ -126,8 +244,7 @@ class ChatMessage extends Component<ChatMessageProps> {
     this.divRef = React.createRef();
   }
 
-  componentDidMount() {
+  componentDidMount() {}
-  }
 
   render() {
     const {
@@ -146,7 +263,7 @@ class ChatMessage extends Component<ChatMessageProps> {
       history,
       api,
       highlighted,
-      fontSize,
+      fontSize
     } = this.props;
 
     let { renderSigil } = this.props;
@@ -170,7 +287,6 @@ class ChatMessage extends Component<ChatMessageProps> {
       .unix(msg['time-sent'] / 1000)
       .format(renderSigil ? 'h:mm A' : 'h:mm');
 
-
     const messageProps = {
       msg,
       timestamp,
@@ -183,7 +299,7 @@ class ChatMessage extends Component<ChatMessageProps> {
       api,
       scrollWindow,
       highlighted,
-      fontSize,
+      fontSize
     };
 
     const unreadContainerStyle = {
@@ -194,7 +310,7 @@ class ChatMessage extends Component<ChatMessageProps> {
       <Box
         ref={this.props.innerRef}
         pt={renderSigil ? 2 : 0}
-        pb={isLastMessage ? 4 : 2}
+        pb={isLastMessage ? '20px' : 0}
         className={containerClass}
         backgroundColor={highlighted ? 'blue' : 'white'}
         style={style}
@@ -203,12 +319,14 @@ class ChatMessage extends Component<ChatMessageProps> {
           <DayBreak when={msg['time-sent']} shimTop={renderSigil} />
         ) : null}
         {renderSigil ? (
-          <>
+          <MessageWrapper {...messageProps}>
-            <MessageAuthor pb={'2px'} {...messageProps} />
+            <MessageAuthor pb={1} {...messageProps} />
-            <Message pl={5} pr={4} {...messageProps} />
+            <Message pl={'44px'} pr={4} {...messageProps} />
-          </>
+          </MessageWrapper>
         ) : (
-          <Message pl={5} pr={4} timestampHover {...messageProps} />
+          <MessageWrapper {...messageProps}>
+            <Message pl={'44px'} pr={4} timestampHover {...messageProps} />
+          </MessageWrapper>
         )}
         <Box style={unreadContainerStyle}>
           {isLastRead ? (
@@ -226,7 +344,9 @@ class ChatMessage extends Component<ChatMessageProps> {
   }
 }
 
-export default React.forwardRef((props, ref) => <ChatMessage {...props} innerRef={ref} />);
+export default React.forwardRef((props, ref) => (
+  <ChatMessage {...props} innerRef={ref} />
+));
 
 export const MessageAuthor = ({
   timestamp,
@@ -239,9 +359,9 @@ export const MessageAuthor = ({
 }) => {
   const osDark = useLocalState((state) => state.dark);
 
-  const theme = useSettingsState(s => s.display.theme);
+  const theme = useSettingsState((s) => s.display.theme);
   const dark = theme === 'dark' || (theme === 'auto' && osDark);
-  const contacts = useContactState(state => state.contacts);
+  const contacts = useContactState((state) => state.contacts);
 
   const datestamp = moment
     .unix(msg['time-sent'] / 1000)
@@ -291,19 +411,30 @@ export const MessageAuthor = ({
         display='inline-block'
         style={{ objectFit: 'cover' }}
         src={contact.avatar}
-        height={16}
+        height={24}
-        width={16}
+        width={24}
         borderRadius={1}
       />
     ) : (
-      <Sigil
+      <Box
-        ship={msg.author}
+        width={24}
-        size={16}
+        height={24}
-        color={color}
+        display='flex'
-        classes={sigilClass}
+        justifyContent='center'
-        icon
+        alignItems='center'
-        padding={2}
+        backgroundColor={color}
-      />
+        borderRadius={1}
+      >
+        <Sigil
+          ship={msg.author}
+          size={12}
+          display='block'
+          color={color}
+          classes={sigilClass}
+          icon
+          padding={0}
+        />
+      </Box>
     );
   return (
     <Box display='flex' alignItems='center' {...rest}>
@@ -311,9 +442,9 @@ export const MessageAuthor = ({
         onClick={() => {
           setShowOverlay(true);
         }}
-        height={16}
+        height={24}
         pr={2}
-        pl={2}
+        pl={'12px'}
         cursor='pointer'
         position='relative'
       >
@@ -340,10 +471,10 @@ export const MessageAuthor = ({
           pt={1}
           pb={1}
           display='flex'
-          alignItems='center'
+          alignItems='baseline'
         >
           <Text
-            fontSize={0}
+            fontSize={1}
             mr={2}
             flexShrink={0}
             mono={nameMono}
@@ -385,13 +516,15 @@ export const Message = ({
   ...rest
 }) => {
   const { hovering, bind } = useHovering();
-  const contacts = useContactState(state => state.contacts);
+  const contacts = useContactState((state) => state.contacts);
   return (
     <Box position='relative' {...rest}>
       {timestampHover ? (
         <Text
           display={hovering ? 'block' : 'none'}
           position='absolute'
+          width='36px'
+          textAlign='right'
           left='0'
           top='3px'
           fontSize={0}
@@ -408,6 +541,7 @@ export const Message = ({
             case 'text':
               return (
                 <TextContent
+                  key={i}
                   api={api}
                   fontSize={1}
                   lineHeight={'20px'}
@@ -415,10 +549,11 @@ export const Message = ({
                 />
               );
             case 'code':
-              return <CodeContent content={content} />;
+              return <CodeContent key={i} content={content} />;
             case 'url':
               return (
                 <Box
+                  key={i}
                   flexShrink={0}
                   fontSize={1}
                   lineHeight='20px'
@@ -452,9 +587,10 @@ export const Message = ({
                 </Box>
               );
             case 'mention':
-              const first = (i) => (i === 0);
+              const first = (i) => i === 0;
               return (
                 <Mention
+                  key={i}
                   first={first(i)}
                   group={group}
                   scrollWindow={scrollWindow}

pkg/interface/src/views/apps/chat/components/content/text.js

@@ -91,7 +91,7 @@ const MessageMarkdown = React.memo((props) => {
   }, []);
 
   return lines.map((line, i) => (
-    <>
+    <React.Fragment key={i}>
       {i !== 0 && <Row height={2} />}
       <ReactMarkdown
         {...rest}
@@ -123,7 +123,7 @@ const MessageMarkdown = React.memo((props) => {
           ]
         ]}
       />
-    </>
+    </React.Fragment>
   ));
 });
 

pkg/interface/src/views/apps/launch/app.js

@@ -32,6 +32,7 @@ import {
 } from '~/logic/lib/tutorialModal';
 import useLaunchState from '~/logic/state/launch';
 import useSettingsState, { selectCalmState } from '~/logic/state/settings';
+import useMetadataState from '~/logic/state/metadata';
 
 
 const ScrollbarLessBox = styled(Box)`
@@ -48,6 +49,7 @@ export default function LaunchApp(props) {
   const baseHash = useLaunchState(state => state.baseHash);
   const [hashText, setHashText] = useState(baseHash);
   const [exitingTut, setExitingTut] = useState(false);
+  const associations = useMetadataState(s => s.associations);
   const hashBox = (
     <Box
       position={["relative", "absolute"]}
@@ -78,7 +80,7 @@ export default function LaunchApp(props) {
 
   useEffect(() => {
     if(query.get('tutorial')) {
-      if(hasTutorialGroup(props)) {
+      if(hasTutorialGroup({ associations })) {
         nextTutStep();
       } else {
         showModal();
@@ -92,7 +94,7 @@ export default function LaunchApp(props) {
   let { hideGroups } = useLocalState(tutSelector);
   !hideGroups ? { hideGroups } = calmState : null;
 
-  const waiter = useWaitForProps(props);
+  const waiter = useWaitForProps({ ...props, associations });
 
   const { modal, showModal } = useModal({
     position: 'relative',
@@ -105,7 +107,7 @@ export default function LaunchApp(props) {
       };
       const onContinue = async (e) => {
         e.stopPropagation();
-        if(!hasTutorialGroup(props)) {
+        if(!hasTutorialGroup({ associations })) {
           await props.api.groups.join(TUTORIAL_HOST, TUTORIAL_GROUP);
           await props.api.settings.putEntry('tutorial', 'joined', Date.now());
           await waiter(hasTutorialGroup);

pkg/interface/src/views/apps/links/components/LinkItem.tsx

@@ -148,17 +148,13 @@ export const LinkItem = (props: LinkItemProps): ReactElement => {
           </Anchor>
         </Text>
       </Box>
-
       <Row minWidth='0' flexShrink={0} width="100%" justifyContent="space-between" py={3} bg="white">
-
       <Author
         showImage
         ship={author}
         date={node.post['time-sent']}
         group={group}
-        api={api}
+      />
-      ></Author>
-
       <Box ml="auto">
         <Link
           to={node.post.pending ? '#' : `${baseUrl}/${index}`}

pkg/interface/src/views/apps/notifications/header.tsx

@@ -21,7 +21,7 @@ function Author(props: { patp: string; last?: boolean }): ReactElement {
   const contact: Contact | undefined = contacts?.[`~${props.patp}`];
 
   const showNickname = useShowNickname(contact);
-  const name = contact?.nickname || `~${props.patp}`;
+  const name = showNickname ? contact.nickname : `~${props.patp}`;
 
   return (
     <Text mono={!showNickname}>

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

@@ -85,7 +85,7 @@ export function ProfileHeaderImageEdit(props: any): ReactElement {
 
 export function EditProfile(props: any): ReactElement {
   const { contact, ship, api } = props;
-  const isPublic = useContactState(state => state.isContactPublic);
+  const isPublic = useContactState((state) => state.isContactPublic);
   const [hideCover, setHideCover] = useState(false);
 
   const handleHideCover = (value) => {
@@ -150,7 +150,7 @@ export function EditProfile(props: any): ReactElement {
           <Form width='100%' height='100%'>
             <ProfileHeader>
               <ProfileControls>
-                <Row>
+                <Row alignItems='baseline'>
                   <Button
                     type='submit'
                     display='inline'
@@ -178,7 +178,11 @@ export function EditProfile(props: any): ReactElement {
                 </Row>
                 <ProfileStatus contact={contact} />
               </ProfileControls>
-              <ProfileImages hideCover={hideCover} contact={contact} ship={ship}>
+              <ProfileImages
+                hideCover={hideCover}
+                contact={contact}
+                ship={ship}
+              >
                 <ProfileHeaderImageEdit
                   contact={contact}
                   setFieldValue={setFieldValue}
@@ -203,11 +207,7 @@ export function EditProfile(props: any): ReactElement {
               <MarkdownField id='bio' mb={3} />
             </Col>
             <Checkbox mb={3} id='isPublic' label='Public Profile' />
-            <GroupSearch
+            <GroupSearch label='Pinned Groups' id='groups' publicOnly />
-              label='Pinned Groups'
-              id='groups'
-              publicOnly
-            />
             <AsyncButton primary loadingText='Updating...' border mt={3}>
               Submit
             </AsyncButton>

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

@@ -15,8 +15,8 @@ export function ProfileHeader(props: any): ReactElement {
   return (
     <Box
       border='1px solid'
-      borderColor='lightGray'
+      borderColor='washedGray'
-      borderRadius='2'
+      borderRadius='3'
       overflow='hidden'
       marginBottom='calc(64px + 2rem)'
     >
@@ -65,7 +65,7 @@ export function ProfileImages(props: any): ReactElement {
 
   return (
     <>
-      <Row ref={anchorRef} width='100%' height='300px' position='relative'>
+      <Row ref={anchorRef} width='100%' height='400px' position='relative'>
         {cover}
         <Center position='absolute' width='100%' height='100%'>
           {props.children}
@@ -74,7 +74,7 @@ export function ProfileImages(props: any): ReactElement {
       <Box
         height='128px'
         width='128px'
-        borderRadius='2'
+        borderRadius='3'
         overflow='hidden'
         position='absolute'
         left='50%'

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

@@ -39,7 +39,7 @@ export function ViewProfile(props: any): ReactElement {
       </ProfileHeader>
       <Row pb={2} alignItems='center' width='100%'>
         <Center width='100%'>
-          <Text>
+          <Text fontWeight='500'>
             {!hideNicknames && contact?.nickname ? contact.nickname : ''}
           </Text>
         </Center>
@@ -51,7 +51,7 @@ export function ViewProfile(props: any): ReactElement {
           </Text>
         </Center>
       </Row>
-      <Col pb={2} alignItems='center' justifyContent='center' width='100%'>
+      <Col pb={2} mt='3' alignItems='center' justifyContent='center' width='100%'>
         <Center flexDirection='column' maxWidth='32rem'>
           <RichText width='100%' disableRemoteContent>
             {contact?.bio ? contact.bio : ''}

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

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { Box, Text, Col, Anchor } from '@tlon/indigo-react';
+import { Box, Text, Col, Anchor, Row } from '@tlon/indigo-react';
 import ReactMarkdown from 'react-markdown';
 import bigInt from 'big-integer';
 
@@ -9,6 +9,7 @@ import { Comments } from '~/views/components/Comments';
 import { NoteNavigation } from './NoteNavigation';
 import GlobalApi from '~/logic/api/global';
 import { getLatestRevision, getComments } from '~/logic/lib/publish';
+import { roleForShip } from '~/logic/lib/group';
 import Author from '~/views/components/Author';
 import { Contacts, GraphNode, Graph, Association, Unreads, Group } from '@urbit/api';
 
@@ -54,29 +55,37 @@ export function Note(props: NoteProps & RouteComponentProps) {
     api.hark.markEachAsRead(props.association, '/',`/${index[1]}/1/1`, 'note', 'publish');
   }, [props.association, props.note]);
 
-  let adminLinks: JSX.Element | null = null;
+  let adminLinks: JSX.Element[] = [];
+  const ourRole = roleForShip(group, window.ship);
   if (window.ship === note?.post?.author) {
-    adminLinks = (
+    adminLinks.push(
-      <Box display="inline-block" verticalAlign="middle">
+        <Link
-        <Link to={`${baseUrl}/edit`}>
+          style={{ 'display': 'inline-block' }}
-        <Text
+          to={`${baseUrl}/edit`}
-          color="green"
-          ml={2}
         >
-          Update
+          <Text
-        </Text>
+            color="blue"
+            ml={2}
+          >
+            Update
+          </Text>
       </Link>
-        <Text
+    )
-          color="red"
+  };
-          ml={2}
+
-          onClick={deletePost}
+  if (window.ship === note?.post?.author || ourRole === "admin") {
-          style={{ cursor: 'pointer' }}
+    adminLinks.push(
-        >
+      <Text
-          Delete
+        color="red"
-        </Text>
+        display='inline-block'
-      </Box>
+        ml={2}
-    );
+        onClick={deletePost}
-  }
+        style={{ cursor: 'pointer' }}
+      >
+        Delete
+      </Text>
+    )
+  };
 
   const windowRef = React.useRef(null);
   useEffect(() => {
@@ -103,13 +112,15 @@ export function Note(props: NoteProps & RouteComponentProps) {
       </Link>
       <Col>
         <Text display="block" mb={2}>{title || ''}</Text>
-        <Box display="flex">
+        <Row alignItems="center">
           <Author
+            showImage
             ship={post?.author}
             date={post?.['time-sent']}
+            group={group}
           />
-          <Text ml={2}>{adminLinks}</Text>
+          <Text ml={1}>{adminLinks}</Text>
-        </Box>
+        </Row>
       </Col>
       <Box color="black" className="md" style={{ overflowWrap: 'break-word', overflow: 'hidden' }}>
         <ReactMarkdown source={body} linkTarget={'_blank'} renderers={renderers} />

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

@@ -12,7 +12,6 @@ import {
   getSnippet
 } from '~/logic/lib/publish';
 import { Unreads } from '@urbit/api';
-import GlobalApi from '~/logic/api/global';
 import ReactMarkdown from 'react-markdown';
 import useHarkState from '~/logic/state/hark';
 
@@ -21,7 +20,6 @@ interface NotePreviewProps {
   book: string;
   node: GraphNode;
   baseUrl: string;
-  api: GlobalApi;
   group: Group;
 }
 
@@ -96,7 +94,6 @@ export function NotePreview(props: NotePreviewProps) {
           date={post?.['time-sent']}
           group={group}
           unread={isUnread}
-          api={props.api}
         />
         <Box ml="auto" mr={1}>
           <Link to={url}>

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

@@ -5,13 +5,11 @@ import { Col, Box, Text, Row } from '@tlon/indigo-react';
 import { Contacts, Rolodex, Groups, Associations, Graph, Association, Unreads } from '@urbit/api';
 
 import { NotebookPosts } from './NotebookPosts';
-import GlobalApi from '~/logic/api/global';
 import { useShowNickname } from '~/logic/lib/util';
 import useContactState from '~/logic/state/contact';
 import useGroupState from '~/logic/state/group';
 
 interface NotebookProps {
-  api: GlobalApi;
   ship: string;
   book: string;
   graph: Graph;
@@ -40,7 +38,6 @@ export function Notebook(props: NotebookProps & RouteComponentProps): ReactEleme
   const contacts = useContactState(state => state.contacts);
 
   const contact = contacts?.[`~${ship}`];
-  console.log(association.resource);
 
   const showNickname = useShowNickname(contact);
 
@@ -61,7 +58,6 @@ export function Notebook(props: NotebookProps & RouteComponentProps): ReactEleme
         host={ship}
         book={book}
         baseUrl={props.baseUrl}
-        api={props.api}
         group={group}
       />
     </Col>

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

@@ -11,7 +11,6 @@ interface NotebookPostsProps {
   baseUrl: string;
   hideAvatars?: boolean;
   hideNicknames?: boolean;
-  api: GlobalApi;
   group: Group;
 }
 
@@ -29,7 +28,6 @@ export function NotebookPosts(props: NotebookPostsProps) {
               contact={contacts[`~${node.post.author}`]}
               node={node}
               baseUrl={props.baseUrl}
-              api={props.api}
               group={props.group}
             />
           )

pkg/interface/src/views/apps/settings/components/lib/BackButton.tsx

@@ -4,8 +4,16 @@ import { Text } from '@tlon/indigo-react';
 
 export function BackButton(props: {}) {
   return (
-    <Link to="/~settings">
+    <Link to='/~settings'>
-      <Text display={["block", "none"]} fontSize="2" fontWeight="medium">{"<- Back to System Preferences"}</Text>
+      <Text
+        display={['block', 'none']}
+        fontSize='2'
+        fontWeight='medium'
+        p={4}
+        pb={0}
+      >
+        {'<- Back to System Preferences'}
+      </Text>
     </Link>
   );
 }

pkg/interface/src/views/apps/settings/components/lib/S3Form.tsx

@@ -11,12 +11,12 @@ import {
   Anchor
 } from '@tlon/indigo-react';
 
-import GlobalApi from "~/logic/api/global";
+import GlobalApi from '~/logic/api/global';
-import { BucketList } from "./BucketList";
+import { BucketList } from './BucketList';
 import { S3State } from '~/types/s3-update';
 import useS3State from '~/logic/state/storage';
 import { BackButton } from './BackButton';
-import {StorageState} from '~/types';
+import { StorageState } from '~/types';
 import useStorageState from '~/logic/state/storage';
 
 interface FormSchema {
@@ -33,7 +33,7 @@ interface S3FormProps {
 
 export default function S3Form(props: S3FormProps): ReactElement {
   const { api } = props;
-  const s3 = useStorageState(state => state.s3);
+  const s3 = useStorageState((state) => state.s3);
 
   const onSubmit = useCallback(
     (values: FormSchema) => {
@@ -54,7 +54,8 @@ export default function S3Form(props: S3FormProps): ReactElement {
 
   return (
     <>
-      <Col p="5" pt="4" borderBottom="1" borderBottomColor="washedGray">
+      <BackButton />
+      <Col p='5' pt='4' borderBottom='1' borderBottomColor='washedGray'>
         <Formik
           initialValues={
             {
@@ -68,42 +69,42 @@ export default function S3Form(props: S3FormProps): ReactElement {
           onSubmit={onSubmit}
         >
           <Form>
-            <BackButton/>
+            <Col maxWidth='600px' gapY='5'>
-            <Col maxWidth="600px" gapY="5">
+              <Col gapY='1' mt='0'>
-              <Col gapY="1" mt="0">
+                <Text color='black' fontSize={2} fontWeight='medium'>
-                <Text color="black" fontSize={2} fontWeight="medium">
                   S3 Storage Setup
                 </Text>
                 <Text gray>
                   Store credentials for your S3 object storage buckets on your
                   Urbit ship, and upload media freely to various modules.
                   <Anchor
-                    target="_blank"
+                    target='_blank'
                     style={{ textDecoration: 'none' }}
-                    borderBottom="1"
+                    borderBottom='1'
-                    ml="1"
+                    ml='1'
-                    href="https://urbit.org/using/operations/using-your-ship/#bucket-setup">
+                    href='https://urbit.org/using/operations/using-your-ship/#bucket-setup'
+                  >
                     Learn more
                   </Anchor>
                 </Text>
               </Col>
-              <Input label="Endpoint" id="s3endpoint" />
+              <Input label='Endpoint' id='s3endpoint' />
-              <Input label="Access Key ID" id="s3accessKeyId" />
+              <Input label='Access Key ID' id='s3accessKeyId' />
               <Input
-                type="password"
+                type='password'
-                label="Secret Access Key"
+                label='Secret Access Key'
-                id="s3secretAccessKey"
+                id='s3secretAccessKey'
               />
-              <Button style={{ cursor: "pointer" }} type="submit">
+              <Button style={{ cursor: 'pointer' }} type='submit'>
                 Submit
               </Button>
             </Col>
           </Form>
         </Formik>
       </Col>
-      <Col maxWidth="600px" p="5" gapY="4">
+      <Col maxWidth='600px' p='5' gapY='4'>
-        <Col gapY="1">
+        <Col gapY='1'>
-          <Text color="black" mb={4} fontSize={2} fontWeight="medium">
+          <Text color='black' mb={4} fontSize={2} fontWeight='medium'>
             S3 Buckets
           </Text>
           <Text gray>

pkg/interface/src/views/apps/settings/settings.tsx

@@ -1,35 +1,42 @@
-import React, { ReactNode } from "react";
+import React, { ReactNode } from 'react';
-import { useLocation } from "react-router-dom";
+import { useLocation } from 'react-router-dom';
-import Helmet from "react-helmet";
+import Helmet from 'react-helmet';
 
 import { Text, Box, Col, Row } from '@tlon/indigo-react';
 
-import { NotificationPreferences } from "./components/lib/NotificationPref";
+import { NotificationPreferences } from './components/lib/NotificationPref';
-import DisplayForm from "./components/lib/DisplayForm";
+import DisplayForm from './components/lib/DisplayForm';
-import S3Form from "./components/lib/S3Form";
+import S3Form from './components/lib/S3Form';
-import { CalmPrefs } from "./components/lib/CalmPref";
+import { CalmPrefs } from './components/lib/CalmPref';
-import SecuritySettings from "./components/lib/Security";
+import SecuritySettings from './components/lib/Security';
-import { LeapSettings } from "./components/lib/LeapSettings";
+import { LeapSettings } from './components/lib/LeapSettings';
-import { useHashLink } from "~/logic/lib/useHashLink";
+import { useHashLink } from '~/logic/lib/useHashLink';
-import { SidebarItem as BaseSidebarItem } from "~/views/landscape/components/SidebarItem";
+import { SidebarItem as BaseSidebarItem } from '~/views/landscape/components/SidebarItem';
-import { PropFunc } from "~/types";
+import { PropFunc } from '~/types';
 
 export const Skeleton = (props: { children: ReactNode }) => (
-  <Box height="100%" width="100%" px={[0, 3]} pb={[0, 3]} borderRadius={1}>
+  <Box height='100%' width='100%' px={[0, 3]} pb={[0, 3]} borderRadius={1}>
     <Box
-      height="100%"
+      display='grid'
-      width="100%"
+      gridTemplateColumns={[
-      borderRadius={1}
+        '100%',
-      bg="white"
+        'minmax(150px, 1fr) 3fr',
+        'minmax(250px, 1fr) 4fr'
+      ]}
+      gridTemplateRows='100%'
+      height='100%'
+      width='100%'
+      borderRadius={2}
+      bg='white'
       border={1}
-      borderColor="washedGray"
+      borderColor='washedGray'
     >
       {props.children}
     </Box>
   </Box>
 );
 
-type ProvSideProps = "to" | "selected";
+type ProvSideProps = 'to' | 'selected';
 type BaseProps = PropFunc<typeof BaseSidebarItem>;
 function SidebarItem(props: { hash: string } & Omit<BaseProps, ProvSideProps>) {
   const { hash, icon, text, ...rest } = props;
@@ -54,16 +61,15 @@ function SettingsItem(props: { children: ReactNode }) {
   const { children } = props;
 
   return (
-    <Box borderBottom="1" borderBottomColor="washedGray">
+    <Box borderBottom='1' borderBottomColor='washedGray'>
       {children}
     </Box>
   );
 }
 
 export default function SettingsScreen(props: any) {
-
   const location = useLocation();
-  const hash = location.hash.slice(1)
+  const hash = location.hash.slice(1);
 
   return (
     <>
@@ -71,68 +77,49 @@ export default function SettingsScreen(props: any) {
         <title>Landscape - Settings</title>
       </Helmet>
       <Skeleton>
-        <Row height="100%" overflow="hidden">
+        <Col
-          <Col
+          height='100%'
-            height="100%"
+          borderRight='1'
-            borderRight="1"
+          borderRightColor='washedGray'
-            borderRightColor="washedGray"
+          display={hash === '' ? 'flex' : ['none', 'flex']}
-            display={hash === "" ? "flex" : ["none", "flex"]}
+          width='100%'
-            minWidth="250px"
+          overflowY='auto'
-            width="100%"
+        >
-            maxWidth={["100vw", "350px"]}
+          <Text display='block' mt='4' mb='3' mx='3' fontSize='2' fontWeight='700'>
-          >
+            System Preferences
-            <Text
+          </Text>
-              display="block"
+          <Col>
-              my="4"
+            <SidebarItem
-              mx="3"
+              icon='Inbox'
-              fontSize="2"
+              text='Notifications'
-              fontWeight="medium"
+              hash='notifications'
-            >
+            />
-              System Preferences
+            <SidebarItem icon='Image' text='Display' hash='display' />
-            </Text>
+            <SidebarItem icon='Upload' text='Remote Storage' hash='s3' />
-            <Col gapY="1">
+            <SidebarItem icon='LeapArrow' text='Leap' hash='leap' />
-              <SidebarItem
+            <SidebarItem icon='Node' text='CalmEngine' hash='calm' />
-                icon="Inbox"
+            <SidebarItem
-                text="Notifications"
+              icon='Locked'
-                hash="notifications"
+              text='Devices + Security'
-              />
+              hash='security'
-              <SidebarItem icon="Image" text="Display" hash="display" />
+            />
-              <SidebarItem icon="Upload" text="Remote Storage" hash="s3" />
-              <SidebarItem icon="LeapArrow" text="Leap" hash="leap" />
-              <SidebarItem icon="Node" text="CalmEngine" hash="calm" />
-              <SidebarItem
-                icon="Locked"
-                text="Devices + Security"
-                hash="security"
-              />
-            </Col>
           </Col>
-          <Col flexGrow={1} overflowY="auto">
+        </Col>
-            <SettingsItem>
+        <Col flexGrow={1} overflowY='auto'>
-              {hash === "notifications" && (
+          <SettingsItem>
-                <NotificationPreferences
+            {hash === 'notifications' && (
-                  {...props}
+              <NotificationPreferences
-                  graphConfig={props.notificationsGraphConfig}
+                {...props}
-                />
+                graphConfig={props.notificationsGraphConfig}
-              )}
+              />
-              {hash === "display" && (
+            )}
-                <DisplayForm api={props.api} />
+            {hash === 'display' && <DisplayForm api={props.api} />}
-              )}
+            {hash === 's3' && <S3Form api={props.api} />}
-              {hash === "s3" && (
+            {hash === 'leap' && <LeapSettings api={props.api} />}
-                <S3Form api={props.api} />
+            {hash === 'calm' && <CalmPrefs api={props.api} />}
-              )}
+            {hash === 'security' && <SecuritySettings api={props.api} />}
-              {hash === "leap" && (
+          </SettingsItem>
-                <LeapSettings api={props.api} />
+        </Col>
-              )}
-              {hash === "calm" && (
-                <CalmPrefs api={props.api} />
-              )}
-              {hash === "security" && (
-                <SecuritySettings api={props.api} />
-              )}
-            </SettingsItem>
-          </Col>
-        </Row>
       </Skeleton>
     </>
   );

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

@@ -11,7 +11,6 @@ import useSettingsState, {selectCalmState} from "~/logic/state/settings";
 import useLocalState from "~/logic/state/local";
 import OverlaySigil from './OverlaySigil';
 import { Sigil } from '~/logic/lib/sigil';
-import GlobalApi from '~/logic/api/global';
 import Timestamp from './Timestamp';
 import useContactState from '~/logic/state/contact';
 
@@ -22,7 +21,6 @@ interface AuthorProps {
   children?: ReactNode;
   unread?: boolean;
   group: Group;
-  api?: GlobalApi;
 }
 
 // eslint-disable-next-line max-lines-per-function

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

@@ -10,6 +10,7 @@ import { Group } from '@urbit/api';
 import GlobalApi from '~/logic/api/global';
 import Author from '~/views/components/Author';
 import { MentionText } from '~/views/components/MentionText';
+import { roleForShip } from '~/logic/lib/group';
 import { getLatestCommentRevision } from '~/logic/lib/publish';
 
 const ClickBox = styled(Box)`
@@ -31,7 +32,7 @@ interface CommentItemProps {
 export function CommentItem(props: CommentItemProps): ReactElement {
   const { ship, name, api, comment, group } = props;
   const [, post] = getLatestCommentRevision(comment);
-  const disabled = props.pending || window.ship !== post?.author;
+  const disabled = props.pending;
 
   const onDelete = async () => {
     await api.graph.removeNodes(ship, name, [comment.post?.index]);
@@ -41,6 +42,29 @@ export function CommentItem(props: CommentItemProps): ReactElement {
   const commentIndex = commentIndexArray[commentIndexArray.length - 1];
   const updateUrl = `${props.baseUrl}/${commentIndex}`;
 
+  const adminLinks: JSX.Element[] = [];
+  const ourRole = roleForShip(group, window.ship);
+  if (window.ship == post?.author && !disabled) {
+    adminLinks.push(
+      <Link to={updateUrl}>
+        <Text
+          color="blue"
+          ml={2}
+        >
+          Update
+        </Text>
+      </Link>
+    )
+  };
+
+  if ((window.ship == post?.author || ourRole == "admin") && !disabled) {
+    adminLinks.push(
+      <ClickBox display="inline-block" color="red" onClick={onDelete}>
+        <Text color='red'>Delete</Text>
+      </ClickBox>
+    )
+  };
+
   return (
     <Box mb={4} opacity={post?.pending ? '60%' : '100%'}>
       <Row bg="white" my={3}>
@@ -50,23 +74,10 @@ export function CommentItem(props: CommentItemProps): ReactElement {
           date={post?.['time-sent']}
           unread={props.unread}
           group={group}
-          api={api}
         >
-          {!disabled && (
+          <Row alignItems="center">
-            <Box display="inline-block" verticalAlign="middle">
+            {adminLinks}
-              <Link to={updateUrl}>
+          </Row>
-                <Text
-                  color="green"
-                  ml={2}
-                >
-                  Update
-                </Text>
-              </Link>
-              <ClickBox display="inline-block" color="red" onClick={onDelete}>
-                <Text color='red'>Delete</Text>
-              </ClickBox>
-            </Box>
-          )}
         </Author>
       </Row>
       <Box mb={2}>

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

@@ -51,7 +51,6 @@ class RemoteContent extends Component<RemoteContentProps, RemoteContentState> {
   }
 
   save = () => {
-    console.log(`saving for: ${this.props.url}`);
     if(this.saving) {
       return;
     }
@@ -60,7 +59,6 @@ class RemoteContent extends Component<RemoteContentProps, RemoteContentState> {
   };
 
   restore = () => {
-    console.log(`restoring for: ${this.props.url}`);
     this.saving = false;
     this.props.restore();
   }

pkg/interface/src/views/components/StatusBar.js

@@ -9,6 +9,7 @@ import {
   Button,
   BaseImage
 } from '@tlon/indigo-react';
+
 import ReconnectButton from './ReconnectButton';
 import { Dropdown } from './Dropdown';
 import { StatusBarItem } from './StatusBarItem';
@@ -19,6 +20,7 @@ import { useTutorialModal } from './useTutorialModal';
 
 import useHarkState from '~/logic/state/hark';
 import useInviteState from '~/logic/state/invite';
+import useContactState from '~/logic/state/contact';
 import { useHistory } from 'react-router-dom';
 import useLocalState, { selectLocalState } from '~/logic/state/local';
 import useSettingsState, { selectCalmState } from '~/logic/state/settings';
@@ -26,8 +28,9 @@ import useSettingsState, { selectCalmState } from '~/logic/state/settings';
 const localSel = selectLocalState(['toggleOmnibox']);
 
 const StatusBar = (props) => {
-  const { ourContact, api, ship } = props;
+  const { api, ship } = props;
   const history = useHistory();
+  const ourContact = useContactState((state) => state.contacts[`~${ship}`]);
   const notificationsCount = useHarkState((state) => state.notificationsCount);
   const doNotDisturb = useHarkState((state) => state.doNotDisturb);
   const inviteState = useInviteState((state) => state.invites);
@@ -38,7 +41,7 @@ const StatusBar = (props) => {
   const { toggleOmnibox } = useLocalState(localSel);
   const { hideAvatars } = useSettingsState(selectCalmState);
 
-  const color = !!ourContact ? `#${uxToHex(props.ourContact.color)}` : '#000';
+  const color = !!ourContact ? `#${uxToHex(ourContact.color)}` : '#000';
   const xPadding = !hideAvatars && ourContact?.avatar ? '0' : '2';
   const bgColor = !hideAvatars && ourContact?.avatar ? '' : color;
   const profileImage =

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

@@ -9,15 +9,13 @@ import {
   StatelessAsyncButton as AsyncButton,
   StatelessAsyncButton
 } from './StatelessAsyncButton';
-import { Notebooks, Graphs, Inbox } from '@urbit/api';
+import { Graphs } from '@urbit/api';
 import useGraphState from '~/logic/state/graph';
 
 interface UnjoinedResourceProps {
   association: Association;
   api: GlobalApi;
   baseUrl: string;
-  notebooks: Notebooks;
-  inbox: Inbox;
 }
 
 function isJoined(path: string) {
@@ -31,7 +29,7 @@ function isJoined(path: string) {
 }
 
 export function UnjoinedResource(props: UnjoinedResourceProps) {
-  const { api, notebooks, inbox } = props;
+  const { api } = props;
   const history = useHistory();
   const rid = props.association.resource;
   const appName = props.association['app-name'];
@@ -52,7 +50,7 @@ export function UnjoinedResource(props: UnjoinedResourceProps) {
     if (isJoined(rid)({ graphKeys })) {
       history.push(`${props.baseUrl}/resource/${app}${rid}`);
     }
-  }, [props.association, inbox, graphKeys, notebooks]);
+  }, [props.association, graphKeys]);
 
   return (
     <Center p={6}>

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

@@ -40,7 +40,7 @@ interface VirtualScrollerProps<T> {
   data: BigIntOrderedMap<T>;
   /**
    * The component to render the items
-   * 
+   *
    * @remarks
    *
    * This component must be referentially stable, so either use `useCallback` or
@@ -157,7 +157,7 @@ export default class VirtualScroller<T> extends Component<VirtualScrollerProps<T
       this.loaded.top = true;
       this.loaded.bottom = true;
     }
-      
+
     this.updateVisible(0);
     this.resetScroll();
     this.loadRows(false);
@@ -493,7 +493,7 @@ export default class VirtualScroller<T> extends Component<VirtualScrollerProps<T
       <>
         {!IS_IOS && (<Box borderRadius="3" top ={isTop ? "0" : undefined} bottom={!isTop ? "0" : undefined} ref={el => { this.scrollRef = el; }} right="0" height="50px" position="absolute" width="4px" backgroundColor="lightGray" />)}
 
-      <ScrollbarLessBox overflowY='scroll' ref={this.setWindow} onScroll={this.onScroll} style={{ ...style, ...{ transform }, "-webkit-overflow-scrolling": "auto" }}>
+      <ScrollbarLessBox overflowY='scroll' ref={this.setWindow} onScroll={this.onScroll} style={{ ...style, ...{ transform }, "WebkitOverflowScrolling": "auto" }}>
         <Box style={{ transform, width: 'calc(100% - 4px)' }}>
           {(isTop ? !atStart : !atEnd) && (<Center height="5">
             <LoadingSpinner />

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

@@ -16,9 +16,7 @@ export function useTutorialModal(
       setTutorialRef(anchorRef.current);
     }
 
-    return () => {
+    return () => {}
-      console.log(tutorialProgress);
-    }
   }, [tutorialProgress, show, anchorRef]);
 
   return show && onProgress === tutorialProgress;

pkg/interface/src/views/css/fonts.css

@@ -10,16 +10,14 @@
   font-family: 'Inter';
   font-style: normal;
   font-weight: 500;
-  src: url("/~landscape/fonts/inter-medium.woff2") format("woff2"),
+  src: url("https://media.urbit.org/fonts/Inter-Medium.woff2") format("woff2");
-       url("https://media.urbit.org/fonts/Inter-Medium.woff2") format("woff2");
 }
 
 @font-face {
   font-family: 'Inter';
   font-style: normal;
   font-weight: 600;
-  src: url("/~landscape/fonts/inter-semibold.woff2") format("woff2"),
+  src: url("https://media.urbit.org/fonts/Inter-SemiBold.woff2") format("woff2");
-       url("https://media.urbit.org/fonts/Inter-SemiBold.woff2") format("woff2");
 }
 
 @font-face {

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

@@ -158,8 +158,6 @@ export function GroupsPane(props: GroupsPaneProps) {
                 baseUrl={baseUrl}
               >
                 <UnjoinedResource
-                  notebooks={props.notebooks}
-                  inbox={props.inbox}
                   baseUrl={baseUrl}
                   api={api}
                   association={association}
@@ -191,9 +189,8 @@ export function GroupsPane(props: GroupsPaneProps) {
       <Route
         path={relativePath('')}
         render={(routeProps) => {
-          const hasDescription = groupAssociation?.metadata?.description;
+          const channelCount = Object.keys(associations?.graph ?? {}).filter((e) => {
-          const channelCount = Object.keys(props?.associations?.graph ?? {}).filter((e) => {
+            return associations?.graph?.[e]?.['group'] === groupPath;
-            return props?.associations?.graph?.[e]?.['group'] === groupPath;
           }).length;
           let summary: ReactNode;
           if(groupAssociation?.group) {

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

@@ -15,7 +15,7 @@ export function MetadataIcon(props: MetadataIconProps) {
   const bgColor = metadata.picture ? {} : { bg: `#${uxToHex(metadata.color)}` };
 
   return (
-    <Box {...bgColor} {...rest} borderRadius={2} boxShadow="inset 0 0 0 1px" color="lightGray" overflow="hidden">
+    <Box {...bgColor} {...rest} borderRadius={1} boxShadow="inset 0 0 0 1px" color="lightGray" overflow="hidden">
       {metadata.picture && <Image height="100%" src={metadata.picture} />}
     </Box>
   );

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

@@ -37,7 +37,6 @@ interface SidebarProps {
   api: GlobalApi;
   selected?: string;
   selectedGroup?: string;
-  includeUnmanaged?: boolean;
   apps: SidebarAppConfigs;
   baseUrl: string;
   mobileHide?: boolean;

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

@@ -30,7 +30,7 @@ export const SidebarItem = ({
       bgActive="washedGray"
       display="flex"
       px="3"
-      py="1"
+      py="2"
       justifyContent="space-between"
       {...rest}
     >

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

@@ -5,7 +5,6 @@ import { Associations } from '@urbit/api/metadata';
 
 import { Sidebar } from './Sidebar/Sidebar';
 import GlobalApi from '~/logic/api/global';
-import GlobalSubscription from '~/logic/subscription/global';
 import { useGraphModule } from './Sidebar/Apps';
 import { Body } from '~/views/components/Body';
 import { Workspace } from '~/types/workspace';
@@ -16,14 +15,11 @@ import ErrorBoundary from '~/views/components/ErrorBoundary';
 interface SkeletonProps {
   children: ReactNode;
   recentGroups: string[];
-  linkListening: Set<Path>;
   selected?: string;
   selectedApp?: AppName;
   baseUrl: string;
   mobileHide?: boolean;
   api: GlobalApi;
-  subscription: GlobalSubscription;
-  includeUnmanaged: boolean;
   workspace: Workspace;
 }
 

pkg/interface/src/wdyr.js

@@ -0,0 +1,8 @@
+import React from 'react';
+
+if (process.env.NODE_ENV === 'development') {
+  const whyDidYouRender = require('@welldone-software/why-did-you-render');
+  whyDidYouRender(React, {
+    trackAllPureComponents: true,
+  });
+}