merge

App.js

@@ -1,32 +1,29 @@
-import React, {
+import "@expo/metro-runtime";
-  useState,
+import { PortalProvider } from "@gorhom/portal";
-  useCallback,
+import { DefaultTheme, NavigationContainer } from "@react-navigation/native";
-  useEffect,
-  setGlobal,
-  useGlobal,
-} from "reactn";
-import { GestureHandlerRootView } from "react-native-gesture-handler";
 import { useFonts } from "expo-font";
 import * as SplashScreen from "expo-splash-screen";
 import { StatusBar } from "expo-status-bar";
-import { Platform } from "react-native";
-import { NavigationContainer, DefaultTheme } from "@react-navigation/native";
 import moment from "moment";
 import "moment/locale/fr";
-import "@expo/metro-runtime";
+import { Platform } from "react-native";
-import { PortalProvider } from "@gorhom/portal";
+import { GestureHandlerRootView } from "react-native-gesture-handler";
+import React, {
+  setGlobal,
+  useCallback,
+  useEffect,
+  useGlobal,
+  useState,
+} from "reactn";
 
 import { MainStack, Routes } from "./src/navigation";
 import { Palette } from "./src/styles";
 
 import { navigationRef, reset } from "./src/navigation/NavigationService";
 
-import initialGlobalState from "./src/config/initialGlobalState";
 import { MenuProvider } from "react-native-popup-menu";
+import initialGlobalState from "./src/config/initialGlobalState";
 
-import firebase from "./src/config/firebase";
-import Providers from "./src/providers";
-import AppLayout from "./src/layouts/AppLayout";
 import {
   Inter_400Regular,
   Inter_400Regular_Italic,
@@ -34,10 +31,12 @@ import {
   Inter_600SemiBold,
   Inter_700Bold,
 } from "@expo-google-fonts/inter";
+import firebase from "./src/config/firebase";
+import Providers from "./src/providers";
 
-import "./src/utils/Sheet";
+import { LogBox } from "react-native";
-import {LogBox} from "react-native";
 import CommentsBottomSheet from "./src/components/bottomsheets/CommentsBottomSheet";
+import "./src/utils/Sheet";
 
 console.disableYellowBox = true;
 console.reportErrorsAsExceptions = false;
@@ -120,18 +119,27 @@ const App = () => {
 
       <GestureHandlerRootView
         onLayout={onLayoutRootView}
-        style={[{ flex: 1, backgroundColor: Platform.OS === 'web' ? 'transparent' : Palette.darkPurple }]}
+        style={[
+          {
+            flex: 1,
+            backgroundColor:
+              Platform.OS === "web" ? "transparent" : Palette.darkPurple,
+          },
+        ]}
       >
         <PortalProvider>
           <Providers>
             <MenuProvider>
-              <AppLayout currentUID={currentUID}>
+              {/* <AppLayout currentUID={currentUID}> */}
               <NavigationContainer
                 theme={{
                   ...DefaultTheme,
                   colors: {
                     ...DefaultTheme.colors,
-                      background: Platform.OS === 'web' ? 'transparent' : Palette.darkPurple,
+                    background:
+                      Platform.OS === "web"
+                        ? "transparent"
+                        : Palette.darkPurple,
                   },
                 }}
                 ref={navigationRef}
@@ -145,7 +153,7 @@ const App = () => {
                 <MainStack />
               </NavigationContainer>
               <CommentsBottomSheet />
-              </AppLayout>
+              {/* </AppLayout> */}
             </MenuProvider>
           </Providers>
         </PortalProvider>

src/layouts/AppLayout.js

@@ -1,86 +0,0 @@
-import { Image, View } from "react-native";
-import { useGlobal } from "reactn";
-
-import useLayoutType from "../hooks/useLayoutType";
-
-import { background as backgrounds } from "../assets";
-import { Style } from "../styles";
-
-// eslint-disable-next-line react/display-name
-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 [webLayoutMode] = useGlobal("webLayoutMode");
-
-  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:
-              webLayoutMode === "playbacks-wide"
-                ? "90%"
-                : isWeb
-                  ? "60%"
-                  : "30%",
-            minWidth: 360,
-            maxWidth:
-              webLayoutMode === "playbacks-wide" ? 1440 : isWeb ? 800 : 520,
-            height: "100svh",
-            backgroundColor: "transparent",
-          }}
-        >
-          <View style={{ flex: 1 }}>{children}</View>
-        </View>
-      </View>
-    );
-  }
-
-  // Native / non-web: original layout
-  const sharedPanelStyle = {};
-  return (
-    <View
-      style={{
-        flex: 1,
-        flexDirection: "row-reverse",
-      }}
-    >
-      <View
-        style={{
-          flex: 2,
-          position: "relative",
-          ...Style.defaultBorder,
-          borderTopWidth: 0,
-          borderBottomWidth: 0,
-          ...sharedPanelStyle,
-        }}
-      >
-        {children}
-      </View>
-    </View>
-  );
-};

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 { gutters } from "../styles";
-import { isDesktop, isWeb } from "../hooks/useLayoutType.js";
+
-import { useUserData } from "../providers/UserDataProvider.js";
+import { background } from "../assets/index.js";
-import { BlurView } from "expo-blur";
+import { isWeb } from "../hooks/useLayoutType.js";
-import { FONT_FAMILY } from "../styles/Fonts";
+// import { useUserData } from "../providers/UserDataProvider.js";
-import ShareBtnWeb from "../components/ShareBtnWeb";
 
 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
+  const handleScroll = () => {};
-  // a full-screen background behind the phone frame. We avoid rendering
+
-  // the per-screen background inside the phone on web to prevent duplication.
+  const computedWidth = width ?? (isWeb ? "60%" : "100%");
-  useEffect(() => {
-    if (isWeb && backgroundImg) {
-      setGlobal({ webBackgroundImg: backgroundImg });
-    }
-  }, [isWeb, backgroundImg]);
 
   return (
-    <>
+    <View
-      {!isWeb && (
+      style={{
+        flex: 1,
+        minHeight: isWeb ? "100svh" : "100%",
+        position: "relative",
+      }}
+    >
       <Image
         source={backgroundImg}
-          style={{ width: "100%", height: "100%", position: "absolute" }}
+        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%" } : {}),
+          ...(isWeb ? { maxHeight: "100svh" } : {}),
-          ...(!currentUID && isDesktop
+          width: computedWidth,
-            ? { maxWidth: 500, alignSelf: "center" }
+          alignSelf: isWeb ? "center" : "auto",
-            : {}),
           ...containerStyle,
         }}
       >
@@ -109,9 +113,6 @@ export default ({
       </PageContainer>
 
       {bottomStickyContent?.()}
-      {shareBtn && (
+    </View>
-        <ShareBtnWeb style={{ position: "absolute", top: 24, right: 24 }} />
-      )}
-    </>
   );
 };