From 95015d7a02be43efc62a6b3f4fd203f5c6eaaba8 Mon Sep 17 00:00:00 2001
From: NovaFox161 <nova@maday.dev>
Date: Fri, 24 Jan 2025 18:09:20 -0600
Subject: [PATCH] Refactor commands page

This allows better maintainability, allows reusing the commands table component, and made it easier to make the tables collapsible
---
 components/command-table.tsx |   43 ++
 lib/types.ts                 |   29 +-
 pages/commands.tsx           | 1000 +++++++++++++++++-----------------
 tailwind.config.js           |    1 +
 4 files changed, 583 insertions(+), 490 deletions(-)
 create mode 100644 components/command-table.tsx

diff --git a/components/command-table.tsx b/components/command-table.tsx
new file mode 100644
index 0000000..54dc039
--- /dev/null
+++ b/components/command-table.tsx
@@ -0,0 +1,43 @@
+import { CommandAccessLevel, CommandData, CommandTableData} from "../lib/types";
+import React, {JSX} from "react";
+import {classNames} from "../lib/utils";
+
+function CommandTableRow(props: {data: CommandData}): JSX.Element {
+    let ral = props.data.access.renderedAccessLevel
+
+    return <tr className='bg-light-grey border-l border-r border-b border-discal-light-grey' role='rowgroup'>
+        <td className='p-3 block md:table-cell text-left md:text-center text-discord-blurple'>{props.data.command}</td>
+        <td className='p-3 block md:table-cell text-left text-white'>{props.data.description}</td>
+        <td className='p-3 block md:table-cell text-left text-discord-greyple opacity-75'>{props.data.usage}</td>
+        <td className={classNames('p-3 block md:table-cell text-left',
+            // I know this is ugly, but I dunno how else to do this rn
+            ral == CommandAccessLevel.Elevated ? "text-discal-red" :
+                ral == CommandAccessLevel.Privileged ? "text-discal-orange" :
+                    ral == CommandAccessLevel.Everyone ? "text-discal-green" :
+                        ral == CommandAccessLevel.PatronOnly ? "text-discal-red" :
+                            ral == CommandAccessLevel.DevOnly ? "text-discal-red" : "text-discal-red"
+        )}>
+            {props.data.access.alternateText ?? props.data.access.renderedAccessLevel}
+        </td>
+    </tr>
+}
+
+export default function CommandTable(props: {tableData: CommandTableData}): JSX.Element {
+    return <table className='min-w-full' aria-label={props.tableData.title + ' table'}>
+        <caption className='hidden'>{props.tableData.title}</caption>
+        <thead>
+        <tr className='bg-discal-light-grey text-discal-not-black border-l border-r border-b border-discal-light-grey'
+            role='rowgroup'>
+            <th className='w-full md:w-1/6 py-2 text-center block md:table-cell' role='columnheader'>Command</th>
+            <th className='w-2/6 py-2 text-left hidden md:table-cell' role='columnheader'>Description</th>
+            <th className='w-2/6 py-2 text-left hidden md:table-cell' role='columnheader'>Usage</th>
+            <th className='w-1/6 py-2 text-left hidden md:table-cell' role='columnheader'>Access</th>
+        </tr>
+        </thead>
+        <tbody>
+        {props.tableData.commands.map((commandData) => (
+            <CommandTableRow key={commandData.command} data={commandData}/>
+        ))}
+        </tbody>
+    </table>
+}
\ No newline at end of file
diff --git a/lib/types.ts b/lib/types.ts
index bbb94cc..61ca867 100644
--- a/lib/types.ts
+++ b/lib/types.ts
@@ -1,8 +1,8 @@
-import { JSX } from "react"
+import {ReactNode} from "react"
 
 /////////* Props */////////
 export type Props = {
-    children?: JSX.Element | JSX.Element[] | string
+    children?: ReactNode
     extraClass?: string
     caption?: string
 }
@@ -93,3 +93,28 @@ export type Faq = {
     question: string,
     answer: string,
 }
+
+export type CommandTableData = {
+    title: string,
+    commands: CommandData[],
+}
+
+export type CommandData = {
+    command: string,
+    description: string,
+    usage: string,
+    access: CommandAccessData,
+}
+
+export type CommandAccessData = {
+    renderedAccessLevel: CommandAccessLevel,
+    alternateText?: string,
+}
+
+export enum CommandAccessLevel {
+    Elevated   = "Elevated",
+    Privileged = "Privileged",
+    Everyone   = "Everyone",
+    PatronOnly = "Patron-only",
+    DevOnly    = "Developer-Only",
+}
\ No newline at end of file
diff --git a/pages/commands.tsx b/pages/commands.tsx
index 19ebda8..2a613f7 100644
--- a/pages/commands.tsx
+++ b/pages/commands.tsx
@@ -1,50 +1,493 @@
-import React, { JSX } from 'react';
-import type {Props} from "../lib/types";
-import Container from "../components/container";
-import Head from "next/head";
+import React, {JSX} from 'react';
+import {CommandAccessLevel, CommandTableData} from '../lib/types';
+import Container from '../components/container';
+import CommandTable from '../components/command-table';
+import Head from 'next/head';
+import {Disclosure, DisclosureButton, DisclosurePanel} from '@headlessui/react';
+import {MinusIcon, PlusIcon} from '@heroicons/react/24/outline';
 
