fix issues with observables not updating

src/components/modals/DeleteMessageModal.tsx

@@ -12,7 +12,7 @@ const PreviewContainer = styled.div`
 	padding: 5px 6px;
 `;
 
-export  function DeleteMessageModal({ target, ...props }: ModalProps<"delete_message">) {
+export function DeleteMessageModal({ target, ...props }: ModalProps<"delete_message">) {
 	return (
 		<Modal
 			{...props}

src/stores/AccountStore.ts

@@ -7,7 +7,7 @@ import {
 	UserPremiumType,
 } from "@spacebarchat/spacebar-api-types/v9";
 import { REST } from "@utils";
-import { observable } from "mobx";
+import { makeAutoObservable, observable } from "mobx";
 
 export default class AccountStore {
 	id: string;
@@ -61,6 +61,8 @@ export default class AccountStore {
 		}
 		// this.phone = user.phone;
 		// this.nsfwAllowed = user.nsfw_allowed;
+
+		makeAutoObservable(this);
 	}
 
 	/**

src/stores/AppStore.ts

@@ -59,8 +59,6 @@ export default class AppStore {
 	@observable memberListVisible: boolean = true;
 
 	constructor() {
-		makeAutoObservable(this);
-
 		if (isTauri) {
 			this.updaterStore = new UpdaterStore(this);
 		}
@@ -70,6 +68,8 @@ export default class AppStore {
 		// bind this in windowToggleFps
 		this.windowToggleFps = this.windowToggleFps.bind(this);
 		window.windowToggleFps = this.windowToggleFps;
+
+		makeAutoObservable(this);
 	}
 
 	@action

src/stores/ChannelStore.ts

@@ -5,10 +5,11 @@ import AppStore from "./AppStore";
 
 export default class ChannelStore {
 	private readonly app: AppStore;
-	@observable readonly channels = new ObservableMap<string, Channel>();
+	@observable readonly channels: ObservableMap<string, Channel>;
 
 	constructor(app: AppStore) {
 		this.app = app;
+		this.channels = observable.map();
 	}
 
 	@action

src/stores/ExperimentsStore.ts

@@ -1,4 +1,4 @@
-import { action, computed, makeAutoObservable, ObservableMap } from "mobx";
+import { action, computed, makeAutoObservable, observable, ObservableMap } from "mobx";
 
 export type ExperimentType = "test" | "message_queue" | "presence_rings";
 
@@ -87,7 +87,7 @@ export default class ExperimentsStore {
 	private experiments: ObservableMap<string, number>;
 
 	constructor() {
-		this.experiments = new ObservableMap();
+		this.experiments = observable.map();
 		makeAutoObservable(this);
 	}
 

src/stores/GatewayConnectionStore.ts

@@ -37,7 +37,7 @@ import {
 	Snowflake,
 } from "@spacebarchat/spacebar-api-types/v9";
 import { debounce, Logger } from "@utils";
-import { action, makeObservable, observable, runInAction } from "mobx";
+import { action, makeAutoObservable, observable, runInAction } from "mobx";
 import AppStore from "./AppStore";
 
 const GATEWAY_VERSION = "9";
@@ -80,7 +80,7 @@ export default class GatewayConnectionStore {
 	constructor(app: AppStore) {
 		this.app = app;
 
-		makeObservable(this);
+		makeAutoObservable(this);
 	}
 
 	/**

src/stores/GuildMemberListStore.ts

@@ -5,7 +5,7 @@ import {
 } from "@spacebarchat/spacebar-api-types/v9";
 import { Guild, GuildMember } from "@structures";
 import { Logger } from "@utils";
-import { action, observable } from "mobx";
+import { action, makeAutoObservable, observable } from "mobx";
 import AppStore from "./AppStore";
 
 export default class GuildMemberListStore {
@@ -30,6 +30,8 @@ export default class GuildMemberListStore {
 		this.member_count = member_count;
 		this.online_count = online_count;
 		this.computeListData(data.ops);
+
+		makeAutoObservable(this);
 	}
 
 	@action

src/stores/GuildMemberStore.ts

@@ -2,20 +2,21 @@ import type { Snowflake } from "@spacebarchat/spacebar-api-types/globals";
 import { type APIGuildMember } from "@spacebarchat/spacebar-api-types/v9";
 import { Guild, GuildMember } from "@structures";
 import { APIUserProfile } from "@utils/interfaces/api";
-import { ObservableMap, action, computed, makeObservable, observable } from "mobx";
+import { ObservableMap, action, computed, makeAutoObservable, observable } from "mobx";
 import AppStore from "./AppStore";
 
 export default class GuildMemberStore {
 	private readonly app: AppStore;
 	private readonly guild: Guild;
 
-	@observable private readonly members = new ObservableMap<Snowflake, GuildMember>();
+	@observable private readonly members: ObservableMap<Snowflake, GuildMember>;
 
 	constructor(app: AppStore, guild: Guild) {
 		this.app = app;
 		this.guild = guild;
+		this.members = observable.map();
 
-		makeObservable(this);
+		makeAutoObservable(this);
 	}
 
 	@action

src/stores/GuildStore.ts

@@ -1,17 +1,20 @@
 import type { GatewayGuild } from "@spacebarchat/spacebar-api-types/v9";
 import { Guild } from "@structures";
 import { Logger } from "@utils";
-import { action, computed, observable, ObservableMap } from "mobx";
+import { action, computed, makeAutoObservable, observable, ObservableMap } from "mobx";
 import AppStore from "./AppStore";
 
 export default class GuildStore {
 	private readonly logger: Logger = new Logger("GuildStore");
 	private readonly app: AppStore;
 	@observable initialGuildsLoaded = false;
-	@observable readonly guilds = new ObservableMap<string, Guild>();
+	@observable readonly guilds: ObservableMap<string, Guild>;
 
 	constructor(app: AppStore) {
 		this.app = app;
+		this.guilds = observable.map();
+
+		makeAutoObservable(this);
 	}
 
 	@action

src/stores/MessageStore.ts

@@ -2,7 +2,7 @@ import useLogger from "@hooks/useLogger";
 import { MessageType, type APIMessage } from "@spacebarchat/spacebar-api-types/v9";
 import { Message, MessageLike, User } from "@structures";
 import { Logger } from "@utils";
-import { action, computed, makeObservable, observable, type IObservableArray } from "mobx";
+import { action, computed, makeAutoObservable, observable, type IObservableArray } from "mobx";
 import AppStore from "./AppStore";
 
 export interface MessageGroup {
@@ -25,7 +25,7 @@ export default class MessageStore {
 
 		this.messages = observable.array([]);
 
-		makeObservable(this);
+		makeAutoObservable(this);
 	}
 
 	@action

src/stores/PresenceStore.ts

@@ -1,16 +1,17 @@
 import type { GatewayPresenceUpdateDispatchData, Snowflake } from "@spacebarchat/spacebar-api-types/v9";
 import { Presence } from "@structures";
-import { action, computed, makeObservable, observable } from "mobx";
+import { action, computed, makeAutoObservable, observable, ObservableMap } from "mobx";
 import AppStore from "./AppStore";
 
 export default class PresenceStore {
 	private readonly app: AppStore;
-	@observable presences = observable.map<Snowflake, Presence>();
+	@observable presences: ObservableMap<Snowflake, Presence>;
 
 	constructor(app: AppStore) {
 		this.app = app;
+		this.presences = observable.map<Snowflake, Presence>();
 
-		makeObservable(this);
+		makeAutoObservable(this);
 	}
 
 	@action

src/stores/PrivateChannelStore.ts

@@ -1,14 +1,17 @@
 import type { APIChannel } from "@spacebarchat/spacebar-api-types/v9";
 import { Channel } from "@structures";
-import { action, computed, observable, ObservableMap } from "mobx";
+import { action, computed, makeAutoObservable, observable, ObservableMap } from "mobx";
 import AppStore from "./AppStore";
 
 export default class PrivateChannelStore {
 	private readonly app: AppStore;
-	@observable readonly channels = new ObservableMap<string, Channel>();
+	@observable readonly channels: ObservableMap<string, Channel>;
 
 	constructor(app: AppStore) {
 		this.app = app;
+		this.channels = observable.map();
+
+		makeAutoObservable(this);
 	}
 
 	@action

src/stores/ReadStateStore.ts

@@ -1,14 +1,17 @@
 import type { APIReadState } from "@spacebarchat/spacebar-api-types/v9";
 import { ReadState } from "@structures";
-import { ObservableMap, action, computed, observable } from "mobx";
+import { ObservableMap, action, computed, makeAutoObservable, observable } from "mobx";
 import AppStore from "./AppStore";
 
 export default class ReadStateStore {
 	private readonly app: AppStore;
-	@observable readonly readstates = new ObservableMap<string, ReadState>();
+	@observable readonly readstates: ObservableMap<string, ReadState>;
 
 	constructor(app: AppStore) {
 		this.app = app;
+		this.readstates = observable.map();
+
+		makeAutoObservable(this);
 	}
 
 	@action

src/stores/RoleStore.ts

@@ -1,17 +1,18 @@
 import type { Snowflake } from "@spacebarchat/spacebar-api-types/globals";
 import type { APIRole } from "@spacebarchat/spacebar-api-types/v9";
 import { Role } from "@structures";
-import { action, computed, makeObservable, observable, ObservableMap } from "mobx";
+import { action, computed, makeAutoObservable, observable, ObservableMap } from "mobx";
 import AppStore from "./AppStore";
 
 export default class RoleStore {
 	private readonly app: AppStore;
-	@observable private readonly roles = new ObservableMap<Snowflake, Role>();
+	@observable private readonly roles: ObservableMap<Snowflake, Role>;
 
 	constructor(app: AppStore) {
 		this.app = app;
+		this.roles = observable.map();
 
-		makeObservable(this);
+		makeAutoObservable(this);
 	}
 
 	@action

src/stores/UpdaterStore.ts

@@ -17,7 +17,6 @@ export default class UpdaterStore {
 
 	constructor(private readonly app: AppStore) {
 		this.logger.info("Initializing UpdaterStore");
-		makeAutoObservable(this);
 
 		const setupListeners = async () => {
 			await listen("CHECKING_FOR_UPDATE", () => {
@@ -81,6 +80,8 @@ export default class UpdaterStore {
 			quitAndInstall: this.quitAndInstall.bind(this),
 			clearUpdateCache: this.clearCache.bind(this),
 		};
+
+		makeAutoObservable(this);
 	}
 
 	@action

src/stores/UserStore.ts

@@ -6,14 +6,17 @@ import {
 	type Snowflake,
 } from "@spacebarchat/spacebar-api-types/v9";
 import { User } from "@structures";
-import { ObservableMap, action, computed, observable } from "mobx";
+import { ObservableMap, action, computed, makeAutoObservable, observable } from "mobx";
 import AppStore from "./AppStore";
 
 export default class UserStore {
 	private readonly logger = useLogger("UserStore");
-	@observable readonly users = new ObservableMap<string, User>();
+	@observable readonly users: ObservableMap<string, User>;
 
-	constructor(private readonly app: AppStore) {}
+	constructor(private readonly app: AppStore) {
+		this.users = observable.map();
+		makeAutoObservable(this);
+	}
 
 	@action
 	add(user: APIUser): User {

src/stores/objects/Channel.ts

@@ -16,7 +16,7 @@ import { ChannelType, Routes } from "@spacebarchat/spacebar-api-types/v9";
 import { AppStore, MessageStore } from "@stores";
 import { APIError, PermissionResolvable, Permissions } from "@utils";
 import Logger from "@utils/Logger";
-import { ObservableMap, action, computed, makeObservable, observable } from "mobx";
+import { ObservableMap, action, computed, makeAutoObservable, observable } from "mobx";
 import murmur from "murmurhash-js/murmurhash3_gc";
 import QueuedMessage from "./QueuedMessage";
 import User from "./User";
@@ -139,7 +139,7 @@ export default class Channel {
 				break;
 		}
 
-		makeObservable(this);
+		makeAutoObservable(this);
 	}
 
 	@action
@@ -309,8 +309,10 @@ export default class Channel {
 	}
 
 	@computed
-	get unread() {
-		const readState = this.app.readStateStore.get(this.id);
+	get hasUnread() {
+		const { readstates } = this.app.readStateStore;
+		const readState = readstates.get(this.id);
+
 		if (!readState) {
 			// this.logger.warn(`Failed to find readstate for channel ${this.id}`); // this just causes unnecessary spam
 			return false;
@@ -322,12 +324,16 @@ export default class Channel {
 	markAsRead() {
 		const readState = this.app.readStateStore.get(this.id);
 		if (!readState) {
-			this.logger.warn(`Failed to find readstate for channel ${this.id}`); // this just causes unnecessary spam
+			// this.logger.warn(`Failed to find readstate for channel ${this.id}`); // this just causes unnecessary spam
+			return;
+		}
+		if (!this.lastMessageId) {
+			this.logger.warn(`No last message for channel ${this.id}`);
 			return;
 		}
 
 		this.app.rest
-			.post(Routes.channelMessage(this.id, readState.lastMessageId) + "/ack", {
+			.post(Routes.channelMessage(this.id, this.lastMessageId) + "/ack", {
 				mention_count: readState.mentionCount,
 			})
 			.then((r) => {

src/stores/objects/Guild.ts

@@ -11,7 +11,7 @@ import {
 } from "@spacebarchat/spacebar-api-types/v9";
 import { AppStore, GuildMemberListStore, GuildMemberStore } from "@stores";
 import { asAcronym, compareChannels } from "@utils";
-import { ObservableMap, ObservableSet, action, computed, makeObservable, observable } from "mobx";
+import { ObservableMap, ObservableSet, action, computed, makeAutoObservable, observable } from "mobx";
 
 export default class Guild {
 	private readonly app: AppStore;
@@ -108,7 +108,7 @@ export default class Guild {
 		data.roles.forEach((role) => this.roles_.add(role.id));
 		data.channels?.forEach((channel) => this.channels_.add(channel.id));
 
-		makeObservable(this);
+		makeAutoObservable(this);
 	}
 
 	@action

src/stores/objects/GuildMember.ts

@@ -5,7 +5,7 @@ import {
 } from "@spacebarchat/spacebar-api-types/v9";
 import { AppStore } from "@stores";
 import { PermissionResolvable, Permissions } from "@utils";
-import { action, computed, observable } from "mobx";
+import { action, computed, makeAutoObservable, observable } from "mobx";
 import Guild from "./Guild";
 import Role from "./Role";
 import User from "./User";
@@ -43,6 +43,8 @@ export default class GuildMember {
 		this.flags = data.flags;
 		this.pending = data.pending;
 		this.communication_disabled_until = data.communication_disabled_until;
+
+		makeAutoObservable(this);
 	}
 
 	@computed

src/stores/objects/Presence.ts

@@ -7,7 +7,7 @@ import type {
 	Snowflake,
 } from "@spacebarchat/spacebar-api-types/v9";
 import { AppStore } from "@stores";
-import { action, observable } from "mobx";
+import { action, makeAutoObservable, observable } from "mobx";
 import User from "./User";
 
 export default class Presence {
@@ -27,6 +27,8 @@ export default class Presence {
 		this.status = data.status;
 		this.activities = data.activities;
 		this.clientStatus = data.client_status;
+
+		makeAutoObservable(this);
 	}
 
 	@action

src/stores/objects/QueuedMessage.ts

@@ -1,6 +1,6 @@
 import { APIUser, MessageType } from "@spacebarchat/spacebar-api-types/v9";
 import { AppStore } from "@stores";
-import { action, makeObservable, observable } from "mobx";
+import { action, observable } from "mobx";
 import MessageBase from "./MessageBase";
 
 export enum QueuedMessageStatus {
@@ -35,8 +35,6 @@ export default class QueuedMessage extends MessageBase {
 		this.guild_id = data.guild_id;
 		this.files = data.files;
 		this.status = QueuedMessageStatus.SENDING;
-
-		makeObservable(this);
 	}
 
 	@action

src/stores/objects/ReadState.ts

@@ -1,7 +1,7 @@
 import { type APIReadState } from "@spacebarchat/spacebar-api-types/v9";
 import { AppStore } from "@stores";
 import { Logger } from "@utils";
-import { action, observable } from "mobx";
+import { action, makeAutoObservable, observable } from "mobx";
 
 export default class ReadState {
 	private readonly logger: Logger;
@@ -20,6 +20,8 @@ export default class ReadState {
 		this.lastMessageId = data.last_message_id;
 		this.lastPinTimestamp = data.last_pin_timestamp;
 		this.mentionCount = data.mention_count;
+
+		makeAutoObservable(this);
 	}
 
 	@action

src/stores/objects/Role.ts

@@ -1,6 +1,6 @@
 import type { APIRole, APIRoleTags } from "@spacebarchat/spacebar-api-types/v9";
 import { AppStore } from "@stores";
-import { action, observable } from "mobx";
+import { action, makeAutoObservable, observable } from "mobx";
 
 export default class Role {
 	private readonly app: AppStore;
@@ -31,6 +31,8 @@ export default class Role {
 		this.managed = data.managed;
 		this.mentionable = data.mentionable;
 		this.tags = data.tags;
+
+		makeAutoObservable(this);
 	}
 
 	@action

src/stores/objects/User.ts

@@ -2,7 +2,7 @@ import { Snowflake } from "@spacebarchat/spacebar-api-types/globals";
 import type { APIUser, GatewayUserUpdateDispatchData, PublicUser } from "@spacebarchat/spacebar-api-types/v9";
 import { CDNRoutes, DefaultUserAvatarAssets, ImageFormat } from "@spacebarchat/spacebar-api-types/v9";
 import { REST } from "@utils";
-import { action, makeObservable, observable } from "mobx";
+import { action, makeAutoObservable, observable } from "mobx";
 
 export default class User {
 	id: Snowflake;
@@ -45,7 +45,7 @@ export default class User {
 		this.theme_colors = user.theme_colors;
 		this.accent_color = user.accent_color;
 
-		makeObservable(this);
+		makeAutoObservable(this);
 	}
 
 	@action