Minor fixes and WIP command page

frontend/src/assets/icon-logo.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 400 300">
+<path d="m338 136-22 44a17 17 0 0 0 15 25h45a17 17 0 0 0 15-25l-22-44a17 17 0 0 0-31 0Zm4 2a13 13 0 0 1 23 0l22 44a13 13 0 0 1-11 19h-45a13 13 0 0 1-11-19l22-44Z" class="icon" style="fill:#fff" transform="rotate(-90 489 788) scale(3.18767)"/>
+<path d="m338 136-22 44a17 17 0 0 0 15 25h45a17 17 0 0 0 15-25l-22-44a17 17 0 0 0-31 0Zm4 2a13 13 0 0 1 23 0l22 44a13 13 0 0 1-11 19h-45a13 13 0 0 1-11-19l22-44Z" class="icon" style="fill:#fff" transform="rotate(90 838 -139) scale(3.18767)"/>
+</svg>

frontend/src/locale/en/translation.json

@@ -69,7 +69,7 @@
         "channel.raid": "Raid"
       },
       "sim-events": "Send test event",
-      "auth-button": "Authenticate as Twitch",
+      "auth-button": "Authenticate with Twitch",
       "auth-message": "Click the following button to authenticate the back-end with your Twitch account:",
       "current-status": "Current status"
     },
@@ -99,6 +99,12 @@
       "bot-chat-history": "How many messages to keep in history",
       "bot-chat-history-suffix": "messages",
       "bot-chat-history-desc": "Chat logging allows for pages and modules to read messages from chat. It's recommended to keep chat logging enabled with a reasonable history size (eg. 6)"
+    },
+    "botcommands": {
+      "title": "Bot commands",
+      "desc": "Define custom chat commands to set up autoresponders, counters, etc.",
+      "add-button": "New command",
+      "search-placeholder": "Search command by name"
     }
   },
   "form-actions": {

frontend/src/ui/App.tsx

@@ -26,6 +26,7 @@ import { styled } from './theme';
 import spinner from '../assets/icon-loading.svg';
 import BackendIntegrationPage from './pages/BackendIntegration';
 import TwitchSettingsPage from './pages/TwitchSettings';
+import TwitchBotCommandsPage from './pages/BotCommands';
 
 const LoadingDiv = styled('div', {
   display: 'flex',
@@ -189,6 +190,10 @@ export default function App(): JSX.Element {
             <Route path="/http" element={<ServerSettingsPage />} />
             <Route path="/backend" element={<BackendIntegrationPage />} />
             <Route path="/twitch/settings" element={<TwitchSettingsPage />} />
+            <Route
+              path="/twitch/bot/commands"
+              element={<TwitchBotCommandsPage />}
+            />
           </Routes>
         </PageWrapper>
       </PageContent>

frontend/src/ui/components/Sidebar.tsx

@@ -7,6 +7,9 @@ import { OverlayScrollbarsComponent } from 'overlayscrollbars-react';
 import { RootState } from '../../store';
 import { APPNAME, APPREPO } from '../theme';
 
+// @ts-expect-error Asset import
+import logo from '../../assets/icon-logo.svg';
+
 export interface RouteSection {
   title: string;
   links: Route[];
@@ -33,8 +36,12 @@ const Header = styled('div', {
 });
 
 const AppName = styled('h1', {
+  display: 'flex',
+  alignItems: 'center',
+  gap: '0.2rem',
   fontSize: '1.4rem',
-  margin: '0.5rem 0 0.2rem 0',
+  margin: '0.5rem 0 0.5rem 0',
+  fontWeight: 300,
 });
 
 const VersionLabel = styled('div', {
@@ -42,6 +49,7 @@ const VersionLabel = styled('div', {
   fontSize: '0.75rem',
   fontWeight: 'bold',
   color: '$teal8',
+  paddingLeft: '12px',
 });
 
 const UpdateButton = styled('a', {
@@ -168,7 +176,10 @@ export default function Sidebar({
         options={{ scrollbars: { autoHide: 'scroll' } }}
       >
         <Header>
-          <AppName>{APPNAME}</AppName>
+          <AppName>
+            <img src={logo} style={{ height: '28px', marginBottom: '-2px' }} />
+            {APPNAME}
+          </AppName>
           <VersionLabel>
             {version && !dev ? version : t('debug.dev-build')}
           </VersionLabel>

frontend/src/ui/pages/BotCommands.tsx

@@ -0,0 +1,35 @@
+import { PlusIcon } from '@radix-ui/react-icons';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  Button,
+  FlexRow,
+  InputBox,
+  PageContainer,
+  PageHeader,
+  PageTitle,
+  TextBlock,
+} from '../theme';
+
+export default function TwitchBotCommandsPage(): React.ReactElement {
+  const { t } = useTranslation();
+
+  return (
+    <PageContainer>
+      <PageHeader>
+        <PageTitle>{t('pages.botcommands.title')}</PageTitle>
+        <TextBlock>{t('pages.botcommands.desc')}</TextBlock>
+      </PageHeader>
+
+      <FlexRow spacing="1" align="left">
+        <Button>
+          <PlusIcon /> {t('pages.botcommands.add-button')}
+        </Button>
+        <InputBox
+          css={{ flex: 1 }}
+          placeholder={t('pages.botcommands.search-placeholder')}
+        />
+      </FlexRow>
+    </PageContainer>
+  );
+}

frontend/src/ui/theme/forms.ts

@@ -70,6 +70,9 @@ export const Button = styled('button', {
   fontSize: '1.1rem',
   border: '1px solid $teal6',
   backgroundColor: '$teal4',
+  display: 'flex',
+  alignItems: 'center',
+  gap: '0.5rem',
   '&:hover': {
     backgroundColor: '$teal5',
   },

frontend/src/ui/theme/utils.ts

@@ -11,5 +11,10 @@ export const FlexRow = styled('div', {
         gap: '0.5rem',
       },
     },
+    align: {
+      left: {
+        justifyContent: 'flex-start',
+      },
+    },
   },
 });