Merge branch 'develop' into hm/hackweek

desk/desk.docket-0

@@ -2,7 +2,7 @@
     info+'Start, host, and cultivate communities. Own your communications, organize your resources, and share documents. Groups is a decentralized platform that integrates with Talk, Notebook, and Gallery for a full, communal suite of tools.'
     color+0xef.f0f4
     image+'https://bootstrap.urbit.org/icon-groups.svg?v=1'
-    glob-http+['https://bootstrap.urbit.org/glob-0v4.lgkqa.67h1c.6760d.gc28p.lf822.glob' 0v4.lgkqa.67h1c.6760d.gc28p.lf822]
+    glob-http+['https://bootstrap.urbit.org/glob-0v4.ft52g.gnf1b.l0di5.04tuu.qm6j0.glob' 0v4.ft52g.gnf1b.l0di5.04tuu.qm6j0]
     base+'groups'
     version+[5 0 0]
     website+'https://tlon.io'

talk/desk.docket-0

@@ -2,7 +2,7 @@
     info+'Send encrypted direct messages to one or many friends. Talk is a simple chat tool for catching up, getting work done, and everything in between.'
     color+0x10.5ec7
     image+'https://bootstrap.urbit.org/icon-talk.svg?v=1'
-    glob-http+['https://bootstrap.urbit.org/glob-0v6.70g96.9e0a4.h3e5d.h9n58.mid76.glob' 0v6.70g96.9e0a4.h3e5d.h9n58.mid76]
+    glob-http+['https://bootstrap.urbit.org/glob-0v2.nmce3.b4ei2.15157.h3bmf.dc5r4.glob' 0v2.nmce3.b4ei2.15157.h3bmf.dc5r4]
     base+'talk'
     version+[5 0 0]
     website+'https://tlon.io'

ui/src/diary/DiaryCommentField.tsx

@@ -17,6 +17,7 @@ import { useChannelCompatibility } from '@/logic/channel';
 import Tooltip from '@/components/Tooltip';
 import { Story, Cite, Kind } from '@/types/channel';
 import WritChanReference from '@/components/References/WritChanReference';
