interface/views: ts lint

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

@@ -226,7 +226,9 @@ export class ChatInput extends Component<ChatInputProps, ChatInputState> {
   }
 }
 
+// @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/*' }),
   ['hideAvatars']
 );

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

@@ -251,8 +251,7 @@ function ChatMessage(props: ChatMessageProps) {
   let onDelete = props?.onDelete ?? (() => {});
   const transcluded = props?.transcluded ?? 0;
   const renderSigil = props.renderSigil ?? (Boolean(nextMsg && msg.author !== nextMsg.author) ||
-        !nextMsg ||
+        !nextMsg
-        msg.number === 1
     );
 
     const ourMention = msg?.contents?.some((e: MentionContent) => {

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

@@ -136,6 +136,7 @@ export function ChatPane(props: ChatPaneProps): ReactElement {
   }
 
   return (
+    // @ts-ignore
     <Col {...bind} height="100%" overflow="hidden" position="relative">
       <ShareProfile
         our={ourContact}

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

@@ -239,6 +239,7 @@ class ChatWindow extends Component<
     };
 
     return (
+      // @ts-ignore
       <ChatMessage
         key={index.toString()}
         ref={ref}
@@ -281,6 +282,7 @@ class ChatWindow extends Component<
           origin='bottom'
           style={virtScrollerStyle}
           onBottomLoaded={this.onBottomLoaded}
+          // @ts-ignore paging @liam-fitzgerald on virtualscroller props
           onScroll={this.onScroll}
           data={graph}
           size={graph.size}

pkg/interface/src/views/apps/launch/components/Groups.tsx

@@ -64,7 +64,6 @@ export default function Groups(props: GroupsProps & Parameters<typeof Box>[0]) {
             unreads={unreadCount}
             path={group?.group}
             title={group.metadata.title}
-            picture={group.metadata.picture}
           />
         );
       })}
@@ -96,7 +95,7 @@ function Group(props: GroupProps) {
         .diff(moment()))
     .as('days'))) || 0;
   return (
-    <Tile ref={anchorRef} position="relative" bg={isTutorialGroup ? 'lightBlue' : undefined} to={`/~landscape${path}`} gridColumnStart={first ? '1' : null}>
+    <Tile ref={anchorRef} position="relative" bg={isTutorialGroup ? 'lightBlue' : undefined} to={`/~landscape${path}`} gridColumnStart={first ? 1 : null}>
       <Col height="100%" justifyContent="space-between">
         <Text>{title}</Text>
         {!hideUnreads && (<Col>

pkg/interface/src/views/apps/launch/components/tiles.tsx

@@ -35,6 +35,7 @@ const Tiles = (props: TileProps): ReactElement => {
         return (
           <WeatherTile
             key={key}
+            // @ts-ignore withState not passing props
             api={props.api}
           />
         );

pkg/interface/src/views/apps/launch/components/tiles/weather.tsx

@@ -135,7 +135,7 @@ class WeatherTile extends React.Component<WeatherTileProps, WeatherTileState> {
           {locationName ? ` Current location is near ${locationName}.` : ''}
         </Text>
         {error}
-        <Box mt='auto' display='flex' marginBlockEnd={0}>
+        <Box mt='auto' display='flex' style={{ marginBlockEnd: '0' }}>
           <BaseInput
             id="location"
             size={10}

pkg/interface/src/views/apps/links/LinkResource.tsx

@@ -1,4 +1,5 @@
 import { Box, Center, Col, LoadingSpinner, Text } from '@tlon/indigo-react';
+import { Group } from '@urbit/api';
 import { Association } from '@urbit/api/metadata';
 import bigInt from 'big-integer';
 import React, { useEffect } from 'react';
@@ -35,7 +36,7 @@ export function LinkResource(props: LinkResourceProps) {
 
   const [, , ship, name] = rid.split('/');
   const resourcePath = `${ship.slice(1)}/${name}`;
-  const resource = associations.graph[rid]
+  const resource: any = associations.graph[rid]
     ? associations.graph[rid]
     : { metadata: {} };
   const groups = useGroupState(state => state.groups);
@@ -62,13 +63,14 @@ export function LinkResource(props: LinkResourceProps) {
           path={relativePath('')}
           render={(props) => {
             return (
+              // @ts-ignore
               <LinkWindow
                 key={rid}
                 association={resource}
                 resource={resourcePath}
                 graph={graph}
                 baseUrl={resourceUrl}
-                group={group}
+                group={group as Group}
                 path={resource.group}
                 pendingSize={Object.keys(graphTimesentMap[resourcePath] || {}).length}
                 api={api}
@@ -110,7 +112,7 @@ export function LinkResource(props: LinkResourceProps) {
                   node={node}
                   baseUrl={resourceUrl}
                   association={association}
-                  group={group}
+                  group={group as Group}
                   path={resource?.group}
                   api={api}
                   mt={3}
@@ -126,7 +128,7 @@ export function LinkResource(props: LinkResourceProps) {
                   editCommentId={editCommentId}
                   history={props.history}
                   baseUrl={`${resourceUrl}/index/${props.match.params.index}`}
-                  group={group}
+                  group={group as Group}
                   px={3}
                 />
               </Col>

pkg/interface/src/views/apps/links/LinkWindow.tsx

@@ -21,6 +21,7 @@ interface LinkWindowProps {
   path: string;
   api: GlobalApi;
   pendingSize: number;
+  mb?: number;
 }
 
 const style = {
@@ -48,6 +49,7 @@ class LinkWindow extends Component<LinkWindowProps, {}> {
     const { props } = this;
     const { association, graph, api } = props;
     const [, , ship, name] = association.resource.split('/');
+    // @ts-ignore Uint8Array vs. BigInt mismatch?
     const node = graph.get(index);
     const first = graph.peekLargest()?.[0];
     const post = node?.post;
@@ -58,6 +60,7 @@ class LinkWindow extends Component<LinkWindowProps, {}> {
       ...props,
       node
     };
+    {/* @ts-ignore calling @liam-fitzgerald on Uint8Array props */}
     if (this.canWrite() && index.eq(first ?? bigInt.zero)) {
       return (
         <React.Fragment key={index.toString()}>
@@ -125,6 +128,7 @@ class LinkWindow extends Component<LinkWindowProps, {}> {
 
     return (
       <Col width="100%" height="100%" position="relative">
+        {/* @ts-ignore calling @liam-fitzgerald on virtualscroller */}
         <VirtualScroller
           origin="top"
           offset={0}

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

@@ -20,6 +20,8 @@ interface LinkItemProps {
   group: Group;
   path: string;
   baseUrl: string;
+  mt?: number;
+  measure?: any;
 }
 export const LinkItem = React.forwardRef((props: LinkItemProps, ref: RefObject<HTMLDivElement>): ReactElement => {
   const {
@@ -49,6 +51,7 @@ export const LinkItem = React.forwardRef((props: LinkItemProps, ref: RefObject<H
       setTimeout(() => {
         console.log(remoteRef.current);
         if(document.activeElement instanceof HTMLIFrameElement
+          // @ts-ignore forwardref prop passing
           && remoteRef?.current?.containerRef?.contains(document.activeElement)) {
           markRead();
         }
@@ -100,6 +103,7 @@ export const LinkItem = React.forwardRef((props: LinkItemProps, ref: RefObject<H
   const appPath = `/ship/~${resource}`;
   const unreads = useHarkState(state => state.unreads);
   const commColor = (unreads.graph?.[appPath]?.[`/${index}`]?.unreads ?? 0) > 0 ? 'blue' : 'gray';
+  // @ts-ignore hark will have to choose between sets and numbers
   const isUnread = unreads.graph?.[appPath]?.['/']?.unreads?.has(node.post.index);
 
   return (
@@ -135,8 +139,10 @@ export const LinkItem = React.forwardRef((props: LinkItemProps, ref: RefObject<H
         <>
         <RemoteContent
           ref={(r) => {
+            // @ts-ignore RemoteContent weirdness
             remoteRef.current = r;
           }}
+          // @ts-ignore RemoteContent weirdness
           renderUrl={false}
           url={href}
           text={contents[0].text}

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

@@ -12,6 +12,7 @@ interface LinkSubmitProps {
   api: GlobalApi;
   name: string;
   ship: string;
+  parentIndex?: any;
 }
 
 const LinkSubmit = (props: LinkSubmitProps) => {
@@ -157,6 +158,7 @@ const LinkSubmit = (props: LinkSubmitProps) => {
 
   return (
     <>
+    {/* @ts-ignore archaic event type mismatch */}
       <Box
         flexShrink={0}
         position='relative'
@@ -194,6 +196,7 @@ const LinkSubmit = (props: LinkSubmitProps) => {
             onBlur={() => [setUrlFocused(false), setSubmitFocused(false)]}
             onFocus={() => [setUrlFocused(true), setSubmitFocused(true)]}
             spellCheck="false"
+            // @ts-ignore archaic event type mismatch error
             onPaste={onPaste}
             onKeyPress={onKeyPress}
             value={linkValue}

pkg/interface/src/views/apps/permalinks/TranscludedNode.tsx

@@ -49,7 +49,7 @@ function TranscludedLinkNode(props: {
           <Author
             pt='12px'
             pl='12px'
-            size='24'
+            size={24}
             sigilPadding='6'
             showImage
             ship={node.post.author}
@@ -121,7 +121,7 @@ function TranscludedComment(props: {
       <Author
         pt='12px'
         pl='12px'
-        size='24'
+        size={24}
         sigilPadding='6'
         showImage
         ship={comment.post.author}
@@ -175,7 +175,7 @@ function TranscludedPublishNode(props: {
           <Author
             pl='12px'
             pt='12px'
-            size='24'
+            size={24}
             sigilPadding='6'
             showImage
             ship={post.post.author}
@@ -235,7 +235,7 @@ export function TranscludedPost(props: {
       <Author
         pt='12px'
         pl='12px'
-        size='24'
+        size={24}
         sigilPadding='6'
         showImage
         ship={post.author}
@@ -273,7 +273,7 @@ export function TranscludedNode(props: {
 
   if (
     typeof node?.post === "string" &&
-    assoc.metadata.config.graph === "chat"
+    (assoc.metadata.config as GraphConfig).graph === "chat"
   ) {
     return (
       <Box
@@ -296,6 +296,7 @@ export function TranscludedNode(props: {
             renderSigil
             transcluded={transcluded + 1}
             className="items-top cf hide-child"
+            // @ts-ignore isn't forwarding props to memo
             association={assoc}
             msg={node.post}
             fontSize={0}

pkg/interface/src/views/apps/permalinks/embed.tsx

@@ -1,20 +1,12 @@
-import {
+import { BaseAnchor, Box, Center, Col, Icon, Row, Text } from "@tlon/indigo-react";
-  BaseAnchor, Box,
+import { Association, GraphNode, resourceFromPath, GraphConfig } from '@urbit/api';
-
-
-
-
-
-  Center, Col, Icon, Row, Text
-} from "@tlon/indigo-react";
-import { Association, GraphNode, resourceFromPath } from '@urbit/api';
 import React, { useCallback, useEffect, useState } from "react";
 import { useHistory, useLocation } from 'react-router-dom';
 import GlobalApi from '~/logic/api/global';
 import {
   getPermalinkForGraph, GraphPermalink as IGraphPermalink, parsePermalink
 } from '~/logic/lib/permalinks';
-import { getModuleIcon } from "~/logic/lib/util";
+import { getModuleIcon, GraphModule } from "~/logic/lib/util";
 import { useVirtualResizeProp } from "~/logic/lib/virtualContext";
 import useGraphState from "~/logic/state/graph";
 import useMetadataState from "~/logic/state/metadata";
@@ -129,7 +121,7 @@ function GraphPermalink(
         <PermalinkDetails
           known
           showTransclusion={showTransclusion}
-          icon={getModuleIcon(association.metadata.config.graph)}
+          icon={getModuleIcon((association.metadata.config as GraphConfig).graph as GraphModule)}
           title={association.metadata.title}
           permalink={permalink}
         />
@@ -197,6 +189,7 @@ export function PermalinkEmbed(props: {
   transcluded: number;
   showOurContact?: boolean;
   full?: boolean;
+  pending?: any;
 }) {
   const permalink = parsePermalink(props.link);
 

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

@@ -39,7 +39,7 @@ export function SetStatus(props: any) {
         ref={inputRef}
         onChange={onStatusChange}
         value={_status}
-        autocomplete='off'
+        autoComplete='off'
         width='75%'
         mr={2}
         onKeyPress={(evt) => {

pkg/interface/src/views/apps/publish/PublishResource.tsx

@@ -10,10 +10,13 @@ type PublishResourceProps = StoreState & {
   association: Association;
   api: GlobalApi;
   baseUrl: string;
+  history?: any;
+  match?: any;
+  location?: any;
 };
 
 export function PublishResource(props: PublishResourceProps) {
-  const { association, api, baseUrl, notebooks } = props;
+  const { association, api, baseUrl } = props;
   const rid = association.resource;
   const [, , ship, book] = rid.split('/');
   const location = useLocation();

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

@@ -69,6 +69,7 @@ export function NotePreview(props: NotePreviewProps) {
   const [rev, title, body, content] = getLatestRevision(node);
   const appPath = `/ship/${props.host}/${props.book}`;
   const unreads = useHarkState(state => state.unreads);
+  // @ts-ignore hark will have to choose between sets and numbers
   const isUnread = unreads.graph?.[appPath]?.['/']?.unreads?.has(`/${noteId}/1/1`);
 
   const snippet = getSnippet(body);

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

@@ -1,5 +1,5 @@
 import { Box, Col, Row, Text } from '@tlon/indigo-react';
-import { Association, Graph, Unreads } from '@urbit/api';
+import { Association, Graph } from '@urbit/api';
 import React, { ReactElement } from 'react';
 import { RouteComponentProps } from 'react-router-dom';
 import { useShowNickname } from '~/logic/lib/util';
@@ -14,7 +14,6 @@ interface NotebookProps {
   association: Association;
   baseUrl: string;
   rootUrl: string;
-  unreads: Unreads;
 }
 
 export function Notebook(props: NotebookProps & RouteComponentProps): ReactElement | null {

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

@@ -15,7 +15,6 @@ interface NotebookPostsProps {
 }
 
 export function NotebookPosts(props: NotebookPostsProps) {
-  const contacts = useContactState(state => state.contacts);
   return (
     <Col>
       {Array.from(props.graph || []).map(
@@ -25,7 +24,6 @@ export function NotebookPosts(props: NotebookPostsProps) {
               key={date.toString()}
               host={props.host}
               book={props.book}
-              contact={contacts[`~${node.post.author}`]}
               node={node}
               baseUrl={props.baseUrl}
               group={props.group}

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

@@ -57,7 +57,9 @@ const StoreDebugger = (props: StoreDebuggerProps) => {
           placeholder="Drill Down"
           width="100%"
           onKeyUp={(event) => {
+            // @ts-ignore clearly value is in eventtarget
             if (event.target.value) {
+            // @ts-ignore clearly value is in eventtarget
               tryFilter(event.target.value);
             } else {
               setFilter('');

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

@@ -98,7 +98,9 @@ export default function DisplayForm(props: DisplayFormProps) {
                 Customize visual interfaces across your Landscape
               </Text>
             </Col>
-            <BackgroundPicker api={api}
+            <BackgroundPicker
+            api={api}
+            bgType={bgType}
             />
             <Label>Theme</Label>
             <Radio name="theme" id="light" label="Light" />

pkg/interface/src/views/apps/term/app.tsx

@@ -78,6 +78,7 @@ class TermApp extends Component {
                     border={['0','1']}
                     cursor='text'
                   >
+                    {/* @ts-ignore declare props in later pass */}
                     <History log={this.state.lines.slice(0, -1)} />
                     <Input
                       ship={this.props.ship}

pkg/interface/src/views/apps/term/components/history.tsx

@@ -21,7 +21,9 @@ export class History extends Component {
         <Box
           mt='auto'
         >
+          {/* @ts-ignore declare props in later pass */}
           {this.props.log.map((line, i) => {
+            // @ts-ignore react memo not passing props
             return <Line key={i} line={line} />;
           })}
         </Box>

pkg/interface/src/views/apps/term/components/input.tsx

@@ -15,10 +15,11 @@ export class Input extends Component {
 
   componentDidUpdate() {
     if (
-      !document.activeElement == document.body
+      document.activeElement == this.inputRef.current
-      || document.activeElement == this.inputRef.current
     ) {
+      // @ts-ignore ref type issues
       this.inputRef.current.focus();
+      // @ts-ignore ref type issues
       this.inputRef.current.setSelectionRange(this.props.cursor, this.props.cursor);
     }
   }
@@ -26,7 +27,7 @@ export class Input extends Component {
   keyPress(e) {
     const key = e.key;
     //  let paste and leap events pass
-    if ((e.getModifierState('Control') || event.getModifierState('Meta'))
+    if ((e.getModifierState('Control') || e.getModifierState('Meta'))
         && (e.key === 'v' || e.key === '/')) {
       return;
     }
@@ -115,6 +116,7 @@ belt = { met: 'bac' };
             onKeyDown={this.keyPress}
             onClick={this.click}
             onPaste={this.paste}
+            // @ts-ignore indigo-react doesn't let us pass refs
             ref={this.inputRef}
             defaultValue="connecting..."
             value={prompt}

pkg/interface/src/views/apps/term/components/line.tsx

@@ -1,6 +1,6 @@
 import { Text } from '@tlon/indigo-react';
 import React from 'react';
-
+// @ts-ignore line isn't in props?
 export default React.memo(({ line }) => {
   //  line body to jsx
   // NOTE  lines are lists of characters that might span multiple codepoints

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

@@ -46,7 +46,7 @@ export function CommentItem(props: CommentItemProps) {
     const children = Array.from(revs.children);
     const indices = [];
     for (const child in children) {
-      const node = children[child];
+      const node = children[child] as any;
       if (!node?.post || typeof node.post !== 'string') {
         indices.push(node.post?.index);
       }

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

@@ -129,6 +129,7 @@ export function DropdownSearch<C>(props: DropdownSearchProps<C>): ReactElement {
 
   return (
     <Box {...rest} position="relative" zIndex={9}>
+      { /* @ts-ignore investigate onblur on styled-system component later */}
       <Input
         ref={textarea}
         onChange={changeCallback}

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

@@ -6,6 +6,7 @@ import {
     ErrorLabel, Icon, Label,
     Row, Text
 } from '@tlon/indigo-react';
+import { OpenPolicy } from '@urbit/api';
 import { Association } from '@urbit/api/metadata';
 import { FieldArray, useFormikContext } from 'formik';
 import _ from 'lodash';
@@ -100,7 +101,7 @@ export function GroupSearch<I extends string, V extends FormValues<I>>(props: Gr
        return Object.values(
          Object.keys(associations.groups)
            .filter(
-             e => groupState?.[e]?.policy?.open
+             e => (groupState?.[e]?.policy as OpenPolicy)?.open
            )
            .reduce((obj, key) => {
              obj[key] = associations.groups[key];

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

@@ -13,7 +13,7 @@ import useStorage from '~/logic/lib/useStorage';
 
 type ImageInputProps = Parameters<typeof Box>[0] & {
   id: string;
-  label: string;
+  label?: string;
   placeholder?: string;
 };
 

pkg/interface/src/views/components/Invite/Group.tsx

@@ -10,7 +10,7 @@ import {
   Metadata, MetadataUpdatePreview,
   resourceFromPath
 } from '@urbit/api';
-import { GraphConfig } from '@urbit/api/dist';
+import { GraphConfig } from '@urbit/api';
 import _ from 'lodash';
 import React, { ReactElement, ReactNode, useCallback } from 'react';
 import { useHistory } from 'react-router-dom';
@@ -217,6 +217,7 @@ function InviteActions(props: {
   const hideJoin = useCallback(async (e) => {
     if(status?.progress === 'done') {
       set(s => {
+        // @ts-ignore investigate zustand types
         delete s.pendingJoin[resource]
       });
       e.stopPropagation();
@@ -245,14 +246,14 @@ function InviteActions(props: {
         color="blue"
         height={4}
         backgroundColor="white"
-        onClick={inviteAccept}
+        onClick={inviteAccept as any}
       >
         Accept
       </StatelessAsyncButton>
       <StatelessAsyncButton
         height={4}
         backgroundColor="white"
-        onClick={inviteDecline}
+        onClick={inviteDecline as any}
       >
         Decline
       </StatelessAsyncButton>

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

@@ -218,7 +218,7 @@ const ProfileOverlay = (props: ProfileOverlayProps) => {
               textOverflow='ellipsis'
               overflow='hidden'
               whiteSpace='pre'
-              marginBottom={0}
+              mb={0}
               disableRemoteContent
               gray
               title={contact?.status ? contact.status : ''}

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

@@ -41,7 +41,7 @@ export const ProfileStatus = (props) => {
         <Input
           onChange={onStatusChange}
           value={_status}
-          autocomplete='off'
+          autoComplete='off'
           width='100%'
           placeholder='Set Status'
           onKeyPress={(evt) => {

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

@@ -8,15 +8,15 @@ const ReconnectButton = ({ connection, subscription }) => {
   if (connectedStatus === 'disconnected') {
     return (
       <Button onClick={reconnect} borderColor='red' px={2}>
-        <Text display={['none', 'inline']} textAlign='middle' color='red'>Reconnect</Text>
+        <Text display={['none', 'inline']} textAlign='center' color='red'>Reconnect</Text>
         <Text color='red'> ↻</Text>
       </Button>
     );
   } else if (connectedStatus === 'reconnecting') {
     return (
       <Button borderColor='yellow' px={2} onClick={() => {}} cursor='default'>
-        <LoadingSpinner pr={['0','2']} foreground='scales.yellow60' background='scales.yellow30' />
+        <LoadingSpinner foreground='scales.yellow60' background='scales.yellow30' />
-        <Text display={['none', 'inline']} textAlign='middle' color='yellow'>Reconnecting</Text>
+        <Text display={['none', 'inline']} pl={['0','2']} textAlign='center' color='yellow'>Reconnecting</Text>
       </Button>
     );
   } else {

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

@@ -24,7 +24,7 @@ const DISABLED_BLOCK_TOKENS = [
 const DISABLED_INLINE_TOKENS = [];
 
 type RichTextProps = ReactMarkdownProps & {
-  api: GlobalApi;
+  api?: GlobalApi;
   disableRemoteContent?: boolean;
   contact?: Contact;
   group?: Group;
@@ -34,6 +34,20 @@ type RichTextProps = ReactMarkdownProps & {
   color?: string;
   children?: any;
   width?: string;
+  display?: string[] | string;
+  mono?: boolean;
+  mb?: number;
+  minWidth?: number | string;
+  maxWidth?: number | string;
+  flexShrink?: number;
+  textOverflow?: string;
+  overflow?: string;
+  whiteSpace?: string;
+  gray?: boolean;
+  title?: string;
+  py?: number;
+  overflowX?: any;
+  verticalAlign?: any;
 }
 
 const RichText = React.memo(({ disableRemoteContent = false, api, ...props }: RichTextProps) => (
@@ -48,6 +62,7 @@ const RichText = React.memo(({ disableRemoteContent = false, api, ...props }: Ri
           oembedShown: false
         } : null;
         if (!disableRemoteContent) {
+          // @ts-ignore RemoteContent weirdness
           return <RemoteContent className="mw-100" url={linkProps.href} />;
         }
 
@@ -59,16 +74,16 @@ const RichText = React.memo(({ disableRemoteContent = false, api, ...props }: Ri
             borderBottom='1px solid'
             remoteContentPolicy={remoteContentPolicy}
             onClick={(e) => {
- e.stopPropagation();
+              e.stopPropagation();
-}}
+            }}
             {...linkProps}
           >{linkProps.children}</Anchor>
         );
       },
-      linkReference: (linkProps) => {
+      linkReference: (linkProps): any => {
         const linkText = String(linkProps.children[0].props.children);
         if (isValidPatp(linkText)) {
-          return <Mention contact={props.contact || {}} group={props.group} ship={deSig(linkText)} api={api} />;
+          return <Mention ship={deSig(linkText)} api={api} />;
         } else if(linkText.startsWith('web+urbitgraph://')) {
           return (
             <PermalinkEmbed

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

@@ -10,7 +10,6 @@ const Spinner = ({
     <LoadingSpinner
       foreground='black'
       background='gray'
-      style={{ flexShrink: 0 }}
     />
     <Text display='inline-block' ml={2} verticalAlign='middle' flexShrink={0}>{text}</Text>
   </Text>

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

@@ -73,7 +73,7 @@ const StatusBar = (props) => {
       px={3}
       pb={3}
     >
-      <Row collapse>
+      <Row>
         <Button
           width='32px'
           borderColor='lightGray'
@@ -108,7 +108,7 @@ const StatusBar = (props) => {
           subscription={props.subscription}
         />
       </Row>
-      <Row justifyContent='flex-end' collapse>
+      <Row justifyContent='flex-end'>
         <StatusBarItem
           width='32px'
           mr={2}

pkg/interface/src/views/components/leap/Omnibox.tsx

@@ -100,8 +100,8 @@ export function Omnibox(props: OmniboxProps): ReactElement {
     }
     Mousetrap.bind('escape', props.toggle);
     const touchstart = new Event('touchstart');
-    inputRef?.current?.input?.dispatchEvent(touchstart);
+    inputRef?.current?.dispatchEvent(touchstart);
-    inputRef?.current?.input?.focus();
+    inputRef?.current?.focus();
     return () => {
       Mousetrap.unbind('escape');
       setQuery('');
@@ -173,6 +173,7 @@ export function Omnibox(props: OmniboxProps): ReactElement {
     const totalLength = flattenedResults.length;
     if (selected.length) {
       const currentIndex = flattenedResults.indexOf(
+          // @ts-ignore unclear how to give this spread a return signature
         ...flattenedResults.filter((e) => {
           return e.link === selected[1];
         })
@@ -194,6 +195,7 @@ export function Omnibox(props: OmniboxProps): ReactElement {
     const flattenedResults = Array.from(results.values()).flat();
     if (selected.length) {
       const currentIndex = flattenedResults.indexOf(
+        // @ts-ignore unclear how to give this spread a return signature
         ...flattenedResults.filter((e) => {
           return e.link === selected[1];
         })
@@ -325,6 +327,7 @@ export function Omnibox(props: OmniboxProps): ReactElement {
                 {categoryResults.sort(sortResults).map((result, i2) => (
                   <OmniboxResult
                     key={i2}
+                    // @ts-ignore withHovering doesn't pass props
                     icon={result.app}
                     text={result.title}
                     subtext={result.host}
@@ -365,8 +368,10 @@ export function Omnibox(props: OmniboxProps): ReactElement {
               omniboxRef.current = el;
             }}
           >
+            { /* @ts-ignore investigate zustand types */ }
             <OmniboxInput
               ref={(el) => {
+                // @ts-ignore investigate refs
                 inputRef.current = el;
               }}
               control={e => control(e)}
@@ -380,5 +385,5 @@ export function Omnibox(props: OmniboxProps): ReactElement {
     </Portal>
   );
 }
-
+// @ts-ignore investigate zustand types
 export default withLocalState(Omnibox, ['toggleOmnibox', 'omniboxShown']);

pkg/interface/src/views/components/leap/OmniboxResult.tsx

@@ -4,6 +4,7 @@ import React, { Component, ReactElement } from 'react';
 import defaultApps from '~/logic/lib/default-apps';
 import Sigil from '~/logic/lib/sigil';
 import { cite, uxToHex } from '~/logic/lib/util';
+import { IconRef } from '~/types/util';
 import withState from '~/logic/lib/withState';
 import useContactState from '~/logic/state/contact';
 import useHarkState from '~/logic/state/hark';
@@ -18,6 +19,7 @@ interface OmniboxResultProps {
   link: string;
   navigate: () => void;
   notificationsCount: number;
+  runtimeLag: any;
   selected: string;
   setSelection: () =>  void;
   subtext: string;
@@ -50,6 +52,7 @@ export class OmniboxResult extends Component<OmniboxResultProps, OmniboxResultSt
       props.selected === props.link
       && this.result.current
     ) {
+      // @ts-ignore ref is forwarded as never, investigate later
       this.result.current.scrollIntoView({ block: 'nearest' });
     }
   }
@@ -63,7 +66,7 @@ export class OmniboxResult extends Component<OmniboxResultProps, OmniboxResultSt
     notificationsCount: number,
     text: string,
     color: string
-  ): (typeof Icon) {
+  ): (any) {
     const iconFill =
       (this.state.hovered || selected === link) ? 'white' : 'black';
     const bulletFill =
@@ -89,7 +92,7 @@ export class OmniboxResult extends Component<OmniboxResultProps, OmniboxResultSt
         <Icon
           display='inline-block'
           verticalAlign='middle'
-          icon={icon}
+          icon={icon as IconRef}
           mr={2}
           size='18px'
           color={iconFill}
@@ -254,6 +257,7 @@ export class OmniboxResult extends Component<OmniboxResultProps, OmniboxResultSt
         onClick={navigate}
         width='100%'
         justifyContent='space-between'
+        // @ts-ignore indigo-react doesn't allow us to pass refs
         ref={this.result}
       >
         <Box

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

@@ -1,18 +0,0 @@
-import deep_diff from 'deep-diff';
-import React, { Component, useEffect, useRef } from 'react';
-
-const withPropsChecker = (WrappedComponent: Component) => {
-  return (props: any) => {
-    const prevProps = useRef(props);
-    useEffect(() => {
-      const diff = deep_diff.diff(prevProps.current, props);
-      if (diff) {
-        console.log(diff);
-      }
-      prevProps.current = props;
-    });
-    return <WrappedComponent {...props} />;
-  };
-};
-
-export default withPropsChecker;

pkg/interface/src/views/landscape/components/Graph/GraphContent.tsx

@@ -9,7 +9,7 @@ import { Content, ReferenceContent } from '@urbit/api';
 import _ from 'lodash';
 import {
   BlockContent, Content as AstContent, Parent, Root
-} from 'mdast';
+} from 'ts-mdast';
 import React from 'react';
 import GlobalApi from '~/logic/api/global';
 import { referenceToPermalink } from '~/logic/lib/permalinks';
@@ -350,12 +350,18 @@ const renderers = {
   'graph-mention': ({ ship }) => <Mention api={{} as any} ship={ship} />,
   image: ({ url }) => (
     <Box mt="1" mb="2" flexShrink={0}>
-      <RemoteContent key={url} url={url} />
+      <RemoteContent
+      // @ts-ignore RemoteContent weirdness
+      key={url} url={url}
+      />
     </Box>
   ),
   'graph-url': ({ url }) => (
     <Box mt={1} mb={2} flexShrink={0}>
-      <RemoteContent key={url} url={url} />
+      <RemoteContent
+      // @ts-ignore RemoteContent weirdness
+        key={url} url={url}
+      />
     </Box>
   ),
   'graph-reference': ({ api, reference, transcluded }) => {

pkg/interface/src/views/landscape/components/Home/Post/PostFeed.tsx

@@ -1,5 +1,6 @@
 import { Box, Col } from '@tlon/indigo-react';
 import { Association, Graph, GraphNode, Group } from '@urbit/api';
+import { History } from 'history';
 import bigInt from 'big-integer';
 import React from 'react';
 import { withRouter } from 'react-router';
@@ -26,7 +27,7 @@ interface PostFeedProps {
   pendingSize: number;
 }
 
-class PostFeed extends React.Component<PostFeedProps, PostFeedState> {
+class PostFeed extends React.Component<PostFeedProps, any> {
   isFetching: boolean;
   constructor(props) {
     super(props);
@@ -36,7 +37,7 @@ class PostFeed extends React.Component<PostFeedProps, PostFeedState> {
     this.fetchPosts = this.fetchPosts.bind(this);
     this.doNotFetch = this.doNotFetch.bind(this);
   }
-
+  // @ts-ignore needs @liam-fitzgerald peek at props for virtualscroller
   renderItem = React.forwardRef(({ index, scrollWindow }, ref) => {
     const {
       graph,
@@ -57,7 +58,7 @@ class PostFeed extends React.Component<PostFeedProps, PostFeedState> {
 
     const first = graph.peekLargest()?.[0];
     const post = node?.post;
-    const nodeIndex = 
+    const nodeIndex =
       ( parentNode &&
         typeof parentNode.post !== 'string'
       ) ? parentNode.post.index.split('/').slice(1).map((ind) => {
@@ -69,6 +70,7 @@ class PostFeed extends React.Component<PostFeedProps, PostFeedState> {
         <React.Fragment key={index.toString()}>
           <Col
             key={index.toString()}
+            // @ts-ignore indigo-react doesn't allow us to pass refs
             ref={ref}
             mb={3}
             width="100%"
@@ -76,6 +78,7 @@ class PostFeed extends React.Component<PostFeedProps, PostFeedState> {
           >
             <PostItem
               key={parentNode.post.index}
+              // @ts-ignore withHovering prop pass is broken?
               parentPost={grandparentNode?.post}
               node={parentNode}
               parentNode={grandparentNode}
@@ -92,6 +95,7 @@ class PostFeed extends React.Component<PostFeedProps, PostFeedState> {
             />
           </Col>
           <PostItem
+            // @ts-ignore withHovering prop pass is broken?
             node={node}
             graphPath={graphPath}
             association={association}
@@ -110,8 +114,10 @@ class PostFeed extends React.Component<PostFeedProps, PostFeedState> {
     }
 
     return (
+        // @ts-ignore indigo-react doesn't allow us to pass refs
       <Box key={index.toString()} ref={ref}>
       <PostItem
+        // @ts-ignore withHovering prop pass is broken?
         node={node}
         graphPath={graphPath}
         association={association}
@@ -179,6 +185,7 @@ class PostFeed extends React.Component<PostFeedProps, PostFeedState> {
           data={graph}
           averageHeight={106}
           size={graph.size}
+          totalSize={graph.size}
           style={virtualScrollerStyle}
           pendingSize={pendingSize}
           renderer={this.renderItem}

pkg/interface/src/views/landscape/components/Home/Post/PostInput.tsx

@@ -120,7 +120,7 @@ const PostInput = (props: PostInputProps): ReactElement | null => {
         fontSize={1}
         minHeight="62px"
         fontFamily={code ? 'mono' : 'sans'}
-        lineNumber={3}
+        rows={3}
         style={{
           resize: 'vertical'
         }}

pkg/interface/src/views/landscape/components/Home/Post/PostItem/PostHeader.tsx

@@ -15,6 +15,7 @@ interface PostHeaderProps {
   association: Association;
   isReply: boolean;
   showTimestamp: boolean;
+  graphPath: any;
 }
 
 const PostHeader = (props: PostHeaderProps): ReactElement => {

pkg/interface/src/views/landscape/components/Home/Post/PostReplies.tsx

@@ -1,4 +1,5 @@
 import { Box, Col, Text } from '@tlon/indigo-react';
+import { GraphNode } from '@urbit/api';
 import bigInt from 'big-integer';
 import React from 'react';
 import { resourceFromPath } from '~/logic/lib/group';
@@ -37,7 +38,7 @@ export default function PostReplies(props) {
     return bigInt(ind);
   });
 
-  let node;
+  let node: GraphNode;
   let parentNode;
   nodeIndex.forEach((i, idx) => {
     if (!graph) {
@@ -69,6 +70,7 @@ export default function PostReplies(props) {
         <Box mt={3} width="100%" alignItems="center">
           <PostItem
             key={node.post.index}
+            // @ts-ignore withHovering prop pass is broken?
             node={node}
             graphPath={graphPath}
             association={association}

pkg/interface/src/views/landscape/components/Home/Post/PostTimeline.tsx

@@ -1,5 +1,6 @@
 import { Box, Col, Text } from '@tlon/indigo-react';
 import { Association, Graph, Group } from '@urbit/api';
+import { History } from 'history';
 import React, { ReactElement } from 'react';
 import GlobalApi from '~/logic/api/global';
 import { Loading } from '~/views/components/Loading';
@@ -15,6 +16,7 @@ interface PostTimelineProps {
   group: Group;
   pendingSize: number;
   vip: string;
+  history?: History;
 }
 
 const PostTimeline = (props: PostTimelineProps): ReactElement => {

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

@@ -31,7 +31,7 @@ interface NewGroupProps {
   api: GlobalApi;
 }
 
-export function NewGroup(props: NewGroupProps & RouteComponentProps): ReactElement {
+export function NewGroup(props: NewGroupProps): ReactElement {
   const { api } = props;
   const history = useHistory();
   const initialValues: FormSchema = {

pkg/interface/src/views/landscape/components/Sidebar/SidebarList.tsx

@@ -81,12 +81,15 @@ export function SidebarList(props: {
 
   const cycleChannels = useCallback((backward: boolean) => {
     const idx = ordered.findIndex(s => s === selected);
-    const offset = backward ? -1 : 1 
+    const offset = backward ? -1 : 1
 
     const newIdx = modulo(idx+offset, ordered.length - 1);
     const { metadata, resource } = associations[ordered[newIdx]];
     const joined = graphKeys.has(resource.slice(7));
-    const path = getResourcePath(workspace, resource, joined, metadata.config.graph)
+    let path = '/~landscape/home';
+    if ('graph' in metadata.config) {
+      path = getResourcePath(workspace, resource, joined, metadata.config.graph);
+    }
     history.push(path)
   }, [selected, history.push]);