Update all packages.

Update vite fork to latest. (fixes voice)

src/components/ui/ColourSwatches.tsx

@@ -3,6 +3,7 @@ import { Palette } from "@styled-icons/boxicons-solid";
 import styled, { css } from "styled-components";
 
 import { useRef } from "preact/hooks";
+import { RefObject } from "preact";
 
 interface Props {
     value: string;
@@ -91,14 +92,14 @@ const Rows = styled.div`
 `;
 
 export default function ColourSwatches({ value, onChange }: Props) {
-    const ref = useRef<HTMLInputElement>();
+    const ref = useRef<HTMLInputElement>() as RefObject<HTMLInputElement>;
 
     return (
         <SwatchesBase>
             <Swatch
                 colour={value}
                 type="large"
-                onClick={() => ref.current.click()}>
+                onClick={() => ref.current?.click()}>
                 <Palette size={32} />
             </Swatch>
             <input

src/lib/TextAreaAutoSize.tsx

@@ -2,15 +2,11 @@ import styled from "styled-components";
 
 import { useEffect, useLayoutEffect, useRef } from "preact/hooks";
 
-import TextArea, {
-    DEFAULT_LINE_HEIGHT,
-    DEFAULT_TEXT_AREA_PADDING,
-    TextAreaProps,
-    TEXT_AREA_BORDER_WIDTH,
-} from "../components/ui/TextArea";
+import TextArea, { TextAreaProps } from "../components/ui/TextArea";
 
 import { internalSubscribe } from "./eventEmitter";
 import { isTouchscreenDevice } from "./isTouchscreenDevice";
+import { RefObject } from "preact";
 
 type TextAreaAutoSizeProps = Omit<
     JSX.HTMLAttributes<HTMLTextAreaElement>,
@@ -71,22 +67,25 @@ export default function TextAreaAutoSize(props: TextAreaAutoSizeProps) {
         ...textAreaProps
     } = props;
 
-    const ref = useRef<HTMLTextAreaElement>();
-    const ghost = useRef<HTMLDivElement>();
+    const ref = useRef<HTMLTextAreaElement>() as RefObject<HTMLTextAreaElement>;
+    const ghost = useRef<HTMLDivElement>() as RefObject<HTMLDivElement>;
 
     useLayoutEffect(() => {
-        ref.current.style.height = ghost.current.clientHeight + 'px';
+        if (ref.current && ghost.current) {
+            ref.current.style.height = ghost.current.clientHeight + 'px';
+        }
     }, [ghost, props.value]);
 
     useEffect(() => {
         if (isTouchscreenDevice) return;
-        autoFocus && ref.current.focus();
+        autoFocus && ref.current && ref.current.focus();
     }, [value]);
 
     const inputSelected = () =>
         ["TEXTAREA", "INPUT"].includes(document.activeElement?.nodeName ?? "");
 
     useEffect(() => {
+        if (!ref.current) return;
         if (forceFocus) {
             ref.current.focus();
         }
@@ -107,7 +106,7 @@ export default function TextAreaAutoSize(props: TextAreaAutoSizeProps) {
             if ((e.ctrlKey && e.key !== "v") || e.altKey || e.metaKey) return;
             if (e.key.length !== 1) return;
             if (ref && !inputSelected()) {
-                ref.current.focus();
+                ref.current!.focus();
             }
         }
 
@@ -116,9 +115,10 @@ export default function TextAreaAutoSize(props: TextAreaAutoSizeProps) {
     }, [ref]);
 
     useEffect(() => {
+        if (!ref.current) return;
         function focus(id: string) {
             if (id === props.id) {
-                ref.current.focus();
+                ref.current!.focus();
             }
         }
 

src/pages/channels/messaging/MessageArea.tsx

@@ -95,9 +95,10 @@ export function MessageArea({ id }: Props) {
                 animateScroll.scrollTo(
                     Math.max(
                         101,
-                        ref.current.scrollTop +
+                        ref.current ? (ref.current.scrollTop +
                             (ref.current.scrollHeight -
-                                scrollState.current.previousHeight),
+                                scrollState.current.previousHeight))
+                            : 101
                     ),
                     {
                         container: ref.current,
@@ -122,12 +123,12 @@ export function MessageArea({ id }: Props) {
     // By default, we assume we are at the bottom, i.e. when we first load.
     const atBottom = (offset = 0) =>
         ref.current
-            ? Math.floor(ref.current.scrollHeight - ref.current.scrollTop) -
+            ? Math.floor(ref.current?.scrollHeight - ref.current?.scrollTop) -
                   offset <=
-              ref.current.clientHeight
+              ref.current?.clientHeight
             : true;
 
-    const atTop = (offset = 0) => ref.current.scrollTop <= offset;
+    const atTop = (offset = 0) => ref.current ? ref.current.scrollTop <= offset : false;
 
     // ? Handle events from renderer.
     useEffect(() => {
@@ -181,24 +182,24 @@ export function MessageArea({ id }: Props) {
             }
         }
 
-        ref.current.addEventListener("scroll", onScroll);
-        return () => ref.current.removeEventListener("scroll", onScroll);
+        ref.current?.addEventListener("scroll", onScroll);
+        return () => ref.current?.removeEventListener("scroll", onScroll);
     }, [ref, scrollState]);
 
     // ? Top and bottom loaders.
     useEffect(() => {
         async function onScroll() {
             if (atTop(100)) {
-                SingletonMessageRenderer.loadTop(ref.current);
+                SingletonMessageRenderer.loadTop(ref.current!);
             }
 
             if (atBottom(100)) {
-                SingletonMessageRenderer.loadBottom(ref.current);
+                SingletonMessageRenderer.loadBottom(ref.current!);
             }
         }
 
-        ref.current.addEventListener("scroll", onScroll);
-        return () => ref.current.removeEventListener("scroll", onScroll);
+        ref.current?.addEventListener("scroll", onScroll);
+        return () => ref.current?.removeEventListener("scroll", onScroll);
     }, [ref]);
 
     // ? Scroll down whenever the message area resizes.