feat: wip extension page

frontend/package.json.md5

@@ -1 +1 @@
-1e088af20465ec91bc3495c250e91b1a
+850ddc6e558430e6d6953ad6b69ed006

frontend/src/lib/extensions.ts

@@ -0,0 +1,19 @@
+export class Extension extends EventTarget {
+  private readonly worker: Worker;
+
+  constructor(public readonly source: string) {
+    super();
+    const blob = new Blob([source], { type: 'text/javascript' });
+    this.worker = new Worker(URL.createObjectURL(blob));
+    this.worker.onerror = (ev) =>
+      this.dispatchEvent(new CustomEvent('error', { detail: ev }));
+    this.worker.onmessage = (ev) =>
+      this.dispatchEvent(new CustomEvent('message', { detail: ev }));
+  }
+
+  stop() {
+    this.worker.terminate();
+  }
+}
+
+export default { Extension };

frontend/src/locale/en/translation.json

@@ -15,7 +15,8 @@
       },
       "strimertul": {
         "settings": "Server settings",
-        "ui-config": "User interface"
+        "ui-config": "User interface",
+        "extensions": "Extensions"
       },
       "twitch": {
         "configuration": "Configuration",
@@ -309,6 +310,9 @@
       "language": "Language",
       "repeat-onboarding": "Repeat onboarding",
       "partial-translation": "Partial translation"
+    },
+    "extensions": {
+      "title": "Extensions"
     }
   },
   "form-actions": {

frontend/src/ui/App.tsx

@@ -45,6 +45,7 @@ import ServerSettingsPage from './pages/ServerSettings';
 import StrimertulPage from './pages/Strimertul';
 import TwitchSettingsPage from './pages/TwitchSettings';
 import UISettingsPage from './pages/UISettingsPage';
+import ExtensionsPage from './pages/Extensions';
 import { styled, TextBlock } from './theme';
 
 const LoadingDiv = styled('div', {
@@ -88,13 +89,18 @@ const sections: RouteSection[] = [
       {
         title: 'menu.pages.strimertul.settings',
         url: '/http',
-        icon: <CodeIcon />,
+        icon: <MixerHorizontalIcon />,
       },
       {
         title: 'menu.pages.strimertul.ui-config',
         url: '/ui-config',
         icon: <MixIcon />,
       },
+      {
+        title: 'menu.pages.strimertul.extensions',
+        url: '/extensions',
+        icon: <CodeIcon />,
+      },
     ],
   },
   {
@@ -256,6 +262,7 @@ export default function App(): JSX.Element {
               <Route path="/debug" element={<DebugPage />} />
               <Route path="/http" element={<ServerSettingsPage />} />
               <Route path="/ui-config" element={<UISettingsPage />} />
+              <Route path="/extensions" element={<ExtensionsPage />} />
               <Route path="/twitch/settings" element={<TwitchSettingsPage />} />
               <Route
                 path="/twitch/bot/commands"

frontend/src/ui/pages/Extensions.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { PageContainer, PageHeader, PageTitle } from '../theme';
+
+export default function ExtensionsPage(): React.ReactElement {
+  const { t } = useTranslation();
+
+  return (
+    <PageContainer>
+      <PageHeader>
+        <PageTitle>{t('pages.extensions.title')}</PageTitle>
+      </PageHeader>
+    </PageContainer>
+  );
+}

frontend/src/ui/theme/pages.ts

@@ -2,6 +2,7 @@ import { styled } from './theme';
 
 export const PageContainer = styled('div', {
   padding: '2rem',
+  paddingTop: '1rem',
   maxWidth: '1000px',
   width: '100%',
   margin: '0 auto',
@@ -12,7 +13,7 @@ export const PageHeader = styled('header', {});
 export const PageTitle = styled('h1', {
   fontSize: '25pt',
   fontWeight: '600',
-  marginBottom: '0.5rem',
+  marginBottom: '1rem',
 });
 
 export const SectionHeader = styled('h2', {