mirror of
https://git.sr.ht/~ashkeel/strimertul
synced 2024-09-20 02:00:49 +00:00
Minor fixes and WIP command page
This commit is contained in:
parent
006ad71a19
commit
139294d0c8
7 changed files with 72 additions and 3 deletions
4
frontend/src/assets/icon-logo.svg
Normal file
4
frontend/src/assets/icon-logo.svg
Normal file
|
@ -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>
|
After Width: | Height: | Size: 663 B |
|
@ -69,7 +69,7 @@
|
||||||
"channel.raid": "Raid"
|
"channel.raid": "Raid"
|
||||||
},
|
},
|
||||||
"sim-events": "Send test event",
|
"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:",
|
"auth-message": "Click the following button to authenticate the back-end with your Twitch account:",
|
||||||
"current-status": "Current status"
|
"current-status": "Current status"
|
||||||
},
|
},
|
||||||
|
@ -99,6 +99,12 @@
|
||||||
"bot-chat-history": "How many messages to keep in history",
|
"bot-chat-history": "How many messages to keep in history",
|
||||||
"bot-chat-history-suffix": "messages",
|
"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)"
|
"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": {
|
"form-actions": {
|
||||||
|
|
|
@ -26,6 +26,7 @@ import { styled } from './theme';
|
||||||
import spinner from '../assets/icon-loading.svg';
|
import spinner from '../assets/icon-loading.svg';
|
||||||
import BackendIntegrationPage from './pages/BackendIntegration';
|
import BackendIntegrationPage from './pages/BackendIntegration';
|
||||||
import TwitchSettingsPage from './pages/TwitchSettings';
|
import TwitchSettingsPage from './pages/TwitchSettings';
|
||||||
|
import TwitchBotCommandsPage from './pages/BotCommands';
|
||||||
|
|
||||||
const LoadingDiv = styled('div', {
|
const LoadingDiv = styled('div', {
|
||||||
display: 'flex',
|
display: 'flex',
|
||||||
|
@ -189,6 +190,10 @@ export default function App(): JSX.Element {
|
||||||
<Route path="/http" element={<ServerSettingsPage />} />
|
<Route path="/http" element={<ServerSettingsPage />} />
|
||||||
<Route path="/backend" element={<BackendIntegrationPage />} />
|
<Route path="/backend" element={<BackendIntegrationPage />} />
|
||||||
<Route path="/twitch/settings" element={<TwitchSettingsPage />} />
|
<Route path="/twitch/settings" element={<TwitchSettingsPage />} />
|
||||||
|
<Route
|
||||||
|
path="/twitch/bot/commands"
|
||||||
|
element={<TwitchBotCommandsPage />}
|
||||||
|
/>
|
||||||
</Routes>
|
</Routes>
|
||||||
</PageWrapper>
|
</PageWrapper>
|
||||||
</PageContent>
|
</PageContent>
|
||||||
|
|
|
@ -7,6 +7,9 @@ import { OverlayScrollbarsComponent } from 'overlayscrollbars-react';
|
||||||
import { RootState } from '../../store';
|
import { RootState } from '../../store';
|
||||||
import { APPNAME, APPREPO } from '../theme';
|
import { APPNAME, APPREPO } from '../theme';
|
||||||
|
|
||||||
|
// @ts-expect-error Asset import
|
||||||
|
import logo from '../../assets/icon-logo.svg';
|
||||||
|
|
||||||
export interface RouteSection {
|
export interface RouteSection {
|
||||||
title: string;
|
title: string;
|
||||||
links: Route[];
|
links: Route[];
|
||||||
|
@ -33,8 +36,12 @@ const Header = styled('div', {
|
||||||
});
|
});
|
||||||
|
|
||||||
const AppName = styled('h1', {
|
const AppName = styled('h1', {
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
gap: '0.2rem',
|
||||||
fontSize: '1.4rem',
|
fontSize: '1.4rem',
|
||||||
margin: '0.5rem 0 0.2rem 0',
|
margin: '0.5rem 0 0.5rem 0',
|
||||||
|
fontWeight: 300,
|
||||||
});
|
});
|
||||||
|
|
||||||
const VersionLabel = styled('div', {
|
const VersionLabel = styled('div', {
|
||||||
|
@ -42,6 +49,7 @@ const VersionLabel = styled('div', {
|
||||||
fontSize: '0.75rem',
|
fontSize: '0.75rem',
|
||||||
fontWeight: 'bold',
|
fontWeight: 'bold',
|
||||||
color: '$teal8',
|
color: '$teal8',
|
||||||
|
paddingLeft: '12px',
|
||||||
});
|
});
|
||||||
|
|
||||||
const UpdateButton = styled('a', {
|
const UpdateButton = styled('a', {
|
||||||
|
@ -168,7 +176,10 @@ export default function Sidebar({
|
||||||
options={{ scrollbars: { autoHide: 'scroll' } }}
|
options={{ scrollbars: { autoHide: 'scroll' } }}
|
||||||
>
|
>
|
||||||
<Header>
|
<Header>
|
||||||
<AppName>{APPNAME}</AppName>
|
<AppName>
|
||||||
|
<img src={logo} style={{ height: '28px', marginBottom: '-2px' }} />
|
||||||
|
{APPNAME}
|
||||||
|
</AppName>
|
||||||
<VersionLabel>
|
<VersionLabel>
|
||||||
{version && !dev ? version : t('debug.dev-build')}
|
{version && !dev ? version : t('debug.dev-build')}
|
||||||
</VersionLabel>
|
</VersionLabel>
|
||||||
|
|
35
frontend/src/ui/pages/BotCommands.tsx
Normal file
35
frontend/src/ui/pages/BotCommands.tsx
Normal file
|
@ -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>
|
||||||
|
);
|
||||||
|
}
|
|
@ -70,6 +70,9 @@ export const Button = styled('button', {
|
||||||
fontSize: '1.1rem',
|
fontSize: '1.1rem',
|
||||||
border: '1px solid $teal6',
|
border: '1px solid $teal6',
|
||||||
backgroundColor: '$teal4',
|
backgroundColor: '$teal4',
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
gap: '0.5rem',
|
||||||
'&:hover': {
|
'&:hover': {
|
||||||
backgroundColor: '$teal5',
|
backgroundColor: '$teal5',
|
||||||
},
|
},
|
||||||
|
|
|
@ -11,5 +11,10 @@ export const FlexRow = styled('div', {
|
||||||
gap: '0.5rem',
|
gap: '0.5rem',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
align: {
|
||||||
|
left: {
|
||||||
|
justifyContent: 'flex-start',
|
||||||
|
},
|
||||||
|
},
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
Loading…
Reference in a new issue