-// Table building components
-type RowProps = {
-    command: string,
-    description: string,
-    usage: String,
-    access: String,
-}
-
-function CommandTable(props: Props): JSX.Element {
-    return <table className='min-w-full' aria-label={props.caption + ' table'}>
-        <caption className='hidden'>{props.caption}</caption>
-        <thead>
-        <tr className='bg-discal-light-grey text-discal-not-black border-l border-r border-b border-discal-light-grey'
-            role='rowgroup'>
-            <th className='w-full md:w-1/6 py-2 text-center block md:table-cell' role='columnheader'>Command</th>
-            <th className='w-2/6 py-2 text-left hidden md:table-cell' role='columnheader'>Description</th>
-            <th className='w-2/6 py-2 text-left hidden md:table-cell' role='columnheader'>Usage</th>
-            <th className='w-1/6 py-2 text-left hidden md:table-cell' role='columnheader'>Access</th>
-        </tr>
-        </thead>
-        <tbody>
-        {props.children}
-        </tbody>
-    </table>
-}
+// Definition for all commands so tables can be built dynamically
+const allCommands: CommandTableData[] = [
+    {
+        title: '/calendar commands',
+        commands: [
+            {
+                command: 'view',
+                description: 'Provides info and a link to the Guild\'s calendar',
+                usage: '/calendar view (overview) (calendar)',
+                access: { renderedAccessLevel: CommandAccessLevel.Everyone },
+            },
+            {
+                command: 'list',
+                description: 'Lists all calendars owned by the guild',
+                usage: '/calendar list',
+                access: { renderedAccessLevel: CommandAccessLevel.Everyone },
+            },
+            {
+                command: 'create',
+                description: 'Starts calendar create wizard',
+                usage: '/calendar create [name] (desc) (timezone) (host)',
+                access: { renderedAccessLevel: CommandAccessLevel.Elevated },
+            },
+            {
+                command: 'name',
+                description: 'Sets the calendar\'s name',
+                usage: '/calendar name [name]',
+                access: { renderedAccessLevel: CommandAccessLevel.Elevated },
+            },
+            {
+                command: 'description',
+                description: 'Sets the calendar\'s description',
+                usage: '/calendar description [description]',
+                access: {renderedAccessLevel: CommandAccessLevel.Elevated },
+            },
+            {
+                command: 'timezone',
+                description: 'Sets the calendar\'s timezone',
+                usage: '/calendar timezone [timezone]',
+                access: { renderedAccessLevel: CommandAccessLevel.Elevated },
+            },
+            {
+                command: 'review',
+                description: 'Displays calendar wizard properties',
+                usage: '/calendar review',
+                access: { renderedAccessLevel: CommandAccessLevel.Elevated },
+            },
+            {
+                command: 'confirm',
+                description: 'Commits the changes made in the wizard',
+                usage: '/calendar confirm',
+                access: { renderedAccessLevel: CommandAccessLevel.Elevated },
+            },
+            {
+                command: 'cancel',
+                description: 'Cancels the calendar wizard',
+                usage: '/calendar cancel',
+                access: { renderedAccessLevel: CommandAccessLevel.Elevated },
+            },
+            {
+                command: 'delete',
+                description: 'Deletes the calendar',
+                usage: '/calendar delete (calendar)',
+                access: { renderedAccessLevel: CommandAccessLevel.Elevated },
+            },
+            {
+                command: 'edit',
+                description: 'Starts the calendar edit wizard',
+                usage: '/calendar edit (calendar)',
+                access: { renderedAccessLevel: CommandAccessLevel.Elevated },
+            },
+        ],
+    },
+    {
+        title: '/displaycal commands',
+        commands: [
+            {
+                command: 'new',
+                description: 'Creates a new auto-updating calendar overview message',
+                usage: '/displaycal new (time) (calendar)',
+                access: { renderedAccessLevel: CommandAccessLevel.Elevated },
+            },
+        ]
+    },
+    {
+        title: '/event commands',
+        commands: [
+            {
+                command: 'view',
+                description: 'Displays the event\'s details',
+                usage: '/event view [event-id] (calendar)',
+                access: { renderedAccessLevel: CommandAccessLevel.Everyone },
+            },
+            {
+                command: 'create',
+                description: 'Starts the event create wizard',
+                usage: '/event create (name) (calendar)',
+                access: { renderedAccessLevel: CommandAccessLevel.Privileged },
+            },
+            {
+                command: 'name',
+                description: 'Sets the event\'s name',
+                usage: '/event name [name]',
+                access: { renderedAccessLevel: CommandAccessLevel.Privileged },
+            },
+            {
+                command: 'description',
+                description: 'Sets the event\'s description',
+                usage: '/event description [desc]',
+                access: { renderedAccessLevel: CommandAccessLevel.Privileged },
+            },
+            {
+                command: 'start',
+                description: 'Sets the event\'s start',
+                usage: '/event start [yyyy] [MM] [dd] (hh) (mm) (keep-duration)',
+                access: { renderedAccessLevel: CommandAccessLevel.Privileged },
+            },
+            {
+                command: 'end',
+                description: 'Sets the event\'s end',
+                usage: '/event end [yyyy] [MM] [dd] (hh) (mm) (keep-duration)',
+                access: { renderedAccessLevel: CommandAccessLevel.Privileged },
+            },
+            {
+                command: 'color',
+                description: 'Sets the event\'s color',
+                usage: '/event color [color]',
+                access: { renderedAccessLevel: CommandAccessLevel.Privileged },
+            },
+            {
+                command: 'location',
+                description: 'Sets the event\'s location',
+                usage: '/event location [location]',
+                access: { renderedAccessLevel: CommandAccessLevel.Privileged },
+            },
+            {
+                command: 'image',
+                description: 'Sets the event\'s image',
+                usage: '/event image [link]',
+                access: { renderedAccessLevel: CommandAccessLevel.Privileged, alternateText: 'Privileged, gif support patron-only' },
+            },
+            {
+                command: 'recur',
+                description: 'Toggles whether the event recurs, and how it recurs',
+                usage: '/event recur (enable) (frequency) (interval) (count)',
+                access: { renderedAccessLevel: CommandAccessLevel.Privileged },
+            },
+            {
+                command: 'review',
+                description: 'Displays the event wizard\'s properties',
+                usage: '/event review',
+                access: { renderedAccessLevel: CommandAccessLevel.Privileged },
+            },
+            {
+                command: 'confirm',
+                description: 'Commits the changes made in the wizard',
+                usage: '/event confirm',
+                access: { renderedAccessLevel: CommandAccessLevel.Privileged },
+            },
+            {
+                command: 'cancel',
+                description: 'Cancels the event wizard',
+                usage: '/event cancel',
+                access: { renderedAccessLevel: CommandAccessLevel.Privileged },
+            },
+            {
+                command: 'edit',
+                description: 'Starts the event edit wizard',
+                usage: '/event edit [event-id] (calendar)',
+                access: { renderedAccessLevel: CommandAccessLevel.Privileged },
+            },
+            {
+                command: 'copy',
+                description: 'Copies an existing event\'s details to a new event',
+                usage: '/event copy [event-id] (calendar) (target-cal)',
+                access: { renderedAccessLevel: CommandAccessLevel.Privileged },
+            },
+            {
+                command: 'delete',
+                description: 'Deletes an event',
+                usage: '/event delete [event-id] (calendar)',
+                access: { renderedAccessLevel: CommandAccessLevel.Privileged },
+            },
+        ],
+    },
+    {
+        title: '/events commands',
+        commands: [
+            {
+                command: 'upcoming',
+                description: 'Lists the next N upcoming events',
+                usage: '/events upcoming (number) (calendar)',
+                access: { renderedAccessLevel: CommandAccessLevel.Everyone },
+            },
+            {
+                command: 'ongoing',
+                description: 'Lists any ongoing events',
+                usage: '/events ongoing (calendar)',
+                access: { renderedAccessLevel: CommandAccessLevel.Everyone },
+            },
+            {
+                command: 'today',
+                description: 'Lists the events occurring in the next 24 hours',
+                usage: '/events today (calendar)',
+                access: { renderedAccessLevel: CommandAccessLevel.Everyone },
+            },
+            {
+                command: 'range',
+                description: 'Lists the events found in the date range provided',
+                usage: '/events range [yyyy/MM/dd] [yyyy/MM/dd] (calendar)',
+                access: { renderedAccessLevel: CommandAccessLevel.Everyone },
+            },
+        ],
+    },
+    {
+        title: '/rsvp commands',
+        commands: [
+            {
+                command: 'ontime',
+                description: 'RSVPs as going to the event on time',
+                usage: '/rsvp ontime [event-id] (calendar)',
+                access: { renderedAccessLevel: CommandAccessLevel.Everyone },
+            },
+            {
+                command: 'late',
+                description: 'RSVPs as going to the event, but arriving late',
+                usage: '/rsvp late [event-id] (calendar)',
+                access: { renderedAccessLevel: CommandAccessLevel.Everyone },
+            },
+            {
+                command: 'not-going',
+                description: 'RSVPs as not going to the event',
+                usage: '/rsvp not [event-id] (calendar)',
+                access: { renderedAccessLevel: CommandAccessLevel.Everyone },
+            },
+            {
+                command: 'unsure',
+                description: 'RSVPs are unsure if you will be able to attend',
+                usage: '/rsvp unsure [event-id] (calendar)',
+                access: { renderedAccessLevel: CommandAccessLevel.Everyone },
+            },
+            {
+                command: 'remove',
+                description: 'Removes your RSVP status from the event',
+                usage: '/rsvp remove [event-id] (calendar)',
+                access: { renderedAccessLevel: CommandAccessLevel.Everyone },
+            },
+            {
+                command: 'list',
+                description: 'Lists who as RSVPed to the event',
+                usage: '/rsvp list [event-id] (calendar)',
+                access: { renderedAccessLevel: CommandAccessLevel.Everyone },
+            },
+            {
+                command: 'limit',
+                description: 'Sets the max number of people allowed to attend. -1 to disable the limit',
+                usage: '',
+                access: { renderedAccessLevel: CommandAccessLevel.Privileged },
+            },
+            {
+                command: 'role',
+                description: 'Sets the role assigned when RSVPed to the event. \'@everyone\' to disable. *Note: these roles are currently not automatically removed',
+                usage: '/rsvp role [event-id] [role] (calendar)',
+                access: { renderedAccessLevel: CommandAccessLevel.Elevated, alternateText: 'Elevated, patron-only' },
+            },
+        ],
+    },
+    {
+       title: '/announcement commands',
+       commands: [
+           {
+               command: 'create',
+               description: 'Starts the announcement create wizard',
+               usage: '/announcement create (type) (channel) (minutes) (hours) (calendar)',
+               access: { renderedAccessLevel: CommandAccessLevel.Privileged },
+           },
+           {
+               command: 'type',
+               description: 'Sets the announcement type. Valid types: UNIVERSAL, SPECIFIC, COLOR, RECUR',
+               usage: '/announcement type [type]',
+               access: { renderedAccessLevel: CommandAccessLevel.Privileged },
+           },
+           {
+               command: 'event',
+               description: 'Sets the announcement\'s event. Only needed when using SPECIFIC or RECUR types',
+               usage: '/announcement event [event-id]',
+               access: { renderedAccessLevel: CommandAccessLevel.Privileged },
+           },
+           {
+               command: 'color',
+               description: 'Sets the announcement\'s color. Only needed when using COLOR type',
+               usage: '/announcement color [color]',
+               access: { renderedAccessLevel: CommandAccessLevel.Privileged },
+           },
+           {
+               command: 'channel',
+               description: 'Sets the channel the announcement will be posted in',
+               usage: '/announcement channel [channel]',
+               access: { renderedAccessLevel: CommandAccessLevel.Privileged },
+           },
+           {
+               command: 'minutes',
+               description: 'Sets the minutes before an event to announce. Added to hours',
+               usage: '/announcement minutes [number]',
+               access: { renderedAccessLevel: CommandAccessLevel.Privileged },
+           },
+           {
+               command: 'hours',
+               description: 'Sets the hours before an event to announce. Added to minutes',
+               usage: '/announcements hours [number]',
+               access: { renderedAccessLevel: CommandAccessLevel.Privileged },
+           },
+           {
+               command: 'info',
+               description: 'Sets the additional info to be posted along with the event. No text input to remove',
+               usage: '/announcement info (text)',
+               access: { renderedAccessLevel: CommandAccessLevel.Privileged },
+           },
+           {
+               command: 'calendar',
+               description: 'Sets the calendar the announcement will read from. Defaults to 1 (main calendar)',
+               usage: '/announcement calendar [calendar]',
+               access: { renderedAccessLevel: CommandAccessLevel.Privileged },
+           },
+           {
+               command: 'publish',
+               description: 'Toggles if the announcement should be pushed to channel subscribers',
+               usage: '/announcement public [true/false]',
+               access: { renderedAccessLevel: CommandAccessLevel.Privileged, alternateText: 'Privileged, Patron-only' },
+           },
+           {
+               command: 'review',
+               description: 'Displays the announcement properties in the wizard',
+               usage: '/announcement review',
+               access: { renderedAccessLevel: CommandAccessLevel.Privileged },
+           },
+           {
+               command: 'confirm',
+               description: 'Commits the changes made in the wizard',
+               usage: '/announcement confirm',
+               access: { renderedAccessLevel: CommandAccessLevel.Privileged },
+           },
+           {
+               command: 'cancel',
+               description: 'Cancels the announcement wizard',
+               usage: '/announcement cancel',
+               access: { renderedAccessLevel: CommandAccessLevel.Privileged },
+           },
+           {
+               command: 'edit',
+               description: 'Starts the announcement edit wizard',
+               usage: '/announcement edit [announcement-id]',
+               access: { renderedAccessLevel: CommandAccessLevel.Privileged },
+           },
+           {
+               command: 'copy',
+               description: 'Copies an existing announcement to a new one',
+               usage: '/announcement copy [announcement-id]',
+               access: { renderedAccessLevel: CommandAccessLevel.Privileged },
+           },
+           {
+               command: 'delete',
+               description: 'Deletes an announcement',
+               usage: '/announcement delete [announcement-id]',
+               access: { renderedAccessLevel: CommandAccessLevel.Privileged },
+           },
+           {
+               command: 'enable',
+               description: 'Sets whether an announcement is enabled',
+               usage: '/announcement enable [announcement-id] [true/false]',
+               access: { renderedAccessLevel: CommandAccessLevel.Privileged },
+           },
+           {
+               command: 'view',
+               description: 'Displays an existing announcement\'s properties',
+               usage: '/announcement view [announcement-id]',
+               access: { renderedAccessLevel: CommandAccessLevel.Everyone },
+           },
+           {
+               command: 'list',
+               description: 'Lists announcements, -1 for all',
+               usage: '/announcement list [amount]',
+               access: { renderedAccessLevel: CommandAccessLevel.Everyone },
+           },
+           {
+               command: 'subscribe',
+               description: 'Subscribes to an announcement to be pinged when it is posted',
+               usage: '/announcement subscribe [announcement-id] (user/role)',
+               access: { renderedAccessLevel: CommandAccessLevel.Everyone },
+           },
+           {
+               command: 'unsubscribe',
+               description: 'Unsubscribes to an announcement, to stop being pinged when it is posted',
+               usage: '/announcement unsubscribe [announcement-id] (user/role)',
+               access: { renderedAccessLevel: CommandAccessLevel.Everyone },
+           },
+       ],
+    },
+    {
+        title: '/settings commands',
+        commands: [
+            {
+                command: 'view',
+                description: 'Displays the current settings for the guild',
+                usage: '/settings view',
+                access: { renderedAccessLevel: CommandAccessLevel.Elevated },
+            },
+            {
+                command: 'role',
+                description: 'Sets the role required to use privileged commands',
+                usage: '/settings role [role]',
+                access: { renderedAccessLevel: CommandAccessLevel.Elevated },
+            },
+            {
+                command: 'announcement-style',
+                description: 'Changes the style announcements will be posted as',
+                usage: '/settings announcement-style [style]',
+                access: { renderedAccessLevel: CommandAccessLevel.Elevated },
+            },
+            {
+                command: 'language',
+                description: 'Changes the language the bot will use in responses',
+                usage: '/settings language [lang]',
+                access: { renderedAccessLevel: CommandAccessLevel.Elevated },
+            },
+            {
+                command: 'time-format',
+                description: 'Changes what format to display date/time when needed',
+                usage: '/settings time-format [format]',
+                access: { renderedAccessLevel: CommandAccessLevel.Elevated },
+            },
+            {
+                command: 'keep-event-duration',
+                description: 'Toggles whether to keep an event\'s duration when changing the start or end time (default false)',
+                usage: '/settings keep-event-duration [true/false]',
+                access: { renderedAccessLevel: CommandAccessLevel.Elevated },
+            },
+            {
+                command: 'branding',
+                description: 'Toggles between using DisCal branding or the guild\'s name/image where possible',
+                usage: '/settings branding [true/false]',
+                access: { renderedAccessLevel: CommandAccessLevel.Elevated, alternateText: 'Elevated, patron-only' },
+            },
+        ],
+    },
+    {
+        title: 'All other commands',
+        commands: [
+            {
+                command: 'discal',
+                description: 'Displays information about the bot',
+                usage: '/discal',
+                access: { renderedAccessLevel: CommandAccessLevel.Everyone },
+            },
+            {
+                command: 'linkcal',
+                description: 'Provides info and a link to view the guild\'s calendar',
+                usage: '/linkcal (overview) (calendar)',
+                access: { renderedAccessLevel: CommandAccessLevel.Everyone },
+            },
+            {
+                command: 'time',
+                description: 'Displays the current time as seen by the calendar\'s timezone',
+                usage: '/time (calendar)',
+                access: { renderedAccessLevel: CommandAccessLevel.Everyone },
+            },
+            {
+                command: 'addcal (WIP)',
+                description: 'Starts the process to add a pre-existing calendar',
+                usage: '/addcal',
+                access: { renderedAccessLevel: CommandAccessLevel.Elevated, alternateText: 'Elevated, patron-only, dev-only (work in progress)' },
+            },
+            {
+                command: 'help',
+                description: 'Links to the commands page and documentation',
+                usage: '/help',
+                access: { renderedAccessLevel: CommandAccessLevel.Everyone },
+            },
+        ],
+    },
+]
 
