check channel creation permissions

src/components/ChannelList/ChannelListItem.tsx

@@ -1,9 +1,11 @@
-import React, { useContext } from "react";
+import React, { useContext, useEffect } from "react";
 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 Floating from "../floating/Floating";
 import FloatingTrigger from "../floating/FloatingTrigger";
@@ -43,12 +45,22 @@ interface Props {
 }
 
 function ChannelListItem({ channel, isCategory, active }: Props) {
+	const app = useAppStore();
 	const navigate = useNavigate();
 	const contextMenu = useContext(ContextMenuContext);
 
 	const [wrapperHovered, setWrapperHovered] = React.useState(false);
 	const [createChannelHovered, setCreateChannelHovered] = React.useState(false);
 	const [createChannelDown, setChannelCreateDown] = React.useState(false);
+	const [hasCreateChannelPermission, setHasCreateChannelPermission] = React.useState(false);
+
+	useEffect(() => {
+		if (!isCategory) return;
+
+		const permission = Permissions.getPermission(app.account!.id, channel.guild, channel);
+		const hasPermission = permission.has("MANAGE_CHANNELS");
+		setHasCreateChannelPermission(hasPermission);
+	}, [channel]);
 
 	return (
 		<ListItem
@@ -100,7 +112,7 @@ function ChannelListItem({ channel, isCategory, active }: Props) {
 						{channel.name}
 					</Text>
 				</div>
-				{isCategory && (
+				{isCategory && hasCreateChannelPermission && (
 					<Floating
 						placement="top"
 						type="tooltip"

src/components/floating/GuildMenuPopout.tsx

@@ -1,8 +1,10 @@
 import styled from "styled-components";
 import useLogger from "../../hooks/useLogger";
 
+import React, { useEffect } from "react";
 import { modalController } from "../../controllers/modals";
 import { useAppStore } from "../../stores/AppStore";
+import { Permissions } from "../../utils/Permissions";
 import { ContextMenu, ContextMenuButton, ContextMenuDivider } from "../contextMenus/ContextMenu";
 
 const CustomContextMenu = styled(ContextMenu)`
@@ -10,8 +12,19 @@ const CustomContextMenu = styled(ContextMenu)`
 `;
 
 function GuildMenuPopout() {
-	const { activeGuild } = useAppStore();
+	const { activeGuild, account } = useAppStore();
 	const logger = useLogger("GuildMenuPopout");
+
+	const [hasCreateChannelPermission, setHasCreateChannelPermission] = React.useState(false);
+
+	useEffect(() => {
+		if (!activeGuild) return;
+
+		const permission = Permissions.getPermission(account!.id, activeGuild, undefined);
+		const hasPermission = permission.has("MANAGE_CHANNELS");
+		setHasCreateChannelPermission(hasPermission);
+	}, [activeGuild]);
+
 	if (!activeGuild) {
 		logger.error("activeGuild is undefined");
 		return null;
@@ -36,12 +49,16 @@ function GuildMenuPopout() {
 			<ContextMenuButton icon="mdiCog" disabled>
 				Server Settings
 			</ContextMenuButton>
+			{hasCreateChannelPermission && (
+				<>
 					<ContextMenuButton icon="mdiPlusCircle" onClick={onChannelCreateClick}>
 						Create Channel
 					</ContextMenuButton>
 					<ContextMenuButton icon="mdiFolderPlus" disabled>
 						Create Category
 					</ContextMenuButton>
+				</>
+			)}
 			<ContextMenuDivider />
 			<ContextMenuButton icon="mdiBell" disabled>
 				Notification Settings