Layout optimizations (#23)

* removed many unnecessary paddings, flex boxes, and optimize alignment of elements in console output box
* console options reduce size to medium, remove overflow for interaction choosing window which causes extra scroll bar
* execute box optimization
* refacoring of imports
* TD Doc Viewer formatted better
* multiple bug fixes for making payload IO work
* make sidebar example things copyable to clipboard
* app settings can use browser local storage now (almost) correctly
* show setting option to undock and redock components
* add a zoomable input suitable for mobile app
* make current thing shareable
* make interaction window select scrollable horizontally on very small screen size

Author: VigneshVSV

src/App.tsx

@@ -5,43 +5,79 @@ import "@fontsource/roboto/300.css";
 import "@fontsource/roboto/400.css";
 import "@fontsource/roboto/500.css";
 import "@fontsource/roboto/700.css";
-import { Box, Slide, Snackbar, ThemeProvider, Alert } from "@mui/material";
+import { Box, Slide, Snackbar, ThemeProvider, Alert, Checkbox, FormControl, FormControlLabel } from "@mui/material";
 // Custom component libraries
 import { theme } from "./overall-theme";
-import { ThingClient } from './builtins/client/view';
-import React from "react";
+import { ThingClient } from './builtins/client/index';
+import React, { createContext, useContext, useState } from "react";
+import { AppSettingsType, defaultAppSettings } from "./builtins/app-settings";
+import { useLocalStorage } from "./builtins/hooks";
 
 
 
+export type PageProps = {
+    settings : AppSettingsType
+    updateSettings : React.Dispatch<React.SetStateAction<AppSettingsType>>
+    showSettings : boolean
+    setShowSettings : React.Dispatch<React.SetStateAction<boolean>> | Function
+    showSidebar : boolean
+    setShowSidebar : React.Dispatch<React.SetStateAction<boolean>> | Function
+    updateLocalStorage : (value : AppSettingsType) => void
+}
+
+export const PageContext = createContext<any>({
+    settings : defaultAppSettings,
+    updateSettings : () => {},
+    showSettings : false,
+    setShowSettings : () => {},
+    showSidebar : false,
+    setShowSidebar : () => {},  
+    updateLocalStorage : (_ : AppSettingsType) => {},
+})
+
 const App = () => {
 
-    return (
-        <Box id='main-layout' sx={{ display : 'flex', flexGrow : 1, alignItems : 'center'}}>
-            <ThemeProvider theme={theme}>      
+    const [showSettings, setShowSettings] = useState<boolean>(false)
+    const [showSidebar, setShowSidebar] = useState(false)
+
+    const [_existingSettings, updateLocalStorage] = useLocalStorage('app-settings', defaultAppSettings)
+    const [settings, updateSettings] = useState<AppSettingsType>(_existingSettings)
+    
+    const pageState = { settings, updateSettings, showSettings, setShowSettings, 
+                    showSidebar, setShowSidebar, updateLocalStorage }
+
+    return (   
+        <ThemeProvider theme={theme}>      
+            <PageContext.Provider value={pageState}>
                 <ThingClient />
                 <OnLoadMessage />
-            </ThemeProvider>
-        </Box>
+            </PageContext.Provider>
+        </ThemeProvider>
     )
 }
 
 
 const OnLoadMessage = () => {
 
-    const [open, setOpen] = React.useState(true);
+    const { settings, updateLocalStorage } = useContext(PageContext) as PageProps
+    const [showWarningAgain, setShowWarningAgain] = useState(settings.showWebsiteWarningAgain);
+    const [open, setOpen] = useState(showWarningAgain);
 
     const handleClose = (event?: React.SyntheticEvent, reason?: string) => {
-        if (reason === 'clickaway') {
-            return;
-        }
+        if (reason === 'clickaway') 
+            return
+        if (settings.useLocalStorage)             
+            updateLocalStorage({ ...settings, showWebsiteWarningAgain: showWarningAgain })
         setOpen(false);
     };
 
+    if (!settings.showWebsiteWarningAgain) 
+        return null
+
     return (
         <Snackbar
             open={open}
             onClose={handleClose}
-            TransitionComponent={(props) => <Slide {...props} direction="up" />}
             anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
         >
             <Alert onClose={handleClose} severity="warning" sx={{ width: '100%' }}>
@@ -51,13 +87,25 @@ const OnLoadMessage = () => {
                     <li>check your server configuration for CORS headers and allow CORS on the browser</li>
                     <li>please do report security issues at the GitHub Repository</li>
                 </ul>
-                Please use it at your own risk. This website does not use cookies. 
+                Please use it at your own risk. This website does not use cookies. <br />
+                {settings.useLocalStorage ?
+                    <FormControlLabel 
+                        label="Dont show this message again"
+                        control={
+                            <Checkbox size="small" 
+                                onChange={(event) => setShowWarningAgain(!event.target.checked)}
+                                />
+                            }                
+                        checked={!showWarningAgain}
+                    /> : null
+                }
             </Alert>
         </Snackbar>
     )
 }
 
 
+
 export default App