Merge pull request #4565 from urbit/lf/grabbag

interface: grabbag of fixes

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

@@ -60,7 +60,7 @@ export default class SettingsStateZusettingsReducer{
   getAll(json: any, state: SettingsStateZus) {
     const data = _.get(json, 'all');
     if(data) {
-      _.merge(state, data);
+      _.mergeWith(state, data, (obj, src) => _.isArray(src) ? src : undefined)
     }
   }
 

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

@@ -33,7 +33,7 @@ export function ViewProfile(props: any) {
           />
           <ProfileStatus contact={contact} />
         </ProfileControls>
-        <ProfileImages contact={contact} ship={ship} />
+        <ProfileImages key={ship} contact={contact} ship={ship} />
       </ProfileHeader>
       <Row pb={2} alignItems='center' width='100%'>
         <Center width='100%'>

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

@@ -42,6 +42,8 @@ export default function CommentInput(props: CommentInputProps) {
       validationSchema={formSchema}
       onSubmit={props.onSubmit}
       initialValues={initialValues}
+      validateOnBlur={false}
+      validateOnChange={false}
     >
       <Form>
         <SubmitTextArea

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

@@ -21,6 +21,8 @@ interface DropdownProps {
   options: ReactNode;
   alignY: AlignY | AlignY[];
   alignX: AlignX | AlignX[];
+  offsetX?: number;
+  offsetY?: number;
   width?: string;
   dropWidth?: string;
 }
@@ -37,7 +39,7 @@ const DropdownOptions = styled(Box)`
 `;
 
 export function Dropdown(props: DropdownProps): ReactElement {
-  const { children, options } = props;
+  const { children, options, offsetX = 0, offsetY = 0 } = props;
   const dropdownRef = useRef<HTMLElement>(null);
   const anchorRef = useRef<HTMLElement>(null);
   const { pathname } = useLocation();
@@ -45,7 +47,7 @@ export function Dropdown(props: DropdownProps): ReactElement {
   const [coords, setCoords] = useState({});
 
   const updatePos = useCallback(() => {
-    const newCoords = getRelativePosition(anchorRef.current, props.alignX, props.alignY);
+    const newCoords = getRelativePosition(anchorRef.current, props.alignX, props.alignY, offsetX, offsetY);
     if(newCoords) {
       setCoords(newCoords);
     }

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

@@ -109,9 +109,9 @@ const StatusBar = (props) => {
           alignY="top"
           alignX="right"
           flexShrink={'0'}
+          offsetY={-48}
           options={
             <Col
-              mt='6'
               p='1'
               backgroundColor="white"
               color="washedGray"

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

@@ -151,12 +151,14 @@ export default class VirtualScroller<T> extends Component<VirtualScrollerProps<T
   }
 
   componentDidMount() {
-    if(true) {
-      this.updateVisible(0);
-      this.resetScroll();
-      this.loadRows(false);
-      return;
+    if(this.props.size < 100) {
+      this.loaded.top = true;
+      this.loaded.bottom = true;
     }
+      
+    this.updateVisible(0);
+    this.resetScroll();
+    this.loadRows(false);
   }
 
   // manipulate scrollbar manually, to dodge change detection
@@ -478,9 +480,8 @@ export default class VirtualScroller<T> extends Component<VirtualScrollerProps<T
 
     const transform = isTop ? 'scale3d(1, 1, 1)' : 'scale3d(1, -1, 1)';
 
-    const loaded = this.props.data.size > 0;
 
-    const atStart = loaded && this.props.data.peekLargest()?.[0].eq(visibleItems.peekLargest()?.[0] || bigInt.zero);
+    const atStart = (this.props.data.peekLargest()?.[0] ?? bigInt.zero).eq(visibleItems.peekLargest()?.[0] || bigInt.zero);
     const atEnd = this.loaded.top;
 
     return (

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

@@ -286,8 +286,15 @@ function Participant(props: {
 
   const onKick = useCallback(async () => {
     const resource = resourceFromPath(association.group);
-    await api.groups.remove(resource, [`~${contact.patp}`]);
-  }, [api, association]);
+    if(contact.pending) {
+      await api.groups.changePolicy(
+        resource, 
+        { invite: { removeInvites: [`~${contact.patp}`] } }
+      );
+    } else {
+      await api.groups.remove(resource, [`~${contact.patp}`]);
+    }
+  }, [api, contact, association]);
 
   const avatar =
     contact?.avatar !== null && !hideAvatars ? (