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/navigation/right/ChannelDebugInfo.tsx

+/* eslint-disable react-hooks/rules-of-hooks */
 import { useRenderState } from "../../../lib/renderer/Singleton";
 
 interface Props {
@@ -6,7 +7,7 @@ interface Props {
 
 export function ChannelDebugInfo({ id }: Props) {
     if (process.env.NODE_ENV !== "development") return null;
-    let view = useRenderState(id);
+    const view = useRenderState(id);
     if (!view) return null;
 
     return (

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}>

src/components/ui/Checkbox.tsx

@@ -4,12 +4,12 @@ import styled, { css } from "styled-components";
 import { Children } from "../../types/Preact";
 
 const CheckboxBase = styled.label`
-    margin-top: 20px;
     gap: 4px;
     z-index: 1;
     display: flex;
-    border-radius: 4px;
+    margin-top: 20px;
     align-items: center;
+    border-radius: var(--border-radius);
 
     cursor: pointer;
     font-size: 18px;
@@ -57,9 +57,9 @@ const Checkmark = styled.div<{ checked: boolean }>`
     height: 24px;
     display: grid;
     flex-shrink: 0;
-    border-radius: 4px;
     place-items: center;
     transition: 0.2s ease all;
+    border-radius: var(--border-radius);
     background: var(--secondary-background);
 
     svg {