+import { useChatInputFocus } from '@/logic/ChatInputFocusContext';
 
 interface DiaryCommentFieldProps {
   flag: string;
@@ -45,6 +46,7 @@ export default function DiaryCommentField({
   const { mutateAsync: addReply } = useAddReplyMutation();
   const { privacy } = useGroupPrivacy(groupFlag);
   const { compatible, text } = useChannelCompatibility(nest);
+  const { handleFocus, handleBlur, isChatInputFocused } = useChatInputFocus();
 
   /**
    * This handles submission for new Curios; for edits, see EditCurioForm
@@ -150,6 +152,30 @@ export default function DiaryCommentField({
     }
   }, [replyId, replyTo, setReplyCite, replyCite, flag, messageEditor, reply]);
 
+  useEffect(() => {
+    if (messageEditor && !messageEditor.isDestroyed) {
+      if (!isChatInputFocused && messageEditor.isFocused) {
+        handleFocus();
+      }
+
+      if (isChatInputFocused && !messageEditor.isFocused) {
+        handleBlur();
+      }
+    }
+
+    return () => {
+      if (isChatInputFocused) {
+        handleBlur();
+      }
+    };
+  }, [
+    isChatInputFocused,
+    messageEditor,
+    messageEditor?.isFocused,
+    handleFocus,
+    handleBlur,
+  ]);
+
   const onClick = useCallback(
     () => messageEditor && onSubmit(messageEditor),
     [messageEditor, onSubmit]

ui/src/diary/DiaryNote.tsx

@@ -34,6 +34,8 @@ import { useConnectivityCheck } from '@/state/vitals';
 import getKindDataFromEssay from '@/logic/getKindData';
 import { groupReplies, setNewDaysForReplies } from '@/replies/replies';
 import ReplyMessage from '@/replies/ReplyMessage';
+import { useIsMobile } from '@/logic/useMedia';
+import { useChatInputFocus } from '@/logic/ChatInputFocusContext';
 import DiaryCommentField from './DiaryCommentField';
 import DiaryContent from './DiaryContent/DiaryContent';
 import DiaryNoteHeader from './DiaryNoteHeader';
@@ -60,6 +62,9 @@ export default function DiaryNote({ title }: ViewProps) {
   const unread = useUnread(nest);
   const sort = useDiaryCommentSortMode(chFlag);
   const perms = usePerms(nest);
+  const isMobile = useIsMobile();
+  const { isChatInputFocused } = useChatInputFocus();
+  const shouldApplyPaddingBottom = isMobile && !isChatInputFocused;
   const { compatible } = useChannelCompatibility(nest);
   const { mutateAsync: joinDiary } = useJoinMutation();
   const joinChannel = useCallback(async () => {
@@ -123,6 +128,9 @@ export default function DiaryNote({ title }: ViewProps) {
   if (!note.essay || status === 'loading') {
     return (
       <Layout
+        style={{
+          paddingBottom: shouldApplyPaddingBottom ? 50 : 0,
+        }}
         className="h-full flex-1 bg-white"
         header={
           <DiaryNoteHeader

ui/src/heap/HeapDetail.tsx

@@ -15,6 +15,7 @@ import { ViewProps } from '@/types/groups';
 import { useIsMobile } from '@/logic/useMedia';
 import getKindDataFromEssay from '@/logic/getKindData';
 import { newReplyMap, Post } from '@/types/channel';
+import { useChatInputFocus } from '@/logic/ChatInputFocusContext';
 import HeapDetailSidebarInfo from './HeapDetail/HeapDetailSidebar/HeapDetailSidebarInfo';
 import HeapDetailComments from './HeapDetail/HeapDetailSidebar/HeapDetailComments';
 import HeapDetailHeader from './HeapDetail/HeapDetailHeader';
@@ -37,6 +38,8 @@ export default function HeapDetail({ title }: ViewProps) {
   const isMobile = useIsMobile();
   const { post: note, isLoading } = usePost(nest, idTime || '');
   const { title: curioTitle } = getKindDataFromEssay(note.essay);
+  const { isChatInputFocused } = useChatInputFocus();
+  const shouldApplyPaddingBottom = isMobile && !isChatInputFocused;
   const {
     hasNext,
     hasPrev,
@@ -74,7 +77,7 @@ export default function HeapDetail({ title }: ViewProps) {
   return (
     <Layout
       style={{
-        paddingBottom: isMobile ? 50 : 0,
+        paddingBottom: shouldApplyPaddingBottom ? 50 : 0,
       }}
       className="padding-bottom-transition flex-1 bg-white"
       header={

ui/src/heap/HeapTextInput.tsx

@@ -4,7 +4,6 @@ import React, { useCallback, useEffect } from 'react';
 import { reduce } from 'lodash';
 import LoadingSpinner from '@/components/LoadingSpinner/LoadingSpinner';
 import MessageEditor, { useMessageEditor } from '@/components/MessageEditor';
-import ChatInputMenu from '@/chat/ChatInputMenu/ChatInputMenu';
 import { useIsMobile } from '@/logic/useMedia';
 import {
   useAddPostMutation,
@@ -25,6 +24,7 @@ import Tooltip from '@/components/Tooltip';
 import { useChannelCompatibility } from '@/logic/channel';
 import { constructStory, PostEssay } from '@/types/channel';
 import { Inline, InlineKey } from '@/types/content';
+import { useChatInputFocus } from '@/logic/ChatInputFocusContext';
 
 interface HeapTextInputProps {
   flag: string;
@@ -97,6 +97,7 @@ export default function HeapTextInput({
   const { compatible, text } = useChannelCompatibility(nest);
   const { mutate } = useAddPostMutation(nest);
   const { mutate: addReply } = useAddReplyMutation();
+  const { handleFocus, handleBlur, isChatInputFocused } = useChatInputFocus();
 
   /**
    * This handles submission for new Curios; for edits, see EditCurioForm
@@ -227,6 +228,31 @@ export default function HeapTextInput({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [messageEditor]);
 
+  useEffect(() => {
+    if (messageEditor && !messageEditor.isDestroyed) {
+      if (!isChatInputFocused && messageEditor.isFocused && comment) {
+        handleFocus();
+      }
+
+      if (isChatInputFocused && !messageEditor.isFocused && comment) {
+        handleBlur();
+      }
+    }
+
+    return () => {
+      if (isChatInputFocused) {
+        handleBlur();
+      }
+    };
+  }, [
+    comment,
+    isChatInputFocused,
+    messageEditor,
+    messageEditor?.isFocused,
+    handleFocus,
+    handleBlur,
+  ]);
+
   const onClick = useCallback(
     () => messageEditor && onSubmit(messageEditor),
     [messageEditor, onSubmit]
@@ -238,67 +264,61 @@ export default function HeapTextInput({
 
   // TODO: Set a sane length limit for comments
   return (
-    <>
+    <div
+      className={cn('items-end', className)}
+      onClick={() => messageEditor.commands.focus()}
+    >
+      {chatInfo.blocks.length > 0 ? (
+        <div className="my-2 flex w-full items-center justify-start font-semibold">
+          <span className="mr-2 text-gray-600">Attached: </span>
+          {chatInfo.blocks.length} reference
+          {chatInfo.blocks.length === 1 ? '' : 's'}
+          <button
+            className="icon-button ml-auto"
+            onClick={() => useChatStore.getState().setBlocks(flag, [])}
+          >
+            <X16Icon className="h-4 w-4" />
+          </button>
+        </div>
+      ) : null}
       <div
-        className={cn('items-end', className)}
-        onClick={() => messageEditor.commands.focus()}
+        className={cn(
+          'w-full',
+          comment ? 'flex flex-row items-end' : 'relative flex h-full'
+        )}
       >
-        {chatInfo.blocks.length > 0 ? (
-          <div className="my-2 flex w-full items-center justify-start font-semibold">
-            <span className="mr-2 text-gray-600">Attached: </span>
-            {chatInfo.blocks.length} reference
-            {chatInfo.blocks.length === 1 ? '' : 's'}
+        <MessageEditor
+          editor={messageEditor}
+          className={cn('w-full rounded-lg', inputClass)}
+          inputClassName={cn(
+            // Since TipTap simulates an input using a <p> tag, only style
+            // the fake placeholder when the field is empty
+            messageEditor.getText() === '' ? 'text-gray-400' : ''
+          )}
+        />
+        {!sendDisabled ? (
+          <Tooltip content={text} open={compatible ? false : undefined}>
             <button
-              className="icon-button ml-auto"
-              onClick={() => useChatStore.getState().setBlocks(flag, [])}
+              className={cn(
+                'button rounded-md px-2 py-1',
+                comment ? 'ml-2 shrink-0' : 'absolute bottom-3 right-3'
+              )}
+              disabled={
+                isPending ||
+                !compatible ||
+                (messageEditor.getText() === '' && chatInfo.blocks.length === 0)
+              }
+              onClick={onClick}
             >
-              <X16Icon className="h-4 w-4" />
+              {isPending ? (
+                <LoadingSpinner secondary="black" />
+              ) : (
+                <SubmitLabel comment={comment} />
+              )}
             </button>
-          </div>
+          </Tooltip>
         ) : null}
-        <div
-          className={cn(
-            'w-full',
-            comment ? 'flex flex-row items-end' : 'relative flex h-full'
-          )}
-        >
-          <MessageEditor
-            editor={messageEditor}
-            className={cn('w-full rounded-lg', inputClass)}
-            inputClassName={cn(
-              // Since TipTap simulates an input using a <p> tag, only style
-              // the fake placeholder when the field is empty
-              messageEditor.getText() === '' ? 'text-gray-400' : ''
-            )}
-          />
-          {!sendDisabled ? (
-            <Tooltip content={text} open={compatible ? false : undefined}>
-              <button
-                className={cn(
-                  'button rounded-md px-2 py-1',
-                  comment ? 'ml-2 shrink-0' : 'absolute bottom-3 right-3'
-                )}
-                disabled={
-                  isPending ||
-                  !compatible ||
-                  (messageEditor.getText() === '' &&
-                    chatInfo.blocks.length === 0)
-                }
-                onClick={onClick}
-              >
-                {isPending ? (
-                  <LoadingSpinner secondary="black" />
-                ) : (
-                  <SubmitLabel comment={comment} />
-                )}
-              </button>
-            </Tooltip>
-          ) : null}
-        </div>
       </div>
-      {isMobile && messageEditor.isFocused ? (
-        <ChatInputMenu editor={messageEditor} />
-      ) : null}
-    </>
+    </div>
   );
 }

ui/src/state/storage/upload.ts

@@ -22,10 +22,12 @@ function prefixEndpoint(endpoint: string) {
 }
 
 function imageSize(url: string) {
-  const size = getImageSize(url).then<[number, number]>(({ width, height }) => [
-    width,
-    height,
-  ]);
+  const size = getImageSize(url)
+    .then<[number, number]>(({ width, height }) => [width, height])
+    .catch((e) => {
+      console.log('failed to get image size', { e });
+      return undefined;
+    });
   return size;
 }
 
@@ -169,12 +171,17 @@ export const useFileStore = create<FileStore>((set, get) => ({
               return '';
             });
             updateStatus(uploader, key, 'success');
-            imageSize(fileUrl).then((s) =>
-              updateFile(uploader, key, {
-                size: s,
-                url: fileUrl,
-              })
-            );
+            imageSize(fileUrl)
+              .then((s) =>
+                updateFile(uploader, key, {
+                  size: s,
+                  url: fileUrl,
+                })
+              )
+              .catch((e) => {
+                console.log('failed to get image size', { e });
+                return '';
+              });
           })
           .catch((error: any) => {
             updateStatus(
@@ -217,12 +224,17 @@ export const useFileStore = create<FileStore>((set, get) => ({
         .then(() => {
           const fileUrl = url.split('?')[0];
           updateStatus(uploader, key, 'success');
-          imageSize(fileUrl).then((s) =>
-            updateFile(uploader, key, {
-              size: s,
-              url: fileUrl,
-            })
-          );
+          imageSize(fileUrl)
+            .then((s) =>
+              updateFile(uploader, key, {
+                size: s,
+                url: fileUrl,
+              })
+            )
+            .catch((e) => {
+              console.log('failed to get image size', { e });
+              return '';
+            });
         })
         .catch((error: any) => {
           updateStatus(