enable/disable commands

apps/dashboard/package.json

@@ -31,6 +31,7 @@
 		"@trpc/server": "^10.37.1",
 		"class-variance-authority": "^0.7.0",
 		"clsx": "^2.0.0",
+		"discord-api-types": "^0.37.51",
 		"lucide-react": "^0.263.1",
 		"next": "^13.4.12",
 		"next-themes": "^0.2.1",

apps/dashboard/src/app/dashboard/[server_id]/commands/actions.ts

@@ -0,0 +1,48 @@
+'use server';
+import { prisma } from '@master-bot/db';
+import { revalidatePath } from 'next/cache';
+
+export async function toggleCommand(
+	guildId: string,
+	commandId: string,
+	newStatus: boolean
+) {
+	const guild = await prisma.guild.findUnique({
+		where: {
+			id: guildId
+		},
+		select: {
+			disabledCommands: true
+		}
+	});
+
+	if (!guild) {
+		throw new Error('Guild not found');
+	}
+
+	if (newStatus) {
+		await prisma.guild.update({
+			where: {
+				id: guildId
+			},
+			data: {
+				disabledCommands: {
+					set: guild.disabledCommands.filter(id => id !== commandId)
+				}
+			}
+		});
+	} else {
+		await prisma.guild.update({
+			where: {
+				id: guildId
+			},
+			data: {
+				disabledCommands: {
+					push: commandId
+				}
+			}
+		});
+	}
+
+	revalidatePath(`/dashboard/${guildId}/commands`);
+}

apps/dashboard/src/app/dashboard/[server_id]/commands/page.tsx

@@ -0,0 +1,71 @@
+import { env } from '~/env.mjs';
+import { prisma } from '@master-bot/db';
+import type { APIApplicationCommand } from 'discord-api-types/v10';
+import CommandToggleSwitch from './toggle-command';
+
+async function getApplicationCommands() {
+	// get all commands
+	const response = await fetch(
+		`https://discordapp.com/api/applications/${env.DISCORD_CLIENT_ID}/commands`,
+		{
+			headers: {
+				Authorization: `Bot ${env.DISCORD_TOKEN}`
+			}
+		}
+	);
+
+	return (await response.json()) as APIApplicationCommand[];
+}
+
+export default async function CommandsPage({
+	params
+}: {
+	params: { server_id: string };
+}) {
+	// get disabled commands
+	const guild = await prisma.guild.findUnique({
+		where: { id: params.server_id },
+		select: { disabledCommands: true }
+	});
+
+	const commands = await getApplicationCommands();
+
+	return (
+		<div>
+			<h1 className="text-3xl font-semibold mb-4">
+				Enable / Disable Commands Panel
+			</h1>
+			{commands ? (
+				<div className="flex flex-col gap-4">
+					{commands.map(command => {
+						const isCommandEnabled = !guild?.disabledCommands.includes(
+							command.id
+						);
+						return (
+							<div
+								key={command.id}
+								className={`${
+									isCommandEnabled ? 'bg-slate-700' : 'bg-slate-800'
+								} border-b flex justify-between items-center dark:border-slate-400 border-slate-700 px-2 py-1`}
+							>
+								<div className="flex flex-col gap-1">
+									<h3 className="text-lg">{command.name}</h3>
+									<p className="text-sm">{command.description}</p>
+								</div>
+								<div>
+									<CommandToggleSwitch
+										commandEnabled={isCommandEnabled}
+										serverId={params.server_id}
+										commandId={command.id}
+									/>
+								</div>
+							</div>
+						);
+					})}
+				</div>
+			) : (
+				<div className="text-red-500">Error loading commands</div>
+			)}
+		</div>
+	);
+}

apps/dashboard/src/app/dashboard/[server_id]/commands/toggle-command.tsx

@@ -0,0 +1,36 @@
+'use client';
+
+import { Switch } from '~/components/ui/switch';
+import { startTransition } from 'react';
+import { toggleCommand } from './actions';
+import { useToast } from '~/components/ui/use-toast';
+import { ToastAction } from '~/components/ui/toast';
+
+export default function CommandToggleSwitch({
+	commandEnabled,
+	serverId,
+	commandId
+}: {
+	commandEnabled: boolean;
+	serverId: string;
+	commandId: string;
+}) {
+	const { toast } = useToast();
+
+	return (
+		<Switch
+			checked={commandEnabled}
+			onCheckedChange={() =>
+				startTransition(() =>
+					// @ts-ignore
+					toggleCommand(serverId, commandId, !commandEnabled).then(() => {
+						toast({
+							title: `Command ${commandEnabled ? 'disabled' : 'enabled'}`,
+							action: <ToastAction altText="Okay">Okay</ToastAction>
+						});
+					})
+				)
+			}
+		/>
+	);
+}

apps/dashboard/src/app/dashboard/[server_id]/layout.tsx

@@ -37,7 +37,7 @@ export default async function Layout({
 				<header className="flex justify-end px-6 py-4">
 					<HeaderButtons />
 				</header>
-				<main className="dark:bg-slate-800 bg-slate-300 flex-1 p-8">
+				<main className="dark:bg-slate-800 bg-slate-300 flex-1 p-6 overflow-auto">
 					{children}
 				</main>
 			</section>

apps/dashboard/src/env.mjs

@@ -7,7 +7,9 @@ export const env = createEnv({
 	 * built with invalid env vars.
 	 */
 	server: {
-		DATABASE_URL: z.string().url()
+		DATABASE_URL: z.string().url(),
+		DISCORD_TOKEN: z.string(),
+		DISCORD_CLIENT_ID: z.string()
 	},
 	/**
 	 * Specify your client-side environment variables schema here.
@@ -21,6 +23,8 @@ export const env = createEnv({
 	 */
 	runtimeEnv: {
 		DATABASE_URL: process.env.DATABASE_URL,
+		DISCORD_TOKEN: process.env.DISCORD_TOKEN,
+		DISCORD_CLIENT_ID: process.env.DISCORD_CLIENT_ID,
 		NEXT_PUBLIC_INVITE_URL: process.env.NEXT_PUBLIC_INVITE_URL
 	},
 	skipValidation: !!process.env.CI || !!process.env.SKIP_ENV_VALIDATION

packages/api/src/routers/command.ts

@@ -336,7 +336,7 @@ export const commandRouter = createTRPCRouter({
 					},
 					data: {
 						disabledCommands: {
-							set: [...guild?.disabledCommands, commandId]
+							set: [...guild.disabledCommands, commandId]
 						}
 					}
 				});

packages/config/eslint/base.js

@@ -34,7 +34,9 @@ const config = {
 		'@typescript-eslint/no-unsafe-assignment': 'off',
 		'@typescript-eslint/dot-notation': 'off',
 		'@typescript-eslint/no-misused-promises': 'off',
-		'@typescript-eslint/ban-ts-comment': 'off'
+		'@typescript-eslint/ban-ts-comment': 'off',
+		'@typescript-eslint/no-unsafe-return': 'off',
+		'@typescript-eslint/no-unsafe-call': 'off'
 	},
 	ignorePatterns: [
 		'**/.eslintrc.cjs',