add - layout web

src/layouts/AppLayout.js

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