merge

src/layouts/Page.js

@@ -1,18 +1,17 @@
 /* eslint-disable react/display-name */
-import { Alert, Image, Pressable, Text, View, Platform } from "react-native";
+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 } from "reactn";
+import React from "reactn";
+
 import { responsiveHeight } from "../actions/responsiveSizes.js";
-import { gutters, Palette } from "../styles";
 import BaseHeader from "../components/BaseHeader";
 import NavigateHeader from "../components/NavigateHeader";
-import { background, icons } from "../assets";
-import { isDesktop, isWeb } from "../hooks/useLayoutType.js";
-import { useUserData } from "../providers/UserDataProvider.js";
-import { BlurView } from "expo-blur";
-import { FONT_FAMILY } from "../styles/Fonts";
-import ShareBtnWeb from "../components/ShareBtnWeb";
+import { gutters } from "../styles";
+
+import { background } from "../assets/index.js";
+import { isWeb } from "../hooks/useLayoutType.js";
+// import { useUserData } from "../providers/UserDataProvider.js";
 
 export default ({
   children,
@@ -36,32 +35,38 @@ export default ({
   backgroundImg = background.writingBG,
   headerTitleStyle = {},
   hideBackButton = false,
-  shareBtn = false,
+  width = undefined,
 }) => {
-  const { currentUID } = useUserData();
+  // const { currentUID } = useUserData();
 
   const PageContainer =
     containerType === "SAFE_AREA_VIEW" ? SafeAreaView : View;
 
   const ContentContainer = scrollEnabled ? KeyboardAwareScrollView : View;
 
-  // 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 handleScroll = () => {};
+
+  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={{
@@ -69,10 +74,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,
         }}
       >
@@ -109,9 +113,6 @@ export default ({
       </PageContainer>
 
       {bottomStickyContent?.()}
-      {shareBtn && (
-        <ShareBtnWeb style={{ position: "absolute", top: 24, right: 24 }} />
-      )}
-    </>
+    </View>
   );
 };