Merge remote-tracking branch 'origin/release/next-userspace' into lf/int-fixes

bin/solid.pill

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:19402ec89976ea76e0e3a25a5a2e49ac5d03b152efd24ee424cf80ccc8c3717b
-size 12635707
+oid sha256:c593531a59d9cfc2fa601857d908a14f5f059ede35cef35260efa832b96d8dbc
+size 12744527

pkg/arvo/app/glob.hoon

@@ -5,7 +5,7 @@
 /-  glob, *resource
 /+  default-agent, verb, dbug
 |%
-++  landscape-hash  0v1qbab.k47iv.q3fmj.is15l.a1r81
+++  landscape-hash  0vrtecf.f9tsp.2o061.dehi8.5ifar
 ++  btc-wallet-hash  0v7.v4dng.o33qi.kc497.5jc02.ke5es
 +$  state-0  [%0 hash=@uv glob=(unit (each glob:glob tid=@ta))]
 +$  state-1  [%1 =globs:glob]

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.3c8b9262f2eb128cc5ba.js"></script>
+    <script src="/~landscape/js/bundle/index.c0b37c720a51e5cdcf6c.js"></script>
   </body>
 </html>

pkg/arvo/app/metadata-store.hoon

@@ -107,6 +107,7 @@
 +$  state-9    [%9 base-state-3]
 +$  state-10   [%10 base-state-3]
 +$  state-11   [%11 base-state-3]
++$  state-12   [%12 base-state-3]
 +$  versioned-state
   $%  state-0
       state-1
@@ -120,10 +121,11 @@
       state-9
       state-10
       state-11
+      state-12
   ==
 ::
 +$  inflated-state
-  $:  state-11
+  $:  state-12
       cached-indices
   ==
 --
@@ -243,7 +245,7 @@
   =|  cards=(list card)
   |^
   =*  loop  $
-  ?:  ?=(%11 -.old)
+  ?:  ?=(%12 -.old)
     :-  cards
     %_  state
       associations      associations.old
@@ -251,6 +253,8 @@
       group-indices     (rebuild-group-indices associations.old)
       app-indices       (rebuild-app-indices associations.old)
     ==
+  ?:  ?=(%11 -.old)
+    $(-.old %12, associations.old (reset-group-hidden associations.old))
   ?:  ?=(%10 -.old)
     $(-.old %11, associations.old (hide-dm-assoc associations.old))
   ?:  ?=(%9 -.old)
@@ -293,6 +297,17 @@
   ::  pre-breach, can safely throw away
   loop(old *state-8)
   ::
+  ++  reset-group-hidden
+    |=  assoc=associations:store
+    ^-  associations:store
+    %-  ~(gas by *associations:store)
+    %+  turn  ~(tap by assoc)
+    |=  [m=md-resource:store [g=resource met=metadatum:store]]
+    ^-  [md-resource:store association:store]
+    =?  hidden.met  ?=(%groups app-name.m)
+      %.n
+    [m [g met]]
+  ::
   ++  hide-dm-assoc
     |=  assoc=associations:store
     ^-  associations:store

pkg/arvo/ted/group/create.hoon

@@ -41,6 +41,7 @@
     date-created  now.bowl
     creator       our.bowl
     config        [%group ~]
+    hidden        %.n
   ==
 =/  met-action=action:metadata
   [%add rid groups+rid metadatum]

pkg/interface/.eslintrc.js

@@ -2,5 +2,11 @@ module.exports = {
   extends: '@urbit',
   env: {
     'jest': true
+  },
+  rules: {
+    // Because we use styled system, and use
+    // the convention of each prop on a new line
+    // we probably shouldn't keep this on
+    'max-lines-per-function': ['off', {}]
   }
 };

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

@@ -0,0 +1,77 @@
+import _ from 'lodash';
+import { useState, ClipboardEvent } from 'react';
+import { useFileDrag } from './useDrag';
+import useStorage, { IuseStorage } from './useStorage';
+
+export type FileUploadSource = 'drag' | 'paste' | 'direct';
+
+interface FileUploadEventHandlers {
+  onSuccess: (url: string, source: FileUploadSource) => void;
+  onError?: (error: Error) => void;
+}
+
+interface FileUploadHandler {
+  onFiles: (
+    files: FileList | File[],
+    storage?: IuseStorage,
+    uploadSource?: FileUploadSource
+  ) => void | Promise<void>;
+}
+
+function isFileUploadHandler(obj: any): obj is FileUploadHandler {
+  return typeof obj.onFiles === 'function';
+}
+
+type useFileUploadParams = {
+  multiple?: boolean;
+} & (FileUploadEventHandlers | FileUploadHandler)
+
+export function useFileUpload({ multiple = true, ...params }: useFileUploadParams) {
+  const storage = useStorage();
+  const {
+    canUpload, uploadDefault
+  } = storage;
+  const [source, setSource] = useState<FileUploadSource>('paste');
+  const drag = useFileDrag(f => uploadFiles(f, 'drag'));
+
+  function onPaste(event: ClipboardEvent) {
+    if (!event.clipboardData || !event.clipboardData.files.length) {
+      return;
+    }
+
+    event.preventDefault();
+    event.stopPropagation();
+
+    uploadFiles(event.clipboardData.files, 'paste');
+  }
+
+  function uploadFiles(files: FileList | File[], uploadSource: FileUploadSource) {
+    if (isFileUploadHandler(params)) {
+      return params.onFiles(files, storage, uploadSource);
+    }
+
+    if (!canUpload) {
+      return;
+    }
+
+    setSource(uploadSource);
+
+    const { onSuccess, onError } = params as FileUploadEventHandlers;
+    const fileArray = Array.from(files);
+    const toUpload = multiple ? fileArray : _.take(fileArray);
+    toUpload.forEach((file) => {
+      uploadDefault(file)
+        .then(url => onSuccess(url, source))
+        .catch((err: Error) => {
+          console.log(err);
+          onError && onError(err);
+        });
+    });
+  }
+
+  return {
+    ...storage,
+    onPaste,
+    drag
+  };
+}

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

