1 files changed, 67 insertions, 15 deletions

diff --git a/packages/renderer/src/components/App.tsx b/packages/renderer/src/components/App.tsx
index 1174bbb..193afe6 100644
--- a/packages/renderer/src/components/App.tsx
+++ b/packages/renderer/src/components/App.tsx
@@ -19,24 +19,76 @@
  */
 
 import Box from '@mui/material/Box';
-import React from 'react';
+import { styled } from '@mui/material/styles';
+import { observer } from 'mobx-react-lite';
+import React, { useCallback } from 'react';
 
-import BrowserViewPlaceholder from './BrowserViewPlaceholder';
-import Sidebar from './Sidebar';
+import type RendererStore from '../stores/RendererStore.js';
+
+import ServicePanel from './ServicePanel.js';
+import WindowTitle from './WindowTitle.js';
+import Sidebar from './sidebar/Sidebar.js';
+
+const AppRoot = styled(Box)({
+  display: 'flex',
+  overflow: 'hidden',
+  flexDirection: 'row',
+  alignItems: 'stretch',
+  height: '100vh',
+  width: '100vw',
+});
+
+const AppServiceArea = styled(Box)({
+  flex: 1,
+  height: '100%',
+  position: 'relative',
+});
+
+function App({
+  store,
+  devMode,
+}: {
+  store: RendererStore;
+  devMode: boolean;
+}): JSX.Element {
+  const {
+    settings: { selectedService },
+    shared: { services },
+  } = store;
+
+  const handleBackForwardMouseButtons = useCallback(
+    (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+      switch (event.button) {
+        case 3:
+          selectedService?.goBack();
+          break;
+        case 4:
+          selectedService?.goForward();
+          break;
+        default:
+          // Allow the event to propagate.
+          return;
+      }
+      event.preventDefault();
+      event.stopPropagation();
+    },
+    [selectedService],
+  );
 
-export default function App(): JSX.Element {
   return (
-    <Box
-      sx={{
-        display: 'flex',
-        flexDirection: 'row',
-        alignItems: 'stretch',
-        height: '100vh',
-        width: '100vw',
-      }}
+    <AppRoot
+      onClick={handleBackForwardMouseButtons}
+      onAuxClick={handleBackForwardMouseButtons}
     >
-      <Sidebar />
-      <BrowserViewPlaceholder />
-    </Box>
+      <WindowTitle selectedService={selectedService} devMode={devMode} />
+      <Sidebar store={store} />
+      <AppServiceArea>
+        {services.map((service) => (
+          <ServicePanel key={service.id} store={store} service={service} />
+        ))}
+      </AppServiceArea>
+    </AppRoot>
   );
 }
+
+export default observer(App);