Show nickname / role colour in typing indicator.

Try to fix voice context.

src/components/common/messaging/bars/TypingIndicator.tsx

@@ -4,12 +4,16 @@ import styled from "styled-components";
 import { Text } from "preact-i18n";
 import { useContext } from "preact/hooks";
 
+import { TextReact } from "../../../../lib/i18n";
+
 import { connectState } from "../../../../redux/connector";
 import { TypingUser } from "../../../../redux/reducers/typing";
 
 import { AppContext } from "../../../../context/revoltjs/RevoltClient";
 import { useUsers } from "../../../../context/revoltjs/hooks";
 
+import { Username } from "../../user/UserShort";
+
 interface Props {
     typing?: TypingUser[];
 }
@@ -74,19 +78,21 @@ export function TypingIndicator({ typing }: Props) {
         } else if (users.length > 1) {
             const usersCopy = [...users];
             text = (
-                <Text
+                <TextReact
                     id="app.main.channel.typing.multiple"
                     fields={{
-                        user: usersCopy.pop()?.username,
-                        userlist: usersCopy.map((x) => x.username).join(", "),
+                        user: <Username user={usersCopy.pop()} />,
+                        userlist: usersCopy
+                            .map((x) => <Username user={x} />)
+                            .join(", "),
                     }}
                 />
             );
         } else {
             text = (
-                <Text
+                <TextReact
                     id="app.main.channel.typing.single"
-                    fields={{ user: users[0].username }}
+                    fields={{ user: <Username user={users[0]} /> }}
                 />
             );
         }

src/components/common/user/UserShort.tsx

@@ -18,7 +18,7 @@ export function Username({
     let username = user?.username;
     let color;
 
-    // ! this must be really bad for perf.
+    // ! FIXME: this must be really bad for perf.
     if (user) {
         let { server } = useParams<{ server?: string }>();
         if (server) {

src/context/Voice.tsx

@@ -7,7 +7,6 @@ import type VoiceClient from "../lib/vortex/VoiceClient";
 import { Children } from "../types/Preact";
 import { SoundContext } from "./Settings";
 import { AppContext } from "./revoltjs/RevoltClient";
-import { useForceUpdate } from "./revoltjs/hooks";
 
 export enum VoiceStatus {
     LOADING = 0,
@@ -160,7 +159,6 @@ export default function Voice({ children }: Props) {
         };
     }, [client]);
 
-    const { forceUpdate } = useForceUpdate();
     const playSound = useContext(SoundContext);
 
     useEffect(() => {
@@ -170,30 +168,36 @@ export default function Voice({ children }: Props) {
         // ! get rid of these force updates
         // ! handle it through state or smth
 
-        client.on("startProduce", forceUpdate);
-        client.on("stopProduce", forceUpdate);
+        function stateUpdate() {
+            setStatus(state.status);
+        }
+
+        client.on("startProduce", stateUpdate);
+        client.on("stopProduce", stateUpdate);
 
         client.on("userJoined", () => {
             playSound("call_join");
-            forceUpdate();
+            stateUpdate();
         });
         client.on("userLeft", () => {
             playSound("call_leave");
-            forceUpdate();
+            stateUpdate();
         });
-        client.on("userStartProduce", forceUpdate);
-        client.on("userStopProduce", forceUpdate);
-        client.on("close", forceUpdate);
+
+        client.on("userStartProduce", stateUpdate);
+        client.on("userStopProduce", stateUpdate);
+
+        client.on("close", stateUpdate);
 
         return () => {
-            client.removeListener("startProduce", forceUpdate);
-            client.removeListener("stopProduce", forceUpdate);
+            client.removeListener("startProduce", stateUpdate);
+            client.removeListener("stopProduce", stateUpdate);
 
-            client.removeListener("userJoined", forceUpdate);
-            client.removeListener("userLeft", forceUpdate);
-            client.removeListener("userStartProduce", forceUpdate);
-            client.removeListener("userStopProduce", forceUpdate);
-            client.removeListener("close", forceUpdate);
+            client.removeListener("userJoined", stateUpdate);
+            client.removeListener("userLeft", stateUpdate);
+            client.removeListener("userStartProduce", stateUpdate);
+            client.removeListener("userStopProduce", stateUpdate);
+            client.removeListener("close", stateUpdate);
         };
     }, [client, state]);