app layout

src/layouts/AppLayout.js

@@ -1,52 +1,51 @@
-import { View, Image } from 'react-native';
-import { useGlobal } from 'reactn';
-import { Motion } from '@legendapp/motion';
+import { Image, View } from "react-native";
+import { useGlobal } from "reactn";
 
-import useLayoutType from '../hooks/useLayoutType';
+import useLayoutType from "../hooks/useLayoutType";
 
-import Home from '../screens/Home';
-
-import { Palette, Style } from '../styles';
-import { background as backgrounds } from '../assets';
+import { background as backgrounds } from "../assets";
+import { Style } from "../styles";
 
 export default ({ currentUID = null, children }) => {
   const { isWeb = false } = useLayoutType();
 
   // Web: full-screen background with a centered content area (30% width)
-  const [webBackgroundImg] = useGlobal('webBackgroundImg');
+  const [webBackgroundImg] = useGlobal("webBackgroundImg");
 
   if (isWeb) {
     return (
       <View
         style={{
           flex: 1,
-          alignItems: 'center',
-          justifyContent: 'center',
-          minHeight: '100svh',
-          position: 'relative',
-        }}>
+          alignItems: "center",
+          justifyContent: "center",
+          minHeight: "100svh",
+          position: "relative",
+        }}
+      >
         {/* Full-viewport background for web */}
         <Image
           source={webBackgroundImg || backgrounds.homeBG}
-          resizeMode='cover'
+          resizeMode="cover"
           style={{
-            position: 'absolute',
+            position: "absolute",
             top: 0,
             left: 0,
-            width: '100%',
-            height: '100%',
+            width: "100%",
+            height: "100%",
           }}
         />
 
         {/* Centered content column (phone-like width) */}
         <View
           style={{
-            width: '30%',
+            width: isWeb ? "60%" : "30%",
             minWidth: 360,
-            maxWidth: 520,
-            height: '100svh',
-            backgroundColor: 'transparent',
-          }}>
+            maxWidth: isWeb ? 800 : 520,
+            height: "100svh",
+            backgroundColor: "transparent",
+          }}
+        >
           <View style={{ flex: 1 }}>{children}</View>
         </View>
       </View>
@@ -59,17 +58,19 @@ export default ({ currentUID = null, children }) => {
     <View
       style={{
         flex: 1,
-        flexDirection: 'row-reverse',
-      }}>
+        flexDirection: "row-reverse",
+      }}
+    >
       <View
         style={{
           flex: 2,
-          position: 'relative',
+          position: "relative",
           ...Style.defaultBorder,
           borderTopWidth: 0,
           borderBottomWidth: 0,
           ...sharedPanelStyle,
-        }}>
+        }}
+      >
         {children}
       </View>
     </View>