interface: adds clickable instructions to ImageInput, removes truncation in settings

fixes urbit/landscape#695, fixes urbit/landscape#581

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

@@ -1,32 +1,36 @@
 import React, { ReactElement } from 'react';
 
 import {
-  Box,
   Text,
   Row,
   Label,
   Col,
-  ManagedRadioButtonField as Radio,
+  ManagedRadioButtonField as Radio
 } from '@tlon/indigo-react';
 
 import GlobalApi from '~/logic/api/global';
 import { ImageInput } from '~/views/components/ImageInput';
 import { ColorInput } from '~/views/components/ColorInput';
-import { StorageState } from '~/types';
 
 export type BgType = 'none' | 'url' | 'color';
 
 export function BackgroundPicker({
   bgType,
   bgUrl,
-  api,
+  api
 }: {
   bgType: BgType;
   bgUrl?: string;
   api: GlobalApi;
 }): ReactElement {
   const rowSpace = { my: 0, alignItems: 'center' };
-  const colProps = { my: 3, mr: 4, gapY: 1 };
+  const colProps = {
+    my: 3,
+    mr: 4,
+    gapY: 1,
+    minWidth: '266px',
+    width: ['100%', '288px']
+  };
   return (
     <Col>
       <Label>Landscape Background</Label>
@@ -40,7 +44,7 @@ export function BackgroundPicker({
             id="bgUrl"
             placeholder="Drop or upload a file, or paste a link here"
             name="bgUrl"
-            url={bgUrl || ""}
+            url={bgUrl || ''}
           />
         </Col>
       </Row>
@@ -48,13 +52,13 @@ export function BackgroundPicker({
         <Col {...colProps}>
           <Radio mb="1" label="Color" id="color" name="bgType" />
           <Text ml="5" gray>Set a hex-based background</Text>
-          <ColorInput placeholder="FFFFFF" ml="5" id="bgColor" /> 
+          <ColorInput placeholder="FFFFFF" ml="5" id="bgColor" />
         </Col>
       </Row>
       <Radio
         my="3"
         caption="Your home screen will simply render as its respective day/night mode color"
-        name="bgType" 
+        name="bgType"
         label="None"
         id="none" />
     </Col>

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

@@ -8,10 +8,10 @@ import {
   Button,
   Label,
   ErrorLabel,
-  BaseInput
+  BaseInput,
+  Text
 } from '@tlon/indigo-react';
 
-import { StorageState } from '~/types';
 import useStorage from '~/logic/lib/useStorage';
 
 type ImageInputProps = Parameters<typeof Box>[0] & {
@@ -21,12 +21,9 @@ type ImageInputProps = Parameters<typeof Box>[0] & {
 };
 
 export function ImageInput(props: ImageInputProps): ReactElement {
-  const { id, label, caption, placeholder } = props;
-
+  const { id, label, caption } = props;
   const { uploadDefault, canUpload, uploading } = useStorage();
-
   const [field, meta, { setValue, setError }] = useField(id);
-
   const ref = useRef<HTMLInputElement | null>(null);
 
   const onImageUpload = useCallback(async () => {
@@ -43,10 +40,55 @@ export function ImageInput(props: ImageInputProps): ReactElement {
     }
   }, [ref.current, uploadDefault, canUpload, setValue]);
 
-  const onClick = useCallback(() => {
+  const clickUploadButton = useCallback(() => {
     ref.current?.click();
   }, [ref]);
 
+  const Prompt = () => (
+    <Text
+      black
+      fontWeight='500'
+      position='absolute'
+      left={2}
+      top={2}
+      style={{ pointerEvents: 'none' }}
+    >
+      Paste a link here, or{' '}
+      <Text
+        fontWeight='500'
+        cursor='pointer'
+        color='blue'
+        style={{ pointerEvents: 'all' }}
+        onClick={clickUploadButton}
+      >
+        upload
+      </Text>{' '}
+      a file
+    </Text>
+  );
+
+  const Uploading = () => (
+    <Text position='absolute' left={2} top={2} gray>
+      Uploading...
+    </Text>
+  );
+
+  const ErrorRetry = () => (
+    <Text position='absolute' left={2} top={2} color='red'>
+      Error, please{' '}
+      <Text
+        fontWeight='500'
+        cursor='pointer'
+        color='blue'
+        style={{ pointerEvents: 'all' }}
+        onClick={clickUploadButton}
+      >
+        {' '}
+        retry
+      </Text>
+    </Text>
+  );
+
   return (
     <Box display="flex" flexDirection="column" {...props}>
       <Label htmlFor={id}>{label}</Label>
@@ -55,25 +97,21 @@ export function ImageInput(props: ImageInputProps): ReactElement {
           {caption}
         </Label>
       ) : null}
-      <Row mt="2" alignItems="flex-end">
+      <Row mt="2" alignItems="flex-end" position='relative'>
+        {!field.value && !uploading && meta.error === undefined ? (<Prompt />) : null}
+        {uploading && meta.error === undefined ? (<Uploading />) : null}
+        {meta.touched && meta.error !== undefined ? (<ErrorRetry />) : null}
         <Input
           type={'text'}
           hasError={meta.touched && meta.error !== undefined}
-          placeholder={placeholder}
           {...field}
         />
         {canUpload && (
           <>
             <Button
-              type="button"
-              ml={1}
-              border={1}
-              borderColor="lightGray"
-              onClick={onClick}
-              flexShrink={0}
-            >
-              {uploading ? 'Uploading' : 'Upload'}
-            </Button>
+              display='none'
+              onClick={clickUploadButton}
+            />
             <BaseInput
               style={{ display: 'none' }}
               type="file"