diff --git a/frontend/src/ui/pages/BotCommands.tsx b/frontend/src/ui/pages/BotCommands.tsx
index b47304c..f604ebe 100644
--- a/frontend/src/ui/pages/BotCommands.tsx
+++ b/frontend/src/ui/pages/BotCommands.tsx
@@ -96,6 +96,14 @@ const ACLIndicator = styled('span', {
marginRight: '0.5rem',
});
+const NoneText = styled('div', {
+ color: '$gray9',
+ fontSize: '1.2em',
+ textAlign: 'center',
+ fontStyle: 'italic',
+ paddingTop: '1rem',
+});
+
interface CommandItemProps {
name: string;
item: TwitchBotCustomCommand;
@@ -358,25 +366,33 @@ export default function TwitchBotCommandsPage(): React.ReactElement {
/>
- {Object.keys(commands ?? {})
- ?.filter((cmd) => cmd.toLowerCase().includes(filterLC))
- .sort()
- .map((cmd) => (
- toggleCommand(cmd)}
- onEdit={() =>
- setActiveDialog({
- kind: 'edit',
- name: cmd,
- item: commands[cmd],
- })
- }
- onDelete={() => deleteCommand(cmd)}
- />
- ))}
+ {commands ? (
+ Object.keys(commands ?? {})
+ ?.filter(
+ (cmd) =>
+ cmd.toLowerCase().includes(filterLC) ||
+ commands[cmd].description.toLowerCase().includes(filterLC),
+ )
+ .sort()
+ .map((cmd) => (
+ toggleCommand(cmd)}
+ onEdit={() =>
+ setActiveDialog({
+ kind: 'edit',
+ name: cmd,
+ item: commands[cmd],
+ })
+ }
+ onDelete={() => deleteCommand(cmd)}
+ />
+ ))
+ ) : (
+ {t('pages.botcommands.no-commands')}
+ )}