-function Row(props: RowProps): JSX.Element {
-    return <tr className='bg-light-grey border-l border-r border-b border-discal-light-grey' role='rowgroup'>
-        <td className='p-3 block md:table-cell text-left md:text-center text-discord-blurple'>{props.command}</td>
-        <td className='p-3 block md:table-cell text-left text-white'>{props.description}</td>
-        <td className='p-3 block md:table-cell text-left text-discord-greyple opacity-75'>{props.usage}</td>
-        <td className='p-3 block md:table-cell text-left text-discal-red'>{props.access}</td>
-    </tr>
-}
-
-/*
-<Row command=''
-     description=''
-     usage=''
-     access=''
-/>
-*/
 
 // Page content components
 
@@ -59,12 +502,12 @@ function Permissions(): JSX.Element {
             Requires ADMINISTRATOR or MANAGE_SERVER permission nodes, or being the guild owner
         </p>
 
-        <h6 className='text-discal-blue tracking-wide uppercase mt-2'>Privileged</h6>
+        <h6 className='text-discal-orange tracking-wide uppercase mt-2'>Privileged</h6>
         <p className='text-discal-light-grey'>
             Requires DisCal control role (default control role is @everyone)
         </p>
 
-        <h6 className='text-discal-blue tracking-wide uppercase mt-2'>Everyone</h6>
+        <h6 className='text-discal-green tracking-wide uppercase mt-2'>Everyone</h6>
         <p className='text-discal-light-grey'>
             Everyone will always be able to access (unless commands are disabled for the channel)
         </p>
@@ -81,459 +524,40 @@ function Permissions(): JSX.Element {
     </React.Fragment>
 }
 
-function CalendarCommandTable(): JSX.Element {
-    return <CommandTable caption='/calendar commands'>
-        <Row command='create'
-             description='Starts cal create wizard'
-             usage='/calendar create [name] (desc) (timezone) (host)'
-             access='elevated'
-        />
-        <Row command='name'
-             description='Sets the calendar&apos;s name'
-             usage='/calendar name [name]'
-             access='elevated'/>
-        <Row command='description'
-             description='Sets the calendar&apos;s description'
-             usage='/calendar description [description]'
-             access='elevated'
-        />
-        <Row command='timezone'
-             description='Sets the calendar&apos;s timezone'
-             usage='/calendar timezone [timezone]'
-             access='elevated'
-        />
-        <Row command='review'
-             description='Displays calendar properties'
-             usage='/calendar review'
-             access='elevated'
-        />
-        <Row command='confirm'
-             description='Commits the changes made in the wizard'
-             usage='/calendar confirm'
-             access='elevated'
-        />
-        <Row command='cancel'
-             description='Cancels the wizard'
-             usage='/calendar cancel'
-             access='elevated'
-        />
-        <Row command='delete'
-             description='Deletes the calendar'
-             usage='/calendar delete (calendar)'
-             access='elevated'
-        />
-        <Row command='edit'
-             description='Starts the edit wizard'
-             usage='/calendar edit (calendar)'
-             access='elevated'
-        />
-    </CommandTable>
-}
-
-function DisplayCalendarCommandTable(): JSX.Element {
-    return <CommandTable caption='/displaycal commands'>
-        <Row command='new'
-             description='Creates a new auto-updating calendar overview message'
-             usage='/displaycal new (time) (calendar)'
-             access='elevated'
-        />
-        <Row command='update'
-             description='Updates an existing calendar overview'
-             usage='/displaycal update [message-id]'
-             access='elevated'
-        />
-    </CommandTable>
-}
-
-function EventCommandTable(): JSX.Element {
-    return <CommandTable caption='/event commands'>
-        <Row command='view'
-             description='Displays the event&apos;s details'
-             usage='/event view [event-id] (calendar)'
-             access='everyone'
-        />
-        <Row command='create'
-             description='Starts the event create wizard'
-             usage='/event create (name) (calendar)'
-             access='privileged'
-        />
-        <Row command='name'
-             description='Sets the event&apos;s name'
-             usage='/event name [name]'
-             access='privileged'
-        />
-        <Row command='description'
-             description='Sets the event&apos;s description'
-             usage='/event description [desc]'
-             access='privileged'
-        />
-        <Row command='start'
-             description='Sets the event&apos;s start'
-             usage='/event start [yyyy] [MM] [dd] (hh) (mm)'
-             access='privileged'
-        />
-        <Row command='end'
-             description='Sets the event&apos;s end'
-             usage='/event end [yyyy] [MM] [dd] (hh) (mm)'
-             access='privileged'
-        />
-        <Row command='color'
-             description='Sets the event&apos;s color'
-             usage='/event color [color]'
-             access='privileged'
-        />
-        <Row command='location'
-             description='Sets the event&apos;s location'
-             usage='/event location [location]'
-             access='privileged'
-        />
-        <Row command='image'
-             description='Sets the event&apos;s image'
-             usage='/event image [link]'
-             access='privileged, gif support patron-only'
-        />
-        <Row command='recur'
-             description='Toggles whether the event recurs, and how it recurs'
-             usage='/event recur (enable) (frequency) (interval) (count)'
-             access='privileged'
-        />
-        <Row command='review'
-             description='Displays the event&apos;s properties'
-             usage='/event review'
-             access='privileged'
-        />
-        <Row command='confirm'
-             description='Commits the changes made in the wizard'
-             usage='/event confirm'
-             access='privileged'
-        />
-        <Row command='cancel'
-             description='Cancels the wizard'
-             usage='/event cancel'
-             access='privileged'
-        />
-        <Row command='edit'
-             description='Starts the event edit wizard'
-             usage='/event edit [event-id] (calendar)'
-             access='privileged'
-        />
-        <Row command='copy'
-             description='Copies an existing event&apos;s details to a new event'
-             usage='/event copy [event-id] (calendar) (target-cal)'
-             access='privileged'
-        />
-        <Row command='delete'
-             description='Deletes an event'
-             usage='/event delete [event-id] (calendar)'
-             access='privileged'
-        />
-    </CommandTable>
-}
-
-function EventsCommandTable(): JSX.Element {
-    return <CommandTable caption='/events commands'>
-        <Row command='upcoming'
-             description='Lists the next X upcoming events'
-             usage='/events upcoming (number) (calendar)'
-             access='everyone'
-        />
-        <Row command='ongoing'
-             description='Lists the ongoing events'
-             usage='/events ongoing (calendar)'
-             access='everyone'
-        />
-        <Row command='today'
-             description='Lists the events occurring in the next 24 hours'
-             usage='/events today (calendar)'
-             access='everyone'
-        />
-        <Row command='range'
-             description='Lists the events found in the date range provided'
-             usage='/events range [yyyy/MM/dd] [yyyy/MM/dd] (calendar)'
-             access='everyone'
-        />
-    </CommandTable>
-}
-
-function RsvpCommandTable(): JSX.Element {
-    return <CommandTable caption='/rsvp commands'>
-        <Row command='ontime'
-             description='RSVPs as going to the event on time'
-             usage='/rsvp ontime [event-id] (calendar)'
-             access='everyone'
-        />
-        <Row command='late'
-             description='RSVPs as going to the event, but arriving late'
-             usage='/rsvp late [event-id] (calendar)'
-             access='everyone'
-        />
-        <Row command='not'
-             description='RSVPs as not going to the event'
-             usage='/rsvp not [event-id] (calendar)'
-             access='everyone'
-        />
-        <Row command='unsure'
-             description='RSVPs are unsure if you will be able to attend'
-             usage='/rsvp unsure [event-id] (calendar)'
-             access='everyone'
-        />
-        <Row command='remove'
-             description='Removes your RSVP status from the event'
-             usage='/rsvp remove [event-id] (calendar)'
-             access='everyone'
-        />
-        <Row command='list'
-             description='Lists who as RSVPed to the event'
-             usage='/rsvp list [event-id] (calendar)'
-             access='everyone'
-        />
-        <Row command='limit'
-             description='Sets the max number of people allowed to attend. -1 to disable the limit'
-             usage='/rsvp limit [event-id] [limit] (calendar)'
-             access='privileged'
-        />
-        <Row command='role'
-             description='Sets the role assigned when RSVPed to the event. "@everyone" to disable.
-              *Note: these roles are currently not automatically removed'
-             usage='/rsvp role [event-id] [role] (calendar)'
-             access='elevated, patron-only'
-        />
-    </CommandTable>
-}
-
-function AnnouncementCommandTable(): JSX.Element {
-    return <CommandTable caption='/announcement commands'>
-        <Row command='create'
-             description='Starts the announcement create wizard'
-             usage='/announcement create (type) (channel) (minutes) (hours) (calendar)'
-             access='privileged'
-        />
-        <Row command='type'
-             description='Sets the announcement type. Valid types: UNIVERSAL, SPECIFIC, COLOR, RECUR'
-             usage='/announcement type [type]'
-             access='privileged'
-        />
-        <Row command='event'
-             description='Sets the announcement&apos;s event. Only needed when using SPECIFIC or RECUR types'
-             usage='/announcement event [event-id]'
-             access='privileged'
-        />
-        <Row command='color'
-             description='Sets the announcement&apos;s color. Only needed when using COLOR type'
-             usage='/announcement color [color]'
-             access='privileged'
-        />
-        <Row command='channel'
-             description='Sets the channel the announcement will be posted in'
-             usage='/announcement channel [channel]'
-             access='privileged'
-        />
-        <Row command='minutes'
-             description='Sets the minutes before an event to announce. Added to hours'
-             usage='/announcement minutes [number]'
-             access='privileged'
-        />
-        <Row command='hours'
-             description='Sets the hours before an event to announce. Added to minutes'
-             usage='/announcement hours [number]'
-             access='privileged'
-        />
-        <Row command='info'
-             description='Sets the additional info to be posted along with the event. No text input to remove'
-             usage='/announcement info (text)'
-             access='privileged'
-        />
-        <Row command='calendar'
-             description='Sets the calendar the announcement  will read from. Defaults to 1 (main calendar)'
-             usage='/announcement calendar [calendar]'
-             access='privileged'
-        />
-        <Row command='publish'
-             description='Toggles if the announcement should be pushed to channel subscribers'
-             usage='/announcement publish [true/false]'
-             access='privileged, patron-only'
-        />
-        <Row command='review'
-             description='Displays the announcement properties in the wizard'
-             usage='/announcement review'
-             access='privileged'
-        />
-        <Row command='confirm'
-             description='Commits the changes made in the wizard'
-             usage='/announcement confirm'
-             access='privileged'
-        />
-        <Row command='cancel'
-             description='Cancels the announcement wizard'
-             usage='/announcement cancel'
-             access='privileged'
-        />
-        <Row command='edit'
-             description='Starts the announcement edit wizard'
-             usage='/announcement edit [announcement-id]'
-             access='privileged'
-        />
-        <Row command='copy'
-             description='Copies an existing announcement to a new one'
-             usage='/announcement copy [announcement-id]'
-             access='privileged'
-        />
-        <Row command='delete'
-             description='Deletes an announcement'
-             usage='/announcement delete [announcement-id]'
-             access='privileged'
-        />
-        <Row command='enable'
-             description='Sets whether an announcement is enabled'
-             usage='/announcement enable [announcement-id] [true/false]'
-             access='privileged'
-        />
-        <Row command='view'
-             description='Displays an existing announcement&apos;s properties'
-             usage='/announcement view [announcement-id]'
-             access='everyone'
-        />
-        <Row command='list'
-             description='Lists announcements, -1 for all'
-             usage='/announcement list [amount]'
-             access='everyone'
-        />
-        <Row command='subscribe'
-             description='Subscribes to an announcement to be pinged when it is posted'
-             usage='/announcement subscribe [announcement-id] (user/role)'
-             access='everyone'
-        />
-        <Row command='unsubscribe'
-             description='Unsubscribes to an announcement, to stop being pinged when it is posted'
-             usage='/announcement unsubscribe [announcement-id] (user/role)'
-             access='everyone'
-        />
-    </CommandTable>
-}
-
-function SettingsCommandTable(): JSX.Element {
-    return <CommandTable caption='/settings commands'>
-        <Row command='view'
-             description='Displays the current settings for the guild'
-             usage='/settings view'
-             access='elevated'
-        />
-        <Row command='role'
-             description='Sets the role required to use privileged commands'
-             usage='/settings role [role]'
-             access='elevated'
-        />
-        <Row command='announcement-style'
-             description='Changes the style announcements will bbe posted as'
-             usage='settings announcement-style [style]'
-             access='elevated'
-        />
-        <Row command='language'
-             description='Changes the language the bot will use in responses'
-             usage='/settings language [lang]'
-             access='elevated'
-        />
-        <Row command='time-format'
-             description='Changes what format to display date/time when needed'
-             usage='/settings time-format [format]'
-             access='elevated'
-        />
-        <Row command='branding'
-             description='Toggles between using discal branding or the guild&apos;s name/image where possible'
-             usage='settings branding [true/false]'
-             access='elevated, patron-only'
-        />
-    </CommandTable>
-}
-
-function OtherCommandsTable(): JSX.Element {
-    return <CommandTable caption='other commands'>
-        <Row command='discal'
-             description='Displays information about the bot'
-             usage='/discal'
-             access='everyone'
-        />
-        <Row command='linkcal'
-             description='Provides info and a link to view the guild&apos;s calendar'
-             usage='/linkcal (calendar)'
-             access='everyone'
-        />
-        <Row command='time'
-             description='Displays the current time as seen by the calendar&apos;s timezone'
-             usage='/time (calendar)'
-             access='everyone'
-        />
-        <Row command='addCal (WIP)'
-             description='Starts the process to add a pre-existing calendar'
-             usage='/addCal'
-             access='patron-only, dev-only (work in progress)'
-        />
-        <Row command='help'
-             description='Links to the commands page'
-             usage='/help'
-             access='everyone'
-        />
-    </CommandTable>
-}
-
 export default function Commands() {
     return <>
         <Head>
             <title>Commands - DisCal Bot</title>
         </Head>
         <Container>
-            <h1 className="text-4xl font-semibold text-discal-blue uppercase tracking-wide text-center my-5">
+            <h1 className='text-4xl font-semibold text-discal-blue uppercase tracking-wide text-center my-5'>
                 Commands
             </h1>
             <Permissions/>
-            <hr className='mt-10 border-discal-blue'/>
-
-            <h2 className='text-2xl font-semibold text-discal-blue uppercase tracking-wide text-left my-5'>
-                /calendar commands
-            </h2>
-            <CalendarCommandTable/>
-            <hr className='mt-10 border-discal-blue'/>
-
-            <h2 className='text-2xl font-semibold text-discal-blue uppercase tracking-wide text-left my-5'>
-                /displaycal commands
-            </h2>
-            <DisplayCalendarCommandTable/>
-            <hr className='mt-10 border-discal-blue'/>
-
-            <h2 className='text-2xl font-semibold text-discal-blue uppercase tracking-wide text-left my-5'>
-                /event commands
-            </h2>
-            <EventCommandTable/>
-            <hr className='mt-10 border-discal-blue'/>
-
-            <h2 className='text-2xl font-semibold text-discal-blue uppercase tracking-wide text-left my-5'>
-                /events commands
-            </h2>
-            <EventsCommandTable/>
-            <hr className='mt-10 border-discal-blue'/>
-
-            <h2 className='text-2xl font-semibold text-discal-blue uppercase tracking-wide text-left my-5'>
-                /rsvp commands
-            </h2>
-            <RsvpCommandTable/>
-            <hr className='mt-10 border-discal-blue'/>
 
-            <h2 className='text-2xl font-semibold text-discal-blue uppercase tracking-wide text-left my-5'>
-                /announcement commands
-            </h2>
-            <AnnouncementCommandTable/>
-            <hr className='mt-10 border-discal-blue'/>
+            {allCommands.map((commandTableData) => (
+                <div key={commandTableData.title}>
+                    <hr className='mt-10 border-discal-blue'/>
 
-            <h2 className='text-2xl font-semibold text-discal-blue uppercase tracking-wide text-left my-5'>
-                /settings commands
-            </h2>
-            <SettingsCommandTable/>
-            <hr className='mt-10 border-discal-blue'/>
+                    <Disclosure defaultOpen={true}>
+                        <dt>
+                            <DisclosureButton className='group flex w-full items-start justify-between'>
+                                <span className='text-2xl font-semibold text-discal-blue uppercase tracking-wide text-left my-5'>
+                                    {commandTableData.title}
+                                </span>
+                                <span className='flex items-center my-5 size-8 text-discal-blue'>
+                                    <PlusIcon aria-hidden='true' className='group-data-[open]:hidden' />
+                                    <MinusIcon aria-hidden='true' className='group-[&:not([data-open])]:hidden' />
+                                </span>
+                            </DisclosureButton>
+                        </dt>
+                        <DisclosurePanel as='dd'>
+                            <CommandTable tableData={commandTableData}/>
+                        </DisclosurePanel>
+                    </Disclosure>
 
-            <h2 className='text-2xl font-semibold text-discal-blue uppercase tracking-wide text-left my-5'>
-                All other commands
-            </h2>
-            <OtherCommandsTable/>
+                </div>
+            ))}
         </Container>
     </>
 }
diff --git a/tailwind.config.js b/tailwind.config.js
index d8a5a7f..f880999 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -18,6 +18,7 @@ module.exports = {
                 'discal-dark-blue': '#161B3C',
                 'discal-red': '#EF0813',
                 'discal-dark-red': '#9E050D',
+                'discal-orange': '#e89600',
                 'discal-green': '#08B67F',
                 'discal-light-grey': '#CCCCCC',
                 'discal-dark-grey': '#3C3D41',