Merge pull request #5038 from urbit/lf/moar-omni

interface: some bug fixes

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

@@ -187,7 +187,8 @@ function clearState(state: HarkState): HarkState {
       graph: {},
       group: {}
     },
-    notificationsCount: 0
+    notificationsCount: 0,
+    unreadNotes: {}
   };
   Object.assign(state, initialState);
 

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

@@ -108,7 +108,7 @@ const useSettingsState = createState<SettingsState>(
   [
     (set, get) =>
       createSubscription('settings-store', '/all', (e) => {
-        const data = _.get(e, 'settings-update', false);
+        const data = _.get(e, 'settings-event', false);
         if (data) {
           reduceStateN(get(), data, reduceUpdate);
         }

pkg/interface/src/views/apps/launch/App.tsx

@@ -68,14 +68,13 @@ export const LaunchApp = (props: LaunchAppProps): ReactElement | null => {
   const waiter = useWaitForProps({ ...props, associations });
   const hashBox = (
     <Box
-      position={['relative', 'absolute']}
-      left={0}
-      bottom={0}
+      position="sticky"
+      left={3}
+      bottom={3}
+      mt={3}
       backgroundColor="white"
-      ml={3}
-      mb={3}
       borderRadius={2}
-      overflow='hidden'
+      width="fit-content"
       fontSize={0}
       cursor="pointer"
       onClick={() => {
@@ -87,8 +86,10 @@ export const LaunchApp = (props: LaunchAppProps): ReactElement | null => {
       }}
     >
       <Box
+        height="100%"
         backgroundColor={runtimeLag ? 'yellow' : 'washedGray'}
         p={2}
+        width="fit-content"
       >
         <Text mono bold>{hashText || baseHash}</Text>
       </Box>
@@ -240,9 +241,8 @@ export const LaunchApp = (props: LaunchAppProps): ReactElement | null => {
             (<Groups />)
           }
         </Box>
-        <Box alignSelf="flex-start" display={['block', 'none']}>{hashBox}</Box>
+        {hashBox}
       </ScrollbarLessBox>
-      <Box display={['none', 'block']}>{hashBox}</Box>
     </>
   );
 };

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

@@ -1,16 +1,15 @@
 import {
-    Col,
-
-    Label,
-    ManagedRadioButtonField as Radio, Text
+  Col,
+  Label,
+  ManagedRadioButtonField as Radio,
+  Text
 } from '@tlon/indigo-react';
 import { Form } from 'formik';
 import { putEntry } from '@urbit/api/settings';
-import React from 'react';
+import React, { useMemo } from 'react';
 import * as Yup from 'yup';
 import { uxToHex } from '~/logic/lib/util';
 import useSettingsState, { selectSettingsState } from '~/logic/state/settings';
-import { AsyncButton } from '~/views/components/AsyncButton';
 import { FormikOnBlur } from '~/views/components/FormikOnBlur';
 import { BackButton } from './BackButton';
 import airlock from '~/logic/api';
@@ -20,10 +19,9 @@ const formSchema = Yup.object().shape({
   bgType: Yup.string()
     .oneOf(['none', 'color', 'url'], 'invalid')
     .required('Required'),
-  background: Yup.string(),
-  theme: Yup.string()
-    .oneOf(['light', 'dark', 'auto'])
-    .required('Required')
+  bgColor: Yup.string().when('bgType', (bgType, schema) => bgType === 'color' ? schema.required() : schema),
+  bgUrl: Yup.string().when('bgType', (bgType, schema) => bgType === 'url' ? schema.required() : schema),
+  theme: Yup.string().oneOf(['light', 'dark', 'auto']).required('Required')
 });
 
 interface FormSchema {
@@ -37,71 +35,66 @@ const settingsSel = selectSettingsState(['display']);
 
 export default function DisplayForm() {
   const {
-    display: {
-      background,
-      backgroundType,
-      theme
-    }
+    display: { background, backgroundType, theme }
   } = useSettingsState(settingsSel);
 
-  let bgColor, bgUrl;
-  if (backgroundType === 'url') {
-    bgUrl = background;
-  }
-  if (backgroundType === 'color') {
-    bgColor = background;
-  }
+  const initialValues: FormSchema = useMemo(() => {
+    let bgColor, bgUrl;
+    if (backgroundType === 'url') {
+      bgUrl = background;
+    }
+    if (backgroundType === 'color') {
+      bgColor = background;
+    }
+    return {
+      bgType: backgroundType,
+      bgColor: bgColor || '',
+      bgUrl,
+      theme
+    };
+  }, [backgroundType, background, theme]);
 
   return (
     <FormikOnBlur
       validationSchema={formSchema}
-      initialValues={
-        {
-          bgType: backgroundType,
-          bgColor: bgColor || '',
-          bgUrl,
-          theme
-        } as FormSchema
-      }
+      initialValues={initialValues}
       onSubmit={async (values, actions) => {
         const promises = [] as Promise<any>[];
-        promises.push(airlock.poke(putEntry('display', 'backgroundType', values.bgType)));
         promises.push(
-          airlock.poke(putEntry('display', 'background',
-            values.bgType === 'color'
-            ? `#${uxToHex(values.bgColor || '0x0')}`
-            : values.bgType === 'url'
-            ? values.bgUrl || ''
-            : false
-          )));
-
+          airlock.poke(putEntry('display', 'backgroundType', values.bgType))
+        );
+        promises.push(
+          airlock.poke(
+            putEntry(
+              'display',
+              'background',
+              values.bgType === 'color'
+                ? `#${uxToHex(values.bgColor || '0x0')}`
+                : values.bgType === 'url'
+                ? values.bgUrl || ''
+                : false
+            )
+          )
+        );
         promises.push(airlock.poke(putEntry('display', 'theme', values.theme)));
-        await Promise.all(promises);
-
-        actions.setStatus({ success: null });
       }}
     >
-        <Form>
-          <BackButton />
-          <Col p={5} pt={4} gapY={5}>
-              <Col gapY={1} mt={0}>
-              <Text color="black" fontSize={2} fontWeight="medium">
-                Display Preferences
-              </Text>
-              <Text gray>
-                Customize visual interfaces across your Landscape
-              </Text>
-            </Col>
-            <BackgroundPicker />
-            <Label>Theme</Label>
-            <Radio name="theme" id="light" label="Light" />
-            <Radio name="theme" id="dark" label="Dark" />
-            <Radio name="theme" id="auto" label="Auto" />
-            <AsyncButton primary width="fit-content" type="submit">
-              Save
-            </AsyncButton>
+      <Form>
+        <BackButton />
+        <Col p={5} pt={4} gapY={5}>
+          <Col gapY={1} mt={0}>
+            <Text color="black" fontSize={2} fontWeight="medium">
+              Display Preferences
+            </Text>
+            <Text gray>Customize visual interfaces across your Landscape</Text>
           </Col>
-        </Form>
+          <BackgroundPicker />
+          <Label>Theme</Label>
+          <Radio name="theme" id="light" label="Light" />
+          <Radio name="theme" id="dark" label="Dark" />
+          <Radio name="theme" id="auto" label="Auto" />
+        </Col>
+      </Form>
     </FormikOnBlur>
   );
 }

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

@@ -17,10 +17,13 @@ export function FormikOnBlur<
     ) {
       setSubmitting(true);
       const { values } = formikBag;
-      formikBag.submitForm().then(() => {
-        formikBag.resetForm({ values });
-        setSubmitting(false);
-      });
+      formikBag.validateForm(values)
+        .then(valid => valid ?
+          formikBag.submitForm().then(() => {
+            formikBag.resetForm({ values });
+            setSubmitting(false);
+          }) : null
+        );
     }
   }, [
     formikBag.errors,