src/components/navigation/left/common.ts

-import { Channel } from "revolt.js";
+import { reaction } from "mobx";
+import { Channel } from "revolt.js/dist/maps/Channels";
 
 import { useLayoutEffect } from "preact/hooks";
 
 import { dispatch } from "../../../redux";
 import { Unreads } from "../../../redux/reducers/unreads";
 
-import { HookContext, useForceUpdate } from "../../../context/revoltjs/hooks";
-
 type UnreadProps = {
     channel: Channel;
     unreads: Unreads;
 };
 
-export function useUnreads(
-    { channel, unreads }: UnreadProps,
-    context?: HookContext,
-) {
-    const ctx = useForceUpdate(context);
-
+export function useUnreads({ channel, unreads }: UnreadProps) {
     useLayoutEffect(() => {
-        function checkUnread(target?: Channel) {
+        function checkUnread(target: Channel) {
             if (!target) return;
             if (target._id !== channel._id) return;
             if (
@@ -41,19 +35,16 @@ export function useUnreads(
                         message,
                     });
 
-                    ctx.client.req(
-                        "PUT",
-                        `/channels/${channel._id}/ack/${message}` as "/channels/id/ack/id",
-                    );
+                    channel.ack(message);
                 }
             }
         }
 
         checkUnread(channel);
-
-        ctx.client.channels.addListener("mutation", checkUnread);
-        return () =>
-            ctx.client.channels.removeListener("mutation", checkUnread);
+        return reaction(
+            () => channel.last_message,
+            () => checkUnread(channel),
+        );
     }, [channel, unreads]);
 }
 
@@ -63,12 +54,12 @@ export function mapChannelWithUnread(channel: Channel, unreads: Unreads) {
         channel.channel_type === "DirectMessage" ||
         channel.channel_type === "Group"
     ) {
-        last_message_id = channel.last_message?._id;
+        last_message_id = (channel.last_message as { _id: string })?._id;
     } else if (channel.channel_type === "TextChannel") {
-        last_message_id = channel.last_message;
+        last_message_id = channel.last_message as string;
     } else {
         return {
-            ...channel,
+            channel,
             unread: undefined,
             alertCount: undefined,
             timestamp: channel._id,
@@ -85,7 +76,7 @@ export function mapChannelWithUnread(channel: Channel, unreads: Unreads) {
                 unread = "mention";
             } else if (
                 u.last_id &&
-                last_message_id.localeCompare(u.last_id) > 0
+                (last_message_id as string).localeCompare(u.last_id) > 0
             ) {
                 unread = "unread";
             }
@@ -95,7 +86,7 @@ export function mapChannelWithUnread(channel: Channel, unreads: Unreads) {
     }
 
     return {
-        ...channel,
+        channel,
         timestamp: last_message_id ?? channel._id,
         unread,
         alertCount,

src/components/ui/Category.tsx

@@ -44,7 +44,7 @@ type Props = Omit<
 };
 
 export default function Category(props: Props) {
-    let { text, action, ...otherProps } = props;
+    const { text, action, ...otherProps } = props;
 
     return (
         <CategoryBase {...otherProps}>