remove AppLayout

src/layouts/Page.js

@@ -2,7 +2,7 @@
 import { Image, View } from "react-native";
 import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
 import { SafeAreaView } from "react-native-safe-area-context";
-import React, { setGlobal, useEffect, useState } from "reactn";
+import React from "reactn";
 
 import { responsiveHeight } from "../actions/responsiveSizes.js";
 
@@ -12,8 +12,8 @@ import BaseHeader from "../components/BaseHeader";
 import NavigateHeader from "../components/NavigateHeader";
 
 import { background } from "../assets/index.js";
-import { isDesktop, isWeb } from "../hooks/useLayoutType.js";
-import { useUserData } from "../providers/UserDataProvider.js";
+import { isWeb } from "../hooks/useLayoutType.js";
+// import { useUserData } from "../providers/UserDataProvider.js";
 
 export default ({
   children,
@@ -37,38 +37,38 @@ export default ({
   backgroundImg = background.writingBG,
   headerTitleStyle = {},
   hideBackButton = false,
+  width = undefined,
 }) => {
-  const { currentUID } = useUserData();
-
-  const [scrollPosition, setScrollPosition] = useState(0);
+  // const { currentUID } = useUserData();
 
   const PageContainer =
     containerType === "SAFE_AREA_VIEW" ? SafeAreaView : View;
 
   const ContentContainer = scrollEnabled ? KeyboardAwareScrollView : View;
 
-  const handleScroll = (event) => {
-    const position = event.nativeEvent.contentOffset.y;
-    setScrollPosition(position);
-  };
+  const handleScroll = () => {};
 
-  // On web, push the background image to a global so AppLayout can render
-  // a full-screen background behind the phone frame. We avoid rendering
-  // the per-screen background inside the phone on web to prevent duplication.
-  useEffect(() => {
-    if (isWeb && backgroundImg) {
-      setGlobal({ webBackgroundImg: backgroundImg });
-    }
-  }, [isWeb, backgroundImg]);
+  const computedWidth = width ?? (isWeb ? "60%" : "100%");
 
   return (
-    <>
-      {!isWeb && (
-        <Image
-          source={backgroundImg}
-          style={{ width: "100%", height: "100%", position: "absolute" }}
-        />
-      )}
+    <View
+      style={{
+        flex: 1,
+        minHeight: isWeb ? "100svh" : "100%",
+        position: "relative",
+      }}
+    >
+      <Image
+        source={backgroundImg}
+        resizeMode="cover"
+        style={{
+          position: "absolute",
+          top: 0,
+          left: 0,
+          width: "100%",
+          height: "100%",
+        }}
+      />
       <PageContainer
         {...(containerType === "SAFE_AREA_VIEW" ? { edges: ["top"] } : {})}
         style={{
@@ -76,10 +76,9 @@ export default ({
           paddingTop: isWeb ? gutters / 2 : 0,
           padding: gutters,
           paddingBottom: 0,
-          ...(isWeb ? { maxHeight: "100vh", width: "100%" } : {}),
-          ...(!currentUID && isDesktop
-            ? { maxWidth: 500, alignSelf: "center" }
-            : {}),
+          ...(isWeb ? { maxHeight: "100svh" } : {}),
+          width: computedWidth,
+          alignSelf: isWeb ? "center" : "auto",
           ...containerStyle,
         }}
       >
@@ -117,6 +116,6 @@ export default ({
       </PageContainer>
 
       {bottomStickyContent?.()}
-    </>
+    </View>
   );
 };