interface: fix ref typings

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

@@ -48,7 +48,7 @@ class LinkWindow extends Component<LinkWindowProps, {}> {
     return isWriter(group, association.resource);
   }
 
-  renderItem = React.forwardRef(({ index, scrollWindow }, ref) => {
+  renderItem = React.forwardRef<HTMLDivElement>(({ index, scrollWindow }, ref) => {
     const { props } = this;
     const { association, graph, api } = props;
     const [, , ship, name] = association.resource.split("/");

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

@@ -30,7 +30,7 @@ export function ProfileImages(props: any): ReactElement {
   const { contact, hideCover, ship } = { ...props };
   const hexColor = contact?.color ? `#${uxToHex(contact.color)}` : '#000000';
 
-  const anchorRef = useRef<HTMLElement | null>(null)
+  const anchorRef = useRef<HTMLDivElement>(null)
 
   useTutorialModal('profile', ship === `~${window.ship}`, anchorRef);
 

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

@@ -41,8 +41,8 @@ const DropdownOptions = styled(Box)`
 
 export function Dropdown(props: DropdownProps): ReactElement {
   const { children, options, offsetX = 0, offsetY = 0, flexShrink = 1 } = props;
-  const dropdownRef = useRef<HTMLElement>(null);
-  const anchorRef = useRef<HTMLElement>(null);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+  const anchorRef = useRef<HTMLDivElement>(null);
   const { pathname } = useLocation();
   const [open, setOpen] = useState(false);
   const [coords, setCoords] = useState({});

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

@@ -45,7 +45,7 @@ type DropdownSearchProps<C> = PropFunc<typeof Box> &
   DropdownSearchExtraProps<C>;
 
 export function DropdownSearch<C>(props: DropdownSearchProps<C>): ReactElement {
-  const textarea = useRef<HTMLTextAreaElement>();
+  const textarea = useRef<HTMLTextAreaElement>(null);
   const {
     candidates,
     getKey,

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { RefObject } from 'react';
 import { Link } from 'react-router-dom';
 import styled from 'styled-components';
 import { Box } from '@tlon/indigo-react';
@@ -21,11 +21,11 @@ interface HoverBoxLinkProps {
   to: string;
 }
 
-export const HoverBoxLink = React.forwardRef(({
+export const HoverBoxLink = React.forwardRef<HTMLAnchorElement, HoverBoxLinkProps & PropFunc<typeof HoverBox>>(({
   to,
   children,
   ...rest
-}: HoverBoxLinkProps & PropFunc<typeof HoverBox>, ref) => (
+}, ref) => (
   <Link ref={ref} to={to}>
     <HoverBox {...rest}>{children}</HoverBox>
   </Link>

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

@@ -24,7 +24,7 @@ const prompt = (field, uploading, meta, clickUploadButton) => {
   if (!field.value && !uploading && meta.error === undefined) {
     return (
       <Text
-        black
+        color='black'
         fontWeight='500'
         position='absolute'
         left={2}

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

@@ -55,8 +55,8 @@ const ProfileOverlay = (props: ProfileOverlayProps) => {
   const [coords, setCoords] = useState({});
   const [visible, setVisible] = useState(false);
   const history = useHistory();
-  const outerRef = useRef<HTMLElement | null>(null);
-  const innerRef = useRef<HTMLElement | null>(null);
+  const outerRef = useRef<HTMLDivElement>(null);
+  const innerRef = useRef<HTMLDivElement>(null);
   const hideAvatars = useSettingsState(state => state.calm.hideAvatars);
   const hideNicknames = useSettingsState(state => state.calm.hideNicknames);
   const isOwn = useMemo(() => window.ship === ship, [ship]);

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

@@ -1,7 +1,10 @@
 import React from 'react';
-import useStorage, {IuseStorage} from '~/logic/lib/useStorage';
+import useStorage, { IuseStorage } from '~/logic/lib/useStorage';
 
-const withStorage = <P, C extends React.ComponentType<P>>(Component: C, params = {}) => {
+const withStorage = <P, C extends React.ComponentType<P & IuseStorage>>(
+  Component: C,
+  params = {}
+) => {
   return React.forwardRef<C, Omit<C, keyof IuseStorage>>((props, ref) => {
     const storage = useStorage(params);
 

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

@@ -54,7 +54,7 @@ export function Sidebar(props: SidebarProps): ReactElement | null {
   const role = groups?.[groupPath] ? roleForShip(groups[groupPath], window.ship) : undefined;
   const isAdmin = (role === 'admin') || (workspace?.type === 'home');
 
-  const anchorRef = useRef<HTMLElement | null>(null);
+  const anchorRef = useRef<HTMLDivElement>(null);
   useTutorialModal('channels', true, anchorRef);
 
   return (

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

@@ -32,7 +32,7 @@ export function SidebarItem(props: {
   const rid = association?.resource;
   const groupPath = association?.group;
   const groups = useGroupState(state => state.groups);
-  const anchorRef = useRef<HTMLElement | null>(null);
+  const anchorRef = useRef<HTMLAnchorElement>(null);
   const { hideAvatars, hideNicknames } = useSettingsState(selectCalmState);
   const contacts = useContactState(state => state.contacts);
   useTutorialModal(