@@ -1,6 +1,6 @@
 import { useMemo, useEffect, useState } from 'react';
 
-function retrieve<T>(key: string, initial: T): T {
+export function retrieve<T>(key: string, initial: T): T {
   const s = localStorage.getItem(key);
   if (s) {
     try {

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

@@ -0,0 +1,50 @@
+import { BaseImage, Box } from '@tlon/indigo-react';
+import { Contact } from '@urbit/api';
+import React from 'react';
+import { Sigil } from '~/logic/lib/sigil';
+import { uxToHex } from '~/logic/lib/util';
+
+interface ChatAvatar {
+  hideAvatars: boolean;
+  contact?: Contact;
+}
+
+export function ChatAvatar({ contact, hideAvatars }) {
+  const color = contact ? uxToHex(contact.color) : '000000';
+  const sigilClass = contact ? '' : 'mix-blend-diff';
+
+  if (contact && contact?.avatar && !hideAvatars) {
+    return (
+      <BaseImage
+        flexShrink={0}
+        src={contact.avatar}
+        height={24}
+        width={24}
+        style={{ objectFit: 'cover' }}
+        borderRadius={1}
+        display='inline-block'
+      />
+    );
+  }
+
+  return (
+    <Box
+      width={24}
+      height={24}
+      display='flex'
+      justifyContent='center'
+      alignItems='center'
+      backgroundColor={`#${color}`}
+      borderRadius={1}
+    >
+      <Sigil
+        ship={window.ship}
+        size={16}
+        color={`#${color}`}
+        classes={sigilClass}
+        icon
+        padding={2}
+      />
+    </Box>
+  );
+}

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

@@ -4,11 +4,14 @@ import 'codemirror/addon/display/placeholder';
 import 'codemirror/addon/hint/show-hint';
 import 'codemirror/lib/codemirror.css';
 import 'codemirror/mode/markdown/markdown';
-import React, { Component } from 'react';
+import React, { useRef, ClipboardEvent, useEffect, useImperativeHandle } from 'react';
 import { UnControlled as CodeEditor } from 'react-codemirror2';
 import styled from 'styled-components';
 import { MOBILE_BROWSER_REGEX } from '~/logic/lib/util';
 import '../css/custom.css';
+import { useChatStore } from './ChatPane';
+
+const isMobile = Boolean(MOBILE_BROWSER_REGEX.test(navigator.userAgent));
 
 const MARKDOWN_CONFIG = {
   name: 'markdown',
@@ -30,6 +33,18 @@ const MARKDOWN_CONFIG = {
   }
 };
 
+const defaultOptions = {
+  mode: MARKDOWN_CONFIG,
+  lineNumbers: false,
+  lineWrapping: true,
+  scrollbarStyle: 'native',
+  cursorHeight: 0.85,
+  // The below will ony work once codemirror's bug is fixed
+  spellcheck: isMobile,
+  autocorrect: isMobile,
+  autocapitalize: isMobile
+};
+
 // Until CodeMirror supports options.inputStyle = 'textarea' on mobile,
 // we need to hack this into a regular input that has some funny behaviors
 const inputProxy = input => new Proxy(input, {
@@ -95,20 +110,13 @@ const MobileBox = styled(Box)`
 `;
 
 interface ChatEditorProps {
-  message: string;
   inCodeMode: boolean;
-  submit: (message: string) => void;
-  onUnmount: (message: string) => void;
-  onPaste: () => void;
-  changeEvent: (message: string) => void;
   placeholder: string;
+  submit: (message: string) => void;
+  onPaste: (codemirrorInstance, event: ClipboardEvent) => void;
 }
 
-interface ChatEditorState {
-  message: string;
-}
-
-interface CodeMirrorShim {
+export interface CodeMirrorShim {
   setValue: (string) => void;
   setOption: (option: string, property: any) => void;
   focus: () => void;
@@ -118,192 +126,143 @@ interface CodeMirrorShim {
   element: HTMLElement;
 }
 
-export default class ChatEditor extends Component<ChatEditorProps, ChatEditorState> {
-  editor: CodeMirrorShim;
-  constructor(props: ChatEditorProps) {
-    super(props);
+const ChatEditor = React.forwardRef<CodeMirrorShim, ChatEditorProps>(({ inCodeMode, placeholder, submit, onPaste }, ref) => {
+  const editorRef = useRef<CodeMirrorShim>(null);
+  useImperativeHandle(ref, () => editorRef.current);
+  const editor = editorRef.current;
 
-    this.state = {
-      message: props.message
-    };
+  const {
+    message,
+    setMessage
+  } = useChatStore();
 
-    this.editor = null;
-    this.onKeyPress = this.onKeyPress.bind(this);
-  }
-
-  componentDidMount() {
-    document.addEventListener('keydown', this.onKeyPress);
-  }
-
-  componentWillUnmount(): void {
-    this.props.onUnmount(this.state.message);
-    document.removeEventListener('keydown', this.onKeyPress);
-  }
-
-  onKeyPress(e) {
+  function onKeyPress(e) {
     const focusedTag = document.activeElement?.nodeName?.toLowerCase();
     const shouldCapture = !(focusedTag === 'textarea' || focusedTag === 'input' || e.metaKey || e.ctrlKey);
     if(/^[a-z]|[A-Z]$/.test(e.key) && shouldCapture) {
-      this.editor.focus();
+      editor.focus();
     }
     if(e.key === 'Escape') {
-      this.editor.getInputField().blur();
+      editor.getInputField().blur();
     }
   }
 
-  componentDidUpdate(prevProps: ChatEditorProps): void {
-    const { props } = this;
+  useEffect(() => {
+    document.addEventListener('keydown', onKeyPress);
 
-    if (prevProps.message !== props.message && this.editor) {
-      this.editor.setValue(props.message);
-      this.editor.setOption('mode', MARKDOWN_CONFIG);
-      //this.editor?.focus();
-      //this.editor.execCommand('goDocEnd');
-      //this.editor?.focus();
+    return () => {
+      document.removeEventListener('keydown', onKeyPress);
+    };
+  }, []);
+
+  useEffect(() => {
+    if (!editor) {
       return;
     }
 
-    if (!props.inCodeMode) {
-      this.editor.setOption('mode', MARKDOWN_CONFIG);
-      this.editor.setOption('placeholder', this.props.placeholder);
+    if (inCodeMode) {
+      editor.setOption('mode', null);
+      editor.setOption('placeholder', 'Code...');
     } else {
-      this.editor.setOption('mode', null);
-      this.editor.setOption('placeholder', 'Code...');
+      editor.setOption('mode', MARKDOWN_CONFIG);
+      editor.setOption('placeholder', placeholder);
     }
-    const value = this.editor.getValue();
 
     // Force redraw of placeholder
+    const value = editor.getValue();
     if(value.length === 0) {
-      this.editor.setValue(' ');
-      this.editor.setValue('');
+      editor.setValue(' ');
+      editor.setValue('');
     }
-  }
+  }, [inCodeMode, placeholder]);
 
-  submit() {
-    if(!this.editor) {
-      return;
-    }
-
-    const editorMessage = this.editor.getValue();
-    if (editorMessage === '') {
-      return;
-    }
-
-    this.setState({ message: '' });
-    this.props.submit(editorMessage);
-    this.editor.setValue('');
-  }
-
-  messageChange(editor, data, value) {
+  function messageChange(editor, data, value) {
     if(value.endsWith('/')) {
       editor.showHint(['test', 'foo']);
     }
-    if (this.state.message !== '' && value == '') {
-      this.props.changeEvent(value);
-      this.setState({
-        message: value
-      });
+    if (message !== '' && value == '') {
+      setMessage(value);
     }
-    if (value == this.props.message || value == '' || value == ' ') {
+    if (value == message || value == '' || value == ' ') {
       return;
     }
-    this.props.changeEvent(value);
-    this.setState({
-      message: value
-    });
+
+    setMessage(value);
   }
 
-  render() {
-    const {
-      inCodeMode,
-      placeholder,
-      message,
-      ...props
-    } = this.props;
+  const codeTheme = inCodeMode ? ' code' : '';
+  const options = {
+    ...defaultOptions,
+    theme: 'tlon' + codeTheme,
+    placeholder: inCodeMode ? 'Code...' : placeholder,
+    extraKeys: {
+      'Enter': submit,
+      'Esc': () => {
+        editor?.getInputField().blur();
+      }
+    }
+  };
 
-    const codeTheme = inCodeMode ? ' code' : '';
-
-    const options = {
-      mode: MARKDOWN_CONFIG,
-      theme: 'tlon' + codeTheme,
-      lineNumbers: false,
-      lineWrapping: true,
-      scrollbarStyle: 'native',
-      cursorHeight: 0.85,
-      placeholder: inCodeMode ? 'Code...' : placeholder,
-      extraKeys: {
-        'Enter': () => {
-          this.submit();
-        },
-        'Esc': () => {
-          this.editor?.getInputField().blur();
-        }
-      },
-      // The below will ony work once codemirror's bug is fixed
-      spellcheck: Boolean(MOBILE_BROWSER_REGEX.test(navigator.userAgent)),
-      autocorrect: Boolean(MOBILE_BROWSER_REGEX.test(navigator.userAgent)),
-      autocapitalize: Boolean(MOBILE_BROWSER_REGEX.test(navigator.userAgent))
-    };
-
-    return (
-      <Row
-        backgroundColor='white'
-        alignItems='center'
-        flexGrow={1}
-        height='100%'
-        paddingTop={MOBILE_BROWSER_REGEX.test(navigator.userAgent) ? '16px' : '0'}
-        paddingBottom={MOBILE_BROWSER_REGEX.test(navigator.userAgent) ? '16px' : '0'}
-        maxHeight='224px'
-        width='calc(100% - 88px)'
-        className={inCodeMode ? 'chat code' : 'chat'}
-        color="black"
-        overflow='auto'
-      >
-        {MOBILE_BROWSER_REGEX.test(navigator.userAgent)
-          ? <MobileBox
-              data-value={this.state.message}
-              fontSize={1}
-              lineHeight="tall"
-              onClick={(event) => {
-                if (this.editor) {
-                  this.editor.element.focus();
-                }
-              }}
-            >
-            <BaseTextArea
-              fontFamily={inCodeMode ? 'Source Code Pro' : 'Inter'}
-              fontSize={1}
-              lineHeight="tall"
-              rows={1}
-              style={{ width: '100%', background: 'transparent', color: 'currentColor' }}
-              placeholder={inCodeMode ? 'Code...' : 'Message...'}
-              onChange={event =>
-                this.messageChange(null, null, event.target.value)
+  return (
+    <Row
+      backgroundColor='white'
+      alignItems='center'
+      flexGrow={1}
+      height='100%'
+      paddingTop={MOBILE_BROWSER_REGEX.test(navigator.userAgent) ? '16px' : '0'}
+      paddingBottom={MOBILE_BROWSER_REGEX.test(navigator.userAgent) ? '16px' : '0'}
+      maxHeight='224px'
+      width='calc(100% - 88px)'
+      className={inCodeMode ? 'chat code' : 'chat'}
+      color="black"
+      overflow='auto'
+    >
+      {isMobile
+        ? <MobileBox
+            data-value={message}
+            fontSize={1}
+            lineHeight="tall"
+            onClick={(event) => {
+              if (editor) {
+                editor.element.focus();
               }
-              onKeyDown={event =>
-                this.messageChange(null, null, (event.target as any).value)
-              }
-              ref={(input) => {
-                if (!input)
-return;
-                this.editor = inputProxy(input);
-              }}
-              {...props}
-            />
-          </MobileBox>
-          : <CodeEditor
-          className="lh-copy"
-          value={message}
-          options={options}
-          onChange={(e, d, v) => this.messageChange(e, d, v)}
-          editorDidMount={(editor) => {
-            this.editor = editor;
-          }}
-          {...props}
-            />
-        }
+            }}
+          >
+          <BaseTextArea
+            fontFamily={inCodeMode ? 'Source Code Pro' : 'Inter'}
+            fontSize={1}
+            lineHeight="tall"
+            rows={1}
+            style={{ width: '100%', background: 'transparent', color: 'currentColor' }}
+            placeholder={inCodeMode ? 'Code...' : 'Message...'}
+            onChange={event =>
+              messageChange(null, null, event.target.value)
+            }
+            onKeyDown={event =>
+              messageChange(null, null, (event.target as any).value)
+            }
+            onPaste={e => onPaste(null, e)}
+            ref={(input) => {
+              if (!input)
+                return;
+              editorRef.current = inputProxy(input);
+            }}
+          />
+        </MobileBox>
+        : <CodeEditor
+        className="lh-copy"
+        value={message}
+        options={options}
+        onChange={(e, d, v) => messageChange(e, d, v)}
+        editorDidMount={(codeEditor) => {
+          editorRef.current = codeEditor;
+        }}
+        onPaste={onPaste as any}
+          />
+      }
 
-      </Row>
-    );
-  }
-}
+    </Row>
+  );
+});
+
+export default ChatEditor;

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

@@ -1,247 +1,166 @@
-import { BaseImage, Box, Icon, LoadingSpinner, Row } from '@tlon/indigo-react';
+import { Box, Icon, LoadingSpinner, Row } from '@tlon/indigo-react';
 import { Contact, Content, evalCord } from '@urbit/api';
-import React, { Component, ReactNode } from 'react';
-import { Sigil } from '~/logic/lib/sigil';
+import React, { FC, PropsWithChildren, useRef, useState } from 'react';
 import tokenizeMessage from '~/logic/lib/tokenizeMessage';
 import { IuseStorage } from '~/logic/lib/useStorage';
-import { MOBILE_BROWSER_REGEX, uxToHex } from '~/logic/lib/util';
+import { MOBILE_BROWSER_REGEX } from '~/logic/lib/util';
 import { withLocalState } from '~/logic/state/local';
-import withStorage from '~/views/components/withStorage';
-import ChatEditor from './ChatEditor';
+import ChatEditor, { CodeMirrorShim } from './ChatEditor';
 import airlock from '~/logic/api';
+import { ChatAvatar } from './ChatAvatar';
+import { useChatStore } from './ChatPane';
+import { useImperativeHandle } from 'react';
+import { FileUploadSource, useFileUpload } from '~/logic/lib/useFileUpload';
 
-type ChatInputProps = IuseStorage & {
-  ourContact?: Contact;
-  onUnmount(msg: string): void;
-  placeholder: string;
-  message: string;
-  deleteMessage(): void;
+type ChatInputProps = PropsWithChildren<IuseStorage & {
   hideAvatars: boolean;
+  ourContact?: Contact;
+  placeholder: string;
   onSubmit: (contents: Content[]) => void;
-  children?: ReactNode;
-};
+}>;
 
-interface ChatInputState {
-  inCodeMode: boolean;
-  submitFocus: boolean;
-  uploadingPaste: boolean;
-  currentInput: string;
-}
+const InputBox: FC = ({ children }) => (
+  <Row
+    alignItems='center'
+    position='relative'
+    flexGrow={1}
+    flexShrink={0}
+    borderTop={1}
+    borderTopColor='lightGray'
+    backgroundColor='white'
+    className='cf'
+    zIndex={0}
+  >
+    { children }
+  </Row>
+);
 
-export class ChatInput extends Component<ChatInputProps, ChatInputState> {
-  private chatEditor: React.RefObject<ChatEditor>;
+const IconBox = ({ children, ...props }) => (
+  <Box
+    ml='12px'
+    mr={3}
+    flexShrink={0}
+    height='16px'
+    width='16px'
+    flexBasis='16px'
+    {...props}
+  >
+    { children }
+  </Box>
+);
 
-  constructor(props) {
-    super(props);
+const MobileSubmitButton = ({ enabled, onSubmit }) => (
+  <Box
+    ml={2}
+    mr="12px"
+    flexShrink={0}
+    display="flex"
+    justifyContent="center"
+    alignItems="center"
+    width="24px"
+    height="24px"
+    borderRadius="50%"
+    backgroundColor={enabled ? 'blue' : 'gray'}
+    cursor={enabled !== '' ? 'pointer' : 'default'}
+    onClick={() => onSubmit()}
+  >
+    <Icon icon="ArrowEast" color="white" />
+  </Box>
+);
 
-    this.state = {
-      inCodeMode: false,
-      submitFocus: false,
-      uploadingPaste: false,
-      currentInput: props.message
-    };
+export const ChatInput = React.forwardRef(({ ourContact, hideAvatars, placeholder, onSubmit }: ChatInputProps, ref) => {
+  const chatEditor = useRef<CodeMirrorShim>(null);
+  useImperativeHandle(ref, () => chatEditor.current);
+  const [inCodeMode, setInCodeMode] = useState(false);
 
-    this.chatEditor = React.createRef();
+  const {
+    message,
+    setMessage
+  } = useChatStore();
+  const { canUpload, uploading, promptUpload, onPaste } = useFileUpload({
+    onSuccess: uploadSuccess
+  });
 
-    this.submit = this.submit.bind(this);
-    this.toggleCode = this.toggleCode.bind(this);
-    this.uploadSuccess = this.uploadSuccess.bind(this);
-    this.uploadError = this.uploadError.bind(this);
-    this.eventHandler = this.eventHandler.bind(this);
+  function uploadSuccess(url: string, source: FileUploadSource) {
+    if (source === 'paste') {
+      setMessage(url);
+    } else {
+      onSubmit([{ url }]);
+    }
   }
 
-  toggleCode() {
-    this.setState({
-      inCodeMode: !this.state.inCodeMode
-    });
+  function toggleCode() {
+    setInCodeMode(!inCodeMode);
   }
 
-  async submit(text) {
-    const { props, state } = this;
-    const { onSubmit } = this.props;
-    this.setState({
-      inCodeMode: false
-    });
-    props.deleteMessage();
-    if(state.inCodeMode) {
+  async function submit() {
+    const text = chatEditor.current?.getValue() || '';
+
+    if (text === '') {
+      return;
+    }
+
+    if (inCodeMode) {
       const output = await airlock.thread<string[]>(evalCord(text));
       onSubmit([{ code: { output, expression: text } }]);
     } else {
       onSubmit(tokenizeMessage(text));
     }
-    this.chatEditor.current.editor.focus();
-    this.setState({ currentInput: '' });
+
+    setInCodeMode(false);
+    setMessage('');
+    chatEditor.current.focus();
   }
 
-  uploadSuccess(url: string) {
-    const { props } = this;
-    if (this.state.uploadingPaste) {
-      this.chatEditor.current.editor.setValue(url);
-      this.setState({ uploadingPaste: false });
-    } else {
-      props.onSubmit([{ url }]);
-    }
-  }
-
-  uploadError(error) {
-    //  no-op for now
-  }
-
-  onPaste(codemirrorInstance, event: ClipboardEvent) {
-    if (!event.clipboardData || !event.clipboardData.files.length) {
-      return;
-    }
-    this.setState({ uploadingPaste: true });
-    event.preventDefault();
-    event.stopPropagation();
-    this.uploadFiles(event.clipboardData.files);
-  }
-
-  uploadFiles(files: FileList | File[]) {
-    if (!this.props.canUpload) {
-      return;
-    }
-    Array.from(files).forEach((file) => {
-      this.props
-        .uploadDefault(file)
-        .then(this.uploadSuccess)
-        .catch(this.uploadError);
-    });
-  }
-
-  eventHandler(value) {
-    this.setState({ currentInput: value });
-  }
-
-  render() {
-    const { props, state } = this;
-
-    const color = props.ourContact ? uxToHex(props.ourContact.color) : '000000';
-
-    const sigilClass = props.ourContact ? '' : 'mix-blend-diff';
-
-    const avatar =
-      props.ourContact && props.ourContact?.avatar && !props.hideAvatars ? (
-        <BaseImage
-          flexShrink={0}
-          src={props.ourContact.avatar}
-          height={24}
-          width={24}
-          style={{ objectFit: 'cover' }}
-          borderRadius={1}
-          display='inline-block'
-        />
-      ) : (
-        <Box
-          width={24}
-          height={24}
-          display='flex'
-          justifyContent='center'
-          alignItems='center'
-          backgroundColor={`#${color}`}
-          borderRadius={1}
-        >
-          <Sigil
-            ship={window.ship}
-            size={16}
-            color={`#${color}`}
-            classes={sigilClass}
-            icon
-            padding={2}
-          />
-        </Box>
-      );
-
-    return (
-      <Row
-        alignItems='center'
-        position='relative'
-        flexGrow={1}
-        flexShrink={0}
-        borderTop={1}
-        borderTopColor='lightGray'
-        backgroundColor='white'
-        className='cf'
-        zIndex={0}
-      >
-        <Row p='12px 4px 12px 12px' flexShrink={0} alignItems='center'>
-          {avatar}
-        </Row>
-        <ChatEditor
-          ref={this.chatEditor}
-          inCodeMode={state.inCodeMode}
-          submit={this.submit}
-          onUnmount={props.onUnmount}
-          message={props.message}
-          onPaste={this.onPaste.bind(this)}
-          changeEvent={this.eventHandler}
-          placeholder='Message...'
-        />
-        <Box
-          mx='12px'
-          mr={this.props.canUpload ? '12px' : 3}
-          flexShrink={0}
-          height='16px'
-          width='16px'
-          flexBasis='16px'
-        >
-          <Icon
-            icon='Dojo'
-            cursor='pointer'
-            onClick={this.toggleCode}
-            color={state.inCodeMode ? 'blue' : 'black'}
-          />
-        </Box>
-        {this.props.canUpload ? (
-          <Box
-            ml='12px'
-            mr={3}
-            flexShrink={0}
-            height='16px'
-            width='16px'
-            flexBasis='16px'
-          >
-            {this.props.uploading ? (
-              <LoadingSpinner />
-            ) : (
-              <Icon
-                icon='Attachment'
-                cursor='pointer'
-                width='16'
-                height='16'
-                onClick={() =>
-                  this.props.promptUpload().then(this.uploadSuccess)
-                }
-              />
-            )}
-          </Box>
-        ) : null}
-        {MOBILE_BROWSER_REGEX.test(navigator.userAgent) ?
-          <Box
-            ml={2}
-            mr="12px"
-            flexShrink={0}
-            display="flex"
-            justifyContent="center"
-            alignItems="center"
-            width="24px"
-            height="24px"
-            borderRadius="50%"
-            backgroundColor={state.currentInput !== '' ? 'blue' : 'gray'}
-            cursor={state.currentInput !== '' ? 'pointer' : 'default'}
-            onClick={() => this.chatEditor.current.submit()}
-          >
-            <Icon icon="ArrowEast" color="white" />
-          </Box>
-          : null}
+  return (
+    <InputBox>
+      <Row p='12px 4px 12px 12px' flexShrink={0} alignItems='center'>
+        <ChatAvatar contact={ourContact} hideAvatars={hideAvatars} />
       </Row>
-    );
-  }
-}
+      <ChatEditor
+        ref={chatEditor}
+        inCodeMode={inCodeMode}
+        submit={submit}
+        onPaste={(cm, e) => onPaste(e)}
+        placeholder={placeholder}
+      />
+      <IconBox mr={canUpload ? '12px' : 3}>
+        <Icon
+          icon='Dojo'
+          cursor='pointer'
+          onClick={toggleCode}
+          color={inCodeMode ? 'blue' : 'black'}
+        />
+      </IconBox>
+      {canUpload && (
+        <IconBox>
+          {uploading ? (
+            <LoadingSpinner />
+          ) : (
+            <Icon
+              icon='Attachment'
+              cursor='pointer'
+              width='16'
+              height='16'
+              onClick={() =>
+                promptUpload().then(url => uploadSuccess(url, 'direct'))
+              }
+            />
+          )}
+        </IconBox>
+      )}
+      {MOBILE_BROWSER_REGEX.test(navigator.userAgent) && (
+        <MobileSubmitButton
+          enabled={message !== ''}
+          onSubmit={submit}
+        />
+      )}
+    </InputBox>
+  );
+});
 
 // @ts-ignore withLocalState prop passing weirdness
 export default withLocalState<Omit<ChatInputProps, keyof IuseStorage>, 'hideAvatars', ChatInput>(
-  // @ts-ignore withLocalState prop passing weirdness
-  withStorage<ChatInputProps, ChatInput>(ChatInput, { accept: 'image/*' }),
+  ChatInput,
   ['hideAvatars']
 );

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

@@ -1,18 +1,50 @@
 import { Col } from '@tlon/indigo-react';
 import { Content, Graph, Post } from '@urbit/api';
 import bigInt, { BigInteger } from 'big-integer';
-import _ from 'lodash';
-import React, { ReactElement, useCallback, useEffect, useRef, useState } from 'react';
-import { useFileDrag } from '~/logic/lib/useDrag';
-import { useLocalStorageState } from '~/logic/lib/useLocalStorageState';
+import React, { ReactElement, useCallback, useEffect, useState } from 'react';
+import create from 'zustand';
+import { persist } from 'zustand/middleware';
+import { useFileUpload } from '~/logic/lib/useFileUpload';
 import { useOurContact } from '~/logic/state/contact';
 import { useGraphTimesent } from '~/logic/state/graph';
 import ShareProfile from '~/views/apps/chat/components/ShareProfile';
 import { Loading } from '~/views/components/Loading';
 import SubmitDragger from '~/views/components/SubmitDragger';
-import ChatInput, { ChatInput as NakedChatInput } from './ChatInput';
+import ChatInput from './ChatInput';
 import ChatWindow from './ChatWindow';
 
+interface useChatStoreType {
+  id: string;
+  message: string;
+  messageStore: Record<string, string>;
+  restore: (id: string) => void;
+  setMessage: (message: string) => void;
+}
+
+const unsentKey = 'chat-unsent';
+export const useChatStore = create<useChatStoreType>(persist((set, get) => ({
+  id: '',
+  message: '',
+  messageStore: {},
+  restore: (id: string) => {
+    const store = get().messageStore;
+    set({
+      id,
+      messageStore: store,
+      message: store[id] || ''
+    });
+  },
+  setMessage: (message: string) => {
+    const store = get().messageStore;
+    store[get().id] = message;
+
+    set({ message, messageStore: store });
+  }
+}), {
+  name: unsentKey,
+  whitelist: ['messageStore']
+}));
+
 interface ChatPaneProps {
   /**
    * A key to uniquely identify a ChatPane instance. Should be either the
@@ -79,37 +111,13 @@ export function ChatPane(props: ChatPaneProps): ReactElement {
   } = props;
   const graphTimesentMap = useGraphTimesent(id);
   const ourContact = useOurContact();
-  const chatInput = useRef<NakedChatInput>();
+  const { restore, setMessage } = useChatStore(s => ({ setMessage: s.setMessage, restore: s.restore }));
+  const { canUpload, drag } = useFileUpload({
+    onSuccess: url => onSubmit([{ url }])
+  });
 
-  const onFileDrag = useCallback(
-    (files: FileList | File[]) => {
-      if (!chatInput.current) {
-        return;
-      }
-      (chatInput.current as NakedChatInput)?.uploadFiles(files);
-    },
-    [chatInput]
-  );
-
-  const { bind, dragging } = useFileDrag(onFileDrag);
-
-  const [unsent, setUnsent] = useLocalStorageState<Record<string, string>>(
-    'chat-unsent',
-    {}
-  );
-
-  const appendUnsent = useCallback(
-    (u: string) => setUnsent(s => ({ ...s, [id]: u })),
-    [id]
-  );
-
-  const clearUnsent = useCallback(() => {
-    setUnsent((s) => {
-      if (id in s) {
-        return _.omit(s, id);
-      }
-      return s;
-    });
+  useEffect(() => {
+    restore(id);
   }, [id]);
 
   const scrollTo = new URLSearchParams(location.search).get('msg');
@@ -123,7 +131,7 @@ export function ChatPane(props: ChatPaneProps): ReactElement {
   const onReply = useCallback(
     (msg: Post) => {
       const message = props.onReply(msg);
-      setUnsent(s => ({ ...s, [id]: message }));
+      setMessage(message);
     },
     [id, props.onReply]
   );
@@ -134,13 +142,13 @@ export function ChatPane(props: ChatPaneProps): ReactElement {
 
   return (
     // @ts-ignore bind typings
-    <Col {...bind} height="100%" overflow="hidden" position="relative">
+    <Col {...drag.bind} height="100%" overflow="hidden" position="relative">
       <ShareProfile
         our={ourContact}
         recipients={showBanner ? promptShare : []}
         onShare={() => setShowBanner(false)}
       />
-      {dragging && <SubmitDragger />}
+      {canUpload && drag.dragging && <SubmitDragger />}
       <ChatWindow
         key={id}
         graph={graph}
@@ -158,13 +166,9 @@ export function ChatPane(props: ChatPaneProps): ReactElement {
       />
       {canWrite && (
         <ChatInput
-          ref={chatInput}
           onSubmit={onSubmit}
           ourContact={(promptShare.length === 0 && ourContact) || undefined}
-          onUnmount={appendUnsent}
           placeholder="Message..."
-          message={unsent[id] || ''}
-          deleteMessage={clearUnsent}
         />
       )}
     </Col>

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

@@ -1,11 +1,12 @@
 import React, { useCallback, useState } from 'react';
 import { Box, LoadingSpinner, Action, Row } from '@tlon/indigo-react';
 
-import useStorage from '~/logic/lib/useStorage';
 import { StatelessUrlInput } from '~/views/components/StatelessUrlInput';
+import SubmitDragger from '~/views/components/SubmitDragger';
 import { Association, resourceFromPath, createPost } from '@urbit/api';
 import { parsePermalink, permalinkToReference } from '~/logic/lib/permalinks';
 import useGraphState, { GraphState } from '~/logic/state/graph';
+import { useFileUpload } from '~/logic/lib/useFileUpload';
 
 interface LinkBlockInputProps {
   size: string;
@@ -22,7 +23,6 @@ export function LinkBlockInput(props: LinkBlockInputProps) {
   const [focussed, setFocussed] = useState(false);
 
   const addPost = useGraphState(selGraph);
-  const { uploading, canUpload, promptUpload } = useStorage();
 
   const onFocus = useCallback(() => {
     setFocussed(true);
@@ -41,6 +41,10 @@ export function LinkBlockInput(props: LinkBlockInputProps) {
     setValid(URLparser.test(val) || Boolean(parsePermalink(val)));
   }, []);
 
+  const { uploading, canUpload, promptUpload, drag } = useFileUpload({
+    onSuccess: handleChange
+  });
+
   const doPost = () => {
     const text = '';
     const { ship, name } = resourceFromPath(association.resource);
@@ -83,7 +87,9 @@ export function LinkBlockInput(props: LinkBlockInputProps) {
       p="2"
       position="relative"
       backgroundColor="washedGray"
+      {...drag.bind}
     >
+      {drag.dragging && <SubmitDragger />}
       {uploading ? (
         <Box
           display="flex"

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

@@ -1,13 +1,12 @@
 import { BaseInput, Box, Button, LoadingSpinner } from '@tlon/indigo-react';
 import { hasProvider } from 'oembed-parser';
-import React, { useCallback, useState, DragEvent, useEffect } from 'react';
+import React, { useState, useEffect } from 'react';
 import { parsePermalink, permalinkToReference } from '~/logic/lib/permalinks';
-import { useFileDrag } from '~/logic/lib/useDrag';
-import useStorage from '~/logic/lib/useStorage';
 import { StatelessUrlInput } from '~/views/components/StatelessUrlInput';
 import SubmitDragger from '~/views/components/SubmitDragger';
 import useGraphState from '~/logic/state/graph';
 import { createPost } from '@urbit/api';
+import { useFileUpload } from '~/logic/lib/useFileUpload';
 
 interface LinkSubmitProps {
   name: string;
@@ -16,8 +15,6 @@ interface LinkSubmitProps {
 }
 
 const LinkSubmit = (props: LinkSubmitProps) => {
-  const { canUpload, uploadDefault, uploading, promptUpload } =
-    useStorage();
   const addPost = useGraphState(s => s.addPost);
 
   const [submitFocused, setSubmitFocused] = useState(false);
@@ -26,6 +23,17 @@ const LinkSubmit = (props: LinkSubmitProps) => {
   const [disabled, setDisabled] = useState(false);
   const [linkValid, setLinkValid] = useState(false);
 
+  const {
+    canUpload,
+    uploading,
+    promptUpload,
+    drag,
+    onPaste
+  } = useFileUpload({
+    onSuccess: setLinkValue,
+    multiple: false
+  });
+
   const doPost = () => {
     const url = linkValue;
     const text = linkTitle ? linkTitle : linkValue;
@@ -98,18 +106,6 @@ const LinkSubmit = (props: LinkSubmitProps) => {
     setLinkValid(validateLink(linkValue));
   }, [linkValue]);
 
-  const onFileDrag = useCallback(
-    (files: FileList | File[], e: DragEvent): void => {
-      if (!canUpload) {
-        return;
-      }
-      uploadDefault(files[0]).then(setLinkValue);
-    },
-    [uploadDefault, canUpload]
-  );
-
-  const { bind, dragging } = useFileDrag(onFileDrag);
-
   const onLinkChange = () => {
     const link = validateLink(linkValue);
     setLinkValid(link);
@@ -117,17 +113,6 @@ const LinkSubmit = (props: LinkSubmitProps) => {
 
   useEffect(onLinkChange, [linkValue]);
 
-  const onPaste = useCallback(
-    (event: ClipboardEvent) => {
-      if (!event.clipboardData || !event.clipboardData.files.length) {
-        return;
-      }
-      event.preventDefault();
-      event.stopPropagation();
-      uploadDefault(event.clipboardData.files[0]).then(setLinkValue);
-    }, [setLinkValue, uploadDefault]
-  );
-
   const onKeyPress = (e) => {
     if (e.key === 'Enter') {
       e.preventDefault();
@@ -145,7 +130,7 @@ const LinkSubmit = (props: LinkSubmitProps) => {
         borderColor={submitFocused ? 'black' : 'lightGray'}
         width='100%'
         borderRadius={2}
-        {...bind}
+        {...drag.bind}
       >
         {uploading && <Box
           display="flex"
@@ -161,7 +146,7 @@ const LinkSubmit = (props: LinkSubmitProps) => {
                       >
           <LoadingSpinner />
         </Box>}
-      {dragging && <SubmitDragger />}
+      {drag.dragging && <SubmitDragger />}
       <StatelessUrlInput
         value={linkValue}
         promptUpload={promptUpload}

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

@@ -5,11 +5,11 @@ import 'codemirror/addon/edit/continuelist';
 import 'codemirror/lib/codemirror.css';
 import 'codemirror/mode/markdown/markdown';
 import { useFormikContext } from 'formik';
-import React, { useCallback, useRef, DragEvent } from 'react';
+import React, { useCallback, useRef } from 'react';
 import { UnControlled as CodeEditor } from 'react-codemirror2';
 import { Prompt } from 'react-router-dom';
-import { useFileDrag } from '~/logic/lib/useDrag';
-import useStorage from '~/logic/lib/useStorage';
+import { useFileUpload } from '~/logic/lib/useFileUpload';
+import { IuseStorage } from '~/logic/lib/useStorage';
 import { usePreventWindowUnload } from '~/logic/lib/util';
 import { PropFunc } from '~/types/util';
 import SubmitDragger from '~/views/components/SubmitDragger';
@@ -61,10 +61,8 @@ export function MarkdownEditor(
     [onChange]
   );
 
-  const { uploadDefault, canUpload } = useStorage();
-
-  const onFileDrag = useCallback(
-    async (files: FileList | File[], e: DragEvent) => {
+  const onFileUpload = useCallback(
+    async (files: FileList | File[], { canUpload, uploadDefault }: IuseStorage) => {
       if (!canUpload || !editor.current) {
         return;
       }
@@ -79,10 +77,14 @@ export function MarkdownEditor(
         doc.setValue(doc.getValue().replace(placeholder, markdown));
       });
     },
-    [uploadDefault, canUpload, value, onChange]
+    [value, onChange]
   );
 
-  const { bind, dragging } = useFileDrag(onFileDrag);
+  const {
+    drag: { bind, dragging }
+  } = useFileUpload({
+    onFiles: onFileUpload
+  });
 
   return (
     <Box

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

@@ -1,19 +1,23 @@
 import {
     Box,
-    Button, ManagedForm as Form, ManagedTextInputField as Input,
-
+    Button,
+    ManagedForm as Form,
+    ManagedTextInputField as Input,
     Menu,
     MenuButton,
-
     MenuItem, MenuList,
-
     Row, Text
 } from '@tlon/indigo-react';
 import { addBucket, removeBucket, setCurrentBucket } from '@urbit/api';
 import { Formik, FormikHelpers } from 'formik';
 import React, { ReactElement, useCallback, useState } from 'react';
+import * as Yup from 'yup';
 import airlock from '~/logic/api';
 
+const validationSchema = Yup.object({
+  newBucket: Yup.string().required('Required')
+});
+
 export function BucketList({
   buckets,
   selected
@@ -29,8 +33,9 @@ export function BucketList({
     (values: { newBucket: string }, actions: FormikHelpers<any>) => {
       airlock.poke(addBucket(values.newBucket));
       actions.resetForm({ values: { newBucket: '' } });
+      setAdding(false);
     },
-    []
+    [setAdding]
   );
 
   const onSelect = useCallback(
@@ -52,7 +57,7 @@ export function BucketList({
   );
 
   return (
-    <Formik initialValues={{ newBucket: '' }} onSubmit={onSubmit}>
+    <Formik validationSchema={validationSchema} initialValues={{ newBucket: '' }} onSubmit={onSubmit}>
       <Form
         display="grid"
         gridTemplateColumns="100%"
@@ -103,14 +108,25 @@ export function BucketList({
           <Button type="button" onClick={() => setAdding(false)}>
             Cancel
           </Button>
-          <Button
-            width="fit-content"
-            primary
-            type={adding ? 'submit' : 'button'}
-            onClick={() => setAdding(s => !s)}
-          >
-            {adding ? 'Submit' : 'Add new bucket'}
-          </Button>
+          {!adding &&
+            <Button
+              width="fit-content"
+              primary
+              type="button"
+              onClick={() => setAdding(true)}
+            >
+              Add new bucket
+            </Button>
+          }
+          {adding &&
+            <Button
+              width="fit-content"
+              primary
+              type="submit"
+            >
+              Submit
+            </Button>
+          }
         </Row>
       </Form>
     </Formik>

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

@@ -11,7 +11,7 @@ import {
   useField,
   useFormikContext
 } from 'formik';
-import React, { useEffect } from 'react';
+import React, { useEffect, useMemo } from 'react';
 import * as Yup from 'yup';
 import { ShipImage } from './ShipImage';
 
@@ -68,9 +68,13 @@ function FormikHelper(props: { initialValues: any }) {
 
   return null;
 }
+const emptyStr = '';
 
 export default function CommentInput(props: CommentInputProps) {
-  const initialValues: FormSchema = { comment: props.initial || '' };
+  const initialValues: FormSchema = useMemo(
+    () => ({ comment: props.initial || emptyStr }),
+  [props.initial]);
+
   const label = props.label || 'Comment';
 
   return (