ChannelDeck/components/ContextMenus.tsx

96 lines
3.9 KiB
TypeScript

import { NavContextMenuPatchCallback } from "@api/ContextMenu";
import { ChannelStore, Menu, PermissionsBits, PermissionStore, UserStore, useStateFromStores } from "@webpack/common";
import { ChannelDeckStore } from "../ChannelDeckStore";
import { Channel, User } from "discord-types/general";
export const UserSettingsContextMenu: NavContextMenuPatchCallback = (children, props) => {
const decks = useStateFromStores([ChannelDeckStore], () => ChannelDeckStore.getDecks());
if (!props) return;
children.push(
<Menu.MenuItem
id="channeldeck"
label="Channel Decks"
>
<Menu.MenuGroup>
{decks.map(deck => <Menu.MenuCheckboxItem
label={deck.name}
id={`deck-${deck.id}`}
key={`deck-${deck.id}`}
checked={deck.open}
action={() => {
ChannelDeckStore.setDeck({ ...deck, open: !deck.open });
}}
/>)}
</Menu.MenuGroup>
<Menu.MenuSeparator />
<Menu.MenuItem
id="create-deck"
label="Create deck"
action={() => {
ChannelDeckStore.createDeck({ name: "New Channel Deck" });
}}
>
</Menu.MenuItem>
</Menu.MenuItem>
);
};
interface ChannelLikeContextMenuProps {
channel: Channel;
guildId?: string;
user: User;
}
function MakeChannelContextMenu(name: "user" | "channel"): NavContextMenuPatchCallback {
return (children, { user, channel }: ChannelLikeContextMenuProps) => {
const decks = useStateFromStores([ChannelDeckStore], () => ChannelDeckStore.getDecks());
const isUser = name === "user";
if (isUser && !user) return;
if (!isUser && (!channel || channel.type === 4 || channel.type === 15)) return;
if (isUser && user.id === UserStore.getCurrentUser().id) return;
if (!isUser && (!PermissionStore.can(PermissionsBits.VIEW_CHANNEL, channel) && channel.type !== 3)) return;
const channelId = user ? ChannelStore.getDMFromUserId(user?.id) : channel?.id;
if (user && !channelId) return;
children.push(
<Menu.MenuItem
id="channeldeck"
label="Channel Decks"
>
<Menu.MenuGroup>
{decks.map(deck => <Menu.MenuCheckboxItem
label={deck.name}
id={`deck-${deck.id}`}
key={`deck-${deck.id}`}
checked={deck.columns.some(c => c.channelId === channelId)}
action={async () => {
if (deck.columns.some(c => c.channelId === channelId))
ChannelDeckStore.setDeck({ ...deck, columns: deck.columns.filter(c => c.channelId !== channelId) });
else
ChannelDeckStore.setDeck({ ...deck, columns: [...deck.columns, { channelId: channelId, width: "100%" }] });
}}
/>)}
</Menu.MenuGroup>
<Menu.MenuSeparator />
<Menu.MenuItem
id="create-deck"
label="Create deck and add channel"
action={() => {
ChannelDeckStore.createDeck({ name: "New Channel Deck", open: true, columns: [{ channelId: channelId, width: "100%" }] });
}}
>
</Menu.MenuItem>
</Menu.MenuItem >
);
};
}
export const contextMenus = {
"user-settings-cog": UserSettingsContextMenu,
"user-context": MakeChannelContextMenu("user"),
"channel-context": MakeChannelContextMenu("channel"),
"thread-context": MakeChannelContextMenu("channel"),
"gdm-context": MakeChannelContextMenu("channel"),
};