From dfeb2fbf650bf6dc81ff6ed739a7edb066ba3a8b Mon Sep 17 00:00:00 2001
From: Ash Keel <ash@nebula.cafe>
Date: Thu, 20 Jan 2022 12:22:42 +0100
Subject: [PATCH] Some stylish tweaks

---
 frontend/src/ui/pages/BotCommands.tsx | 54 +++++++++++++++++----------
 frontend/src/ui/pages/BotTimers.tsx   | 49 ++++++++++++++----------
 2 files changed, 65 insertions(+), 38 deletions(-)

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 {
         />
       </FlexRow>
       <CommandList>
-        {Object.keys(commands ?? {})
-          ?.filter((cmd) => cmd.toLowerCase().includes(filterLC))
-          .sort()
-          .map((cmd) => (
-            <CommandItem
-              key={cmd}
-              name={cmd}
-              item={commands[cmd]}
-              onToggle={() => 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) => (
+              <CommandItem
+                key={cmd}
+                name={cmd}
+                item={commands[cmd]}
+                onToggle={() => toggleCommand(cmd)}
+                onEdit={() =>
+                  setActiveDialog({
+                    kind: 'edit',
+                    name: cmd,
+                    item: commands[cmd],
+                  })
+                }
+                onDelete={() => deleteCommand(cmd)}
+              />
+            ))
+        ) : (
+          <NoneText>{t('pages.botcommands.no-commands')}</NoneText>
+        )}
       </CommandList>
 
       <Dialog
diff --git a/frontend/src/ui/pages/BotTimers.tsx b/frontend/src/ui/pages/BotTimers.tsx
index 4039f7c..2322c81 100644
--- a/frontend/src/ui/pages/BotTimers.tsx
+++ b/frontend/src/ui/pages/BotTimers.tsx
@@ -89,6 +89,13 @@ const TimerText = styled('div', {
     marginBottom: '-0.5rem',
   },
 });
+const NoneText = styled('div', {
+  color: '$gray9',
+  fontSize: '1.2em',
+  textAlign: 'center',
+  fontStyle: 'italic',
+  paddingTop: '1rem',
+});
 
 function humanTime(t: TFunction<'translation'>, secs: number): string {
   const mins = Math.floor(secs / 60);
@@ -384,25 +391,29 @@ export default function TwitchBotTimersPage(): React.ReactElement {
         />
       </FlexRow>
       <TimerList>
-        {Object.keys(timerConfig?.timers ?? {})
-          ?.filter((cmd) => cmd.toLowerCase().includes(filterLC))
-          .sort()
-          .map((cmd) => (
-            <TimerItem
-              key={cmd}
-              name={cmd}
-              item={timerConfig.timers[cmd]}
-              onToggle={() => toggleTimer(cmd)}
-              onEdit={() =>
-                setActiveDialog({
-                  kind: 'edit',
-                  name: cmd,
-                  item: timerConfig.timers[cmd],
-                })
-              }
-              onDelete={() => deleteTimer(cmd)}
-            />
-          ))}
+        {!timerConfig?.timers ? (
+          Object.keys(timerConfig?.timers ?? {})
+            ?.filter((cmd) => cmd.toLowerCase().includes(filterLC))
+            .sort()
+            .map((cmd) => (
+              <TimerItem
+                key={cmd}
+                name={cmd}
+                item={timerConfig.timers[cmd]}
+                onToggle={() => toggleTimer(cmd)}
+                onEdit={() =>
+                  setActiveDialog({
+                    kind: 'edit',
+                    name: cmd,
+                    item: timerConfig.timers[cmd],
+                  })
+                }
+                onDelete={() => deleteTimer(cmd)}
+              />
+            ))
+        ) : (
+          <NoneText>{t('pages.bottimers.no-timers')}</NoneText>
+        )}
       </TimerList>
 
       <Dialog