diff --git a/frontend/src/assets/icon-logo.svg b/frontend/src/assets/icon-logo.svg
new file mode 100644
index 0000000..91d7da8
--- /dev/null
+++ b/frontend/src/assets/icon-logo.svg
@@ -0,0 +1,4 @@
+
diff --git a/frontend/src/locale/en/translation.json b/frontend/src/locale/en/translation.json
index 0156192..f739ce2 100644
--- a/frontend/src/locale/en/translation.json
+++ b/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": {
diff --git a/frontend/src/ui/App.tsx b/frontend/src/ui/App.tsx
index 3126022..f7607c4 100644
--- a/frontend/src/ui/App.tsx
+++ b/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 {
} />
} />
} />
+ }
+ />
diff --git a/frontend/src/ui/components/Sidebar.tsx b/frontend/src/ui/components/Sidebar.tsx
index 550dfba..287187d 100644
--- a/frontend/src/ui/components/Sidebar.tsx
+++ b/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' } }}
>
- {APPNAME}
+
+
+ {APPNAME}
+
{version && !dev ? version : t('debug.dev-build')}
diff --git a/frontend/src/ui/pages/BotCommands.tsx b/frontend/src/ui/pages/BotCommands.tsx
new file mode 100644
index 0000000..b0655a0
--- /dev/null
+++ b/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 (
+
+
+ {t('pages.botcommands.title')}
+ {t('pages.botcommands.desc')}
+
+
+
+
+
+
+
+ );
+}
diff --git a/frontend/src/ui/theme/forms.ts b/frontend/src/ui/theme/forms.ts
index 7e30820..e3f47d3 100644
--- a/frontend/src/ui/theme/forms.ts
+++ b/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',
},
diff --git a/frontend/src/ui/theme/utils.ts b/frontend/src/ui/theme/utils.ts
index a52d2e0..d5090e8 100644
--- a/frontend/src/ui/theme/utils.ts
+++ b/frontend/src/ui/theme/utils.ts
@@ -11,5 +11,10 @@ export const FlexRow = styled('div', {
gap: '0.5rem',
},
},
+ align: {
+ left: {
+ justifyContent: 'flex-start',
+ },
+ },
},
});