1 files changed, 43 insertions, 21 deletions

diff --git a/packages/renderer/src/components/App.tsx b/packages/renderer/src/components/App.tsx
index af2e4ec..b647a80 100644
--- a/packages/renderer/src/components/App.tsx
+++ b/packages/renderer/src/components/App.tsx
@@ -19,38 +19,46 @@
  */
 
 import Box from '@mui/material/Box';
-import React from 'react';
+import Button from '@mui/material/Button';
+import { observer } from 'mobx-react-lite';
+import React, { useCallback } from 'react';
 
 import BrowserViewPlaceholder from './BrowserViewPlaceholder';
 import { useStore } from './StoreProvider';
 import LocationBar from './locationBar/LocationBar';
 import Sidebar from './sidebar/Sidebar';
 
-export default function App(): JSX.Element {
-  const store = useStore();
+function App(): JSX.Element {
+  const {
+    settings: { selectedService },
+  } = useStore();
 
-  function onClick(event: React.MouseEvent<HTMLDivElement, MouseEvent>): void {
-    switch (event.button) {
-      case 3:
-        store.settings.selectedService?.goBack();
-        break;
-      case 4:
-        store.settings.selectedService?.goForward();
-        break;
-      default:
-        // Allow the event to propagate.
-        return;
-    }
-    event.preventDefault();
-    event.stopPropagation();
-  }
+  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],
+  );
 
   return (
     <Box
-      onClick={(event) => onClick(event)}
-      onAuxClick={(event) => onClick(event)}
+      onClick={handleBackForwardMouseButtons}
+      onAuxClick={handleBackForwardMouseButtons}
       sx={{
         display: 'flex',
+        overflow: 'hidden',
         flexDirection: 'row',
         alignItems: 'stretch',
         height: '100vh',
@@ -69,8 +77,22 @@ export default function App(): JSX.Element {
         }}
       >
         <LocationBar />
-        <BrowserViewPlaceholder />
+        <BrowserViewPlaceholder>
+          <p>{JSON.stringify(selectedService?.state)}</p>
+          {selectedService?.state.type === 'certificateError' && (
+            <Button
+              disabled={selectedService.state.trust !== 'pending'}
+              onClick={() =>
+                selectedService?.temporarilyTrustCurrentCertificate()
+              }
+            >
+              Trust certificate
+            </Button>
+          )}
+        </BrowserViewPlaceholder>
       </Box>
     </Box>
   );
 }
+
+export default observer(App);