Add errors and keyboard shortcuts to restreamer

thrimbletrimmer/src/restreamer/Restreamer.module.scss

@@ -0,0 +1,21 @@
+.errorList {
+	color: #f33;
+	display: flex;
+	flex-direction: column;
+}
+
+.errorList > div {
+	border-bottom: 1px solid #f33;
+	background: #300;
+	padding: 4px;
+}
+
+.errorRemoveLink {
+	float: right;
+}
+
+.keyboardShortcutHelp {
+	position: absolute;
+	top: 0;
+	right: 0;
+}

thrimbletrimmer/src/restreamer/Restreamer.tsx

@@ -1,7 +1,27 @@
-import { Component } from "solid-js";
+import { Accessor, Component, createSignal, For } from "solid-js";
+import styles from "./Restreamer.module.scss";
+import { KeyboardShortcuts } from "../common/videoKeyboardShortcuts";
 
 const Restreamer: Component = () => {
-	return <></>;
+	const [pageErrors, setPageErrors] = createSignal<string[]>([]);
+
+	return (
+		<>
+			<ul class={styles.errorList}>
+				<For each={pageErrors()}>
+					{(error: string, index: Accessor<number>) => (
+						<li>
+							{error}
+							<a class={styles.errorRemoveLink}>[X]</a>
+						</li>
+					)}
+				</For>
+			</ul>
+			<div class={styles.keyboardShortcutHelp}>
+				<KeyboardShortcuts includeEditorShortcuts={false} />
+			</div>
+		</>
+	);
 };
 
 export default Restreamer;