implement changing avatar

src/App.tsx

@@ -17,11 +17,11 @@ import useLogger from "./hooks/useLogger";
 import AppPage from "./pages/AppPage";
 import LogoutPage from "./pages/LogoutPage";
 import ChannelPage from "./pages/subpages/ChannelPage";
-import { useAppStore } from "./stores/AppStore";
 import { Globals } from "./utils/Globals";
 // @ts-expect-error no types
 import FPSStats from "react-fps-stats";
 import { bannerController } from "./controllers/banners";
+import { useAppStore } from "./hooks/useAppStore";
 import { isTauri } from "./utils/Utils";
 
 function App() {

src/components/Avatar.tsx

@@ -1,9 +1,9 @@
 import { PresenceUpdateStatus } from "@spacebarchat/spacebar-api-types/v9";
 import { observer } from "mobx-react-lite";
-import React from "react";
+import React, { useRef } from "react";
 import styled from "styled-components";
+import { useAppStore } from "../hooks/useAppStore";
 import AccountStore from "../stores/AccountStore";
-import { useAppStore } from "../stores/AppStore";
 import Presence from "../stores/objects/Presence";
 import User from "../stores/objects/User";
 import Container from "./Container";
@@ -33,7 +33,7 @@ interface Props {
 function Avatar(props: Props) {
 	const app = useAppStore();
 
-	const ref = React.useRef<HTMLDivElement>(null);
+	const ref = useRef<HTMLDivElement>(null);
 
 	const user = props.user ?? app.account;
 	if (!user) return null;

src/components/ChannelHeader.tsx

@@ -1,7 +1,7 @@
 import { observer } from "mobx-react-lite";
 import React, { useEffect } from "react";
 import styled from "styled-components";
-import { useAppStore } from "../stores/AppStore";
+import { useAppStore } from "../hooks/useAppStore";
 import Icon, { IconProps } from "./Icon";
 import { SectionHeader } from "./SectionHeader";
 import Floating from "./floating/Floating";

src/components/ChannelList/ChannelList.tsx

@@ -2,7 +2,7 @@ import { ChannelType } from "@spacebarchat/spacebar-api-types/v9";
 import { observer } from "mobx-react-lite";
 import { AutoSizer, List, ListRowProps } from "react-virtualized";
 import styled from "styled-components";
-import { useAppStore } from "../../stores/AppStore";
+import { useAppStore } from "../../hooks/useAppStore";
 import ChannelListItem from "./ChannelListItem";
 
 const Container = styled.div`

src/components/ChannelList/ChannelListItem.tsx

@@ -4,13 +4,13 @@ import { useNavigate } from "react-router-dom";
 import styled from "styled-components";
 import { ContextMenuContext } from "../../contexts/ContextMenuContext";
 import { modalController } from "../../controllers/modals";
-import { useAppStore } from "../../stores/AppStore";
 import Channel from "../../stores/objects/Channel";
 import { Permissions } from "../../utils/Permissions";
 import Icon from "../Icon";
 import SidebarPill from "../SidebarPill";
 import Floating from "../floating/Floating";
 import FloatingTrigger from "../floating/FloatingTrigger";
+import { useAppStore } from "../../hooks/useAppStore";
 
 const ListItem = styled.div<{ isCategory?: boolean }>`
 	padding: ${(props) => (props.isCategory ? "16px 8px 0 0" : "1px 8px 0 0")};

src/components/GuildItem.tsx

@@ -4,8 +4,8 @@ import React, { useContext } from "react";
 import { useNavigate } from "react-router-dom";
 import styled from "styled-components";
 import { ContextMenuContext } from "../contexts/ContextMenuContext";
+import { useAppStore } from "../hooks/useAppStore";
 import useLogger from "../hooks/useLogger";
-import { useAppStore } from "../stores/AppStore";
 import Guild from "../stores/objects/Guild";
 import { Permissions } from "../utils/Permissions";
 import REST from "../utils/REST";
@@ -30,9 +30,7 @@ const Wrapper = styled(Container)<{ active?: boolean; hasImage?: boolean }>`
 	border-radius: ${(props) => (props.active ? "30%" : "50%")};
 	background-color: ${(props) =>
 		props.hasImage ? "transparent" : props.active ? "var(--primary)" : "var(--background-secondary)"};
-	transition:
-		border-radius 0.2s ease,
-		background-color 0.2s ease;
+	transition: border-radius 0.2s ease, background-color 0.2s ease;
 
 	&:hover {
 		border-radius: 30%;

src/components/GuildSidebar.tsx

@@ -4,7 +4,7 @@ import { useNavigate } from "react-router-dom";
 import { AutoSizer, List, ListRowProps } from "react-virtualized";
 import styled from "styled-components";
 import { modalController } from "../controllers/modals";
-import { useAppStore } from "../stores/AppStore";
+import { useAppStore } from "../hooks/useAppStore";
 import GuildItem, { GuildSidebarListItem } from "./GuildItem";
 import SidebarAction from "./SidebarAction";
 

src/components/Loader.tsx

@@ -1,8 +1,8 @@
 import { invoke } from "@tauri-apps/api/core";
 import { observer } from "mobx-react-lite";
 import React from "react";
+import { useAppStore } from "../hooks/useAppStore";
 import LoadingPage from "../pages/LoadingPage";
-import { useAppStore } from "../stores/AppStore";
 import { isTauri } from "../utils/Utils";
 
 interface Props {

src/components/MemberList/MemberList.tsx

@@ -2,7 +2,7 @@ import { autorun } from "mobx";
 import { observer } from "mobx-react-lite";
 import React from "react";
 import styled from "styled-components";
-import { useAppStore } from "../../stores/AppStore";
+import { useAppStore } from "../../hooks/useAppStore";
 import GuildMemberListStore from "../../stores/GuildMemberListStore";
 import ListSection from "../ListSection";
 import MemberListItem from "./MemberListItem";

src/components/MemberList/MemberListItem.tsx

@@ -3,7 +3,7 @@ import { observer } from "mobx-react-lite";
 import { useContext } from "react";
 import styled from "styled-components";
 import { ContextMenuContext } from "../../contexts/ContextMenuContext";
-import { useAppStore } from "../../stores/AppStore";
+import { useAppStore } from "../../hooks/useAppStore";
 import GuildMember from "../../stores/objects/GuildMember";
 import Avatar from "../Avatar";
 import Floating from "../floating/Floating";

src/components/UserPanel.tsx

@@ -1,7 +1,7 @@
 import { observer } from "mobx-react-lite";
 import styled from "styled-components";
 import { modalController } from "../controllers/modals";
-import { useAppStore } from "../stores/AppStore";
+import { useAppStore } from "../hooks/useAppStore";
 import Avatar from "./Avatar";
 import Icon from "./Icon";
 import IconButton from "./IconButton";

src/components/contextMenus/GuildContextMenu.tsx

@@ -2,8 +2,8 @@
 
 import { ChannelType } from "@spacebarchat/spacebar-api-types/v9";
 import { modalController } from "../../controllers/modals";
+import { useAppStore } from "../../hooks/useAppStore";
 import useLogger from "../../hooks/useLogger";
-import { useAppStore } from "../../stores/AppStore";
 import Guild from "../../stores/objects/Guild";
 import { ContextMenu, ContextMenuButton, ContextMenuDivider } from "./ContextMenu";
 

src/components/contextMenus/MessageContextMenu.tsx

@@ -1,5 +1,5 @@
 import { modalController } from "../../controllers/modals";
-import { useAppStore } from "../../stores/AppStore";
+import { useAppStore } from "../../hooks/useAppStore";
 import Message from "../../stores/objects/Message";
 import { ContextMenu, ContextMenuButton, ContextMenuDivider } from "./ContextMenu";
 

src/components/contextMenus/UserContextMenu.tsx

@@ -1,7 +1,7 @@
 // loosely based on https://github.com/revoltchat/frontend/blob/master/components/app/menus/UserContextMenu.tsx
 
 import { modalController } from "../../controllers/modals";
-import { useAppStore } from "../../stores/AppStore";
+import { useAppStore } from "../../hooks/useAppStore";
 import GuildMember from "../../stores/objects/GuildMember";
 import User from "../../stores/objects/User";
 import { ContextMenu, ContextMenuButton, ContextMenuDivider } from "./ContextMenu";

src/components/floating/GuildMenuPopout.tsx

@@ -3,7 +3,7 @@ import useLogger from "../../hooks/useLogger";
 
 import React, { useEffect } from "react";
 import { modalController } from "../../controllers/modals";
-import { useAppStore } from "../../stores/AppStore";
+import { useAppStore } from "../../hooks/useAppStore";
 import { Permissions } from "../../utils/Permissions";
 import { ContextMenu, ContextMenuButton, ContextMenuDivider } from "../contextMenus/ContextMenu";
 

src/components/floating/UserProfilePopout.tsx

@@ -9,7 +9,7 @@ import { HorizontalDivider } from "../Divider";
 import { CDNRoutes, ImageFormat } from "@spacebarchat/spacebar-api-types/v9";
 import dayjs from "dayjs";
 import SpacebarLogoBlue from "../../assets/images/logo/Spacebar_Icon.svg?react";
-import { useAppStore } from "../../stores/AppStore";
+import { useAppStore } from "../../hooks/useAppStore";
 import REST from "../../utils/REST";
 import Floating from "./Floating";
 import FloatingTrigger from "./FloatingTrigger";

src/components/guards/AuthenticationGuard.tsx

@@ -1,6 +1,6 @@
 import { Navigate } from "react-router-dom";
+import { useAppStore } from "../../hooks/useAppStore";
 import { LoadingSuspense } from "../../pages/LoadingPage";
-import { useAppStore } from "../../stores/AppStore";
 
 interface Props {
 	component: React.FC;

src/components/guards/UnauthenticatedGuard.tsx

@@ -1,6 +1,6 @@
 import { Navigate } from "react-router-dom";
+import { useAppStore } from "../../hooks/useAppStore";
 import { LoadingSuspense } from "../../pages/LoadingPage";
-import { useAppStore } from "../../stores/AppStore";
 
 interface Props {
 	component: React.FC;

src/components/markdown/Mention.tsx

@@ -2,7 +2,7 @@ import React, { memo } from "react";
 import { useNavigate } from "react-router-dom";
 import styled from "styled-components";
 import { ContextMenuContext } from "../../contexts/ContextMenuContext";
-import { useAppStore } from "../../stores/AppStore";
+import { useAppStore } from "../../hooks/useAppStore";
 import Channel from "../../stores/objects/Channel";
 import Role from "../../stores/objects/Role";
 import User from "../../stores/objects/User";

src/components/messaging/Chat.tsx

@@ -2,8 +2,8 @@ import { runInAction } from "mobx";
 import { observer } from "mobx-react-lite";
 import React from "react";
 import styled from "styled-components";
+import { useAppStore } from "../../hooks/useAppStore";
 import useLogger from "../../hooks/useLogger";
-import { useAppStore } from "../../stores/AppStore";
 import Channel from "../../stores/objects/Channel";
 import Guild from "../../stores/objects/Guild";
 import MemberList from "../MemberList/MemberList";

src/components/messaging/ChatHeader.tsx

@@ -1,8 +1,8 @@
 import * as Icons from "@mdi/js";
 import { observer } from "mobx-react-lite";
 import styled from "styled-components";
+import { useAppStore } from "../../hooks/useAppStore";
 import useLogger from "../../hooks/useLogger";
-import { useAppStore } from "../../stores/AppStore";
 import Channel from "../../stores/objects/Channel";
 import Icon from "../Icon";
 import { SectionHeader } from "../SectionHeader";

src/components/messaging/Message.tsx

@@ -1,7 +1,7 @@
 import { observer } from "mobx-react-lite";
 import { memo, useContext } from "react";
 import { ContextMenuContext } from "../../contexts/ContextMenuContext";
-import { useAppStore } from "../../stores/AppStore";
+import { useAppStore } from "../../hooks/useAppStore";
 import { MessageLike } from "../../stores/objects/Message";
 import { QueuedMessageStatus } from "../../stores/objects/QueuedMessage";
 import Avatar from "../Avatar";

src/components/messaging/MessageAuthor.tsx

@@ -2,8 +2,8 @@ import { observer } from "mobx-react-lite";
 import React, { useContext } from "react";
 import styled from "styled-components";
 import { ContextMenuContext } from "../../contexts/ContextMenuContext";
+import { useAppStore } from "../../hooks/useAppStore";
 import useLogger from "../../hooks/useLogger";
-import { useAppStore } from "../../stores/AppStore";
 import Guild from "../../stores/objects/Guild";
 import GuildMember from "../../stores/objects/GuildMember";
 import { MessageLike } from "../../stores/objects/Message";
@@ -36,7 +36,7 @@ function MessageAuthor({ message, guild }: Props) {
 
 	React.useEffect(() => {
 		if (!eventData) return;
-		contextMenu.onContextMenu(eventData, { type: "user", user: message.author, member });
+		contextMenu?.onContextMenu(eventData, { type: "user", user: message.author, member });
 	}, [eventData, member]);
 
 	const onContextMenu = async (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
@@ -68,7 +68,7 @@ function MessageAuthor({ message, guild }: Props) {
 					style={{
 						color,
 					}}
-					ref={contextMenu.setReferenceElement}
+					ref={contextMenu?.setReferenceElement}
 					onContextMenu={onContextMenu}
 				>
 					{message.author.username}

src/components/messaging/MessageInput.tsx

@@ -6,8 +6,8 @@ import React from "react";
 import styled from "styled-components";
 
 import { modalController } from "../../controllers/modals";
+import { useAppStore } from "../../hooks/useAppStore";
 import useLogger from "../../hooks/useLogger";
-import { useAppStore } from "../../stores/AppStore";
 import Guild from "../../stores/objects/Guild";
 import Snowflake from "../../utils/Snowflake";
 import { MAX_ATTACHMENTS } from "../../utils/constants";
@@ -197,7 +197,7 @@ function MessageInput({ channel }: Props) {
 										channel.type === ChannelType.DM
 											? channel.recipients?.[0].username
 											: "#" + channel.name
-									}`
+								  }`
 								: "You do not have permission to send messages in this channel."
 						}
 						disabled={!channel.hasPermission("SEND_MESSAGES")}

src/components/messaging/MessageList.tsx

@@ -4,8 +4,8 @@ import InfiniteScroll from "react-infinite-scroll-component";
 import PulseLoader from "react-spinners/PulseLoader";
 import styled from "styled-components";
 import useResizeObserver from "use-resize-observer";
+import { useAppStore } from "../../hooks/useAppStore";
 import useLogger from "../../hooks/useLogger";
-import { useAppStore } from "../../stores/AppStore";
 import { MessageGroup as MessageGroupType } from "../../stores/MessageStore";
 import Channel from "../../stores/objects/Channel";
 import Guild from "../../stores/objects/Guild";
@@ -30,6 +30,7 @@ const EndMessageContainer = styled.div`
 interface Props {
 	guild: Guild;
 	channel: Channel;
+	before?: string;
 }
 
 /**

src/components/messaging/attachments/AttachmentUploadProgress.tsx

@@ -1,6 +1,6 @@
 import { observer } from "mobx-react-lite";
 import styled from "styled-components";
-import { useAppStore } from "../../../stores/AppStore";
+import { useAppStore } from "../../../hooks/useAppStore";
 import QueuedMessage from "../../../stores/objects/QueuedMessage";
 import { bytesToSize } from "../../../utils/Utils";
 import Icon from "../../Icon";

src/components/modals/BanMemberModal.tsx

@@ -4,7 +4,7 @@ import { useForm } from "react-hook-form";
 import styled from "styled-components";
 import * as yup from "yup";
 import { ModalProps, modalController } from "../../controllers/modals";
-import { useAppStore } from "../../stores/AppStore";
+import { useAppStore } from "../../hooks/useAppStore";
 import { Modal } from "./ModalComponents";
 
 const DescriptionText = styled.p`
@@ -54,7 +54,7 @@ export function BanMemberModal({ target, type, ...props }: ModalProps<"ban_membe
 				data.reason
 					? {
 							"X-Audit-Log-Reason": data.reason,
-						}
+					  }
 					: undefined,
 			)
 			.then(() => {

src/components/modals/CreateChannelModel.tsx

@@ -11,7 +11,7 @@ import { useNavigate } from "react-router-dom";
 import styled from "styled-components";
 import * as yup from "yup";
 import { ModalProps, modalController } from "../../controllers/modals";
-import { useAppStore } from "../../stores/AppStore";
+import { useAppStore } from "../../hooks/useAppStore";
 import { messageFromFieldError } from "../../utils/messageFromFieldError";
 import { Input, InputErrorText } from "../AuthComponents";
 import { TextDivider } from "../Divider";

src/components/modals/CreateInviteModal.tsx

@@ -4,8 +4,8 @@ import React from "react";
 import { useForm } from "react-hook-form";
 import styled from "styled-components";
 import { ModalProps } from "../../controllers/modals/types";
+import { useAppStore } from "../../hooks/useAppStore";
 import useLogger from "../../hooks/useLogger";
-import { useAppStore } from "../../stores/AppStore";
 import { messageFromFieldError } from "../../utils/messageFromFieldError";
 import { Input, InputErrorText, InputLabel, LabelWrapper } from "../AuthComponents";
 import Button from "../Button";

src/components/modals/CreateServerModal.tsx

@@ -4,8 +4,8 @@ import { useForm } from "react-hook-form";
 import { useNavigate } from "react-router-dom";
 import styled from "styled-components";
 import { ModalProps, modalController } from "../../controllers/modals";
+import { useAppStore } from "../../hooks/useAppStore";
 import useLogger from "../../hooks/useLogger";
-import { useAppStore } from "../../stores/AppStore";
 import { messageFromFieldError } from "../../utils/messageFromFieldError";
 import { Input, InputErrorText, InputLabel, InputWrapper, LabelWrapper } from "../AuthComponents";
 import { TextDivider } from "../Divider";

src/components/modals/JoinServerModal.tsx

@@ -3,8 +3,8 @@ import { useForm } from "react-hook-form";
 import { useNavigate } from "react-router-dom";
 import styled from "styled-components";
 import { ModalProps, modalController } from "../../controllers/modals";
+import { useAppStore } from "../../hooks/useAppStore";
 import useLogger from "../../hooks/useLogger";
-import { useAppStore } from "../../stores/AppStore";
 import { messageFromFieldError } from "../../utils/messageFromFieldError";
 import { Input, InputErrorText, InputLabel, LabelWrapper } from "../AuthComponents";
 import { TextDivider } from "../Divider";

src/components/modals/KickMemberModal.tsx

@@ -4,7 +4,7 @@ import { useForm } from "react-hook-form";
 import styled from "styled-components";
 import * as yup from "yup";
 import { ModalProps, modalController } from "../../controllers/modals";
-import { useAppStore } from "../../stores/AppStore";
+import { useAppStore } from "../../hooks/useAppStore";
 import { Modal } from "./ModalComponents";
 
 const DescriptionText = styled.p`
@@ -54,7 +54,7 @@ export function KickMemberModal({ target, ...props }: ModalProps<"kick_member">)
 				data.reason
 					? {
 							"X-Audit-Log-Reason": data.reason,
-						}
+					  }
 					: undefined,
 			)
 			.then(() => {

src/components/modals/LeaveServerModal.tsx

@@ -2,8 +2,8 @@ import { Routes } from "@spacebarchat/spacebar-api-types/v9";
 import { useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { ModalProps, modalController } from "../../controllers/modals";
+import { useAppStore } from "../../hooks/useAppStore";
 import useLogger from "../../hooks/useLogger";
-import { useAppStore } from "../../stores/AppStore";
 import { Modal } from "./ModalComponents";
 
 export function LeaveServerModal({ target, ...props }: ModalProps<"leave_server">) {

src/components/modals/SettingsModal.tsx

@@ -2,7 +2,7 @@ import { observer } from "mobx-react-lite";
 import { useState } from "react";
 import styled, { css } from "styled-components";
 import { ModalProps, modalController } from "../../controllers/modals";
-import { useAppStore } from "../../stores/AppStore";
+import { useAppStore } from "../../hooks/useAppStore";
 import { isTauri } from "../../utils/Utils";
 import { APP_VERSION, GIT_BRANCH, GIT_REVISION, REPO_URL } from "../../utils/revison";
 import Icon from "../Icon";