merge

App.js

@@ -1,32 +1,29 @@
-import React, {
-  useState,
-  useCallback,
-  useEffect,
-  setGlobal,
-  useGlobal,
-} from "reactn";
-import { GestureHandlerRootView } from "react-native-gesture-handler";
+import "@expo/metro-runtime";
+import { PortalProvider } from "@gorhom/portal";
+import { DefaultTheme, NavigationContainer } from "@react-navigation/native";
 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 { PortalProvider } from "@gorhom/portal";
+import { Platform } from "react-native";
+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,32 +119,41 @@ 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}>
-                <NavigationContainer
-                  theme={{
-                    ...DefaultTheme,
-                    colors: {
-                      ...DefaultTheme.colors,
-                      background: Platform.OS === 'web' ? 'transparent' : Palette.darkPurple,
-                    },
-                  }}
-                  ref={navigationRef}
-                  documentTitle={{
-                    formatter: (options) =>
-                      options?.title
-                        ? `${options?.title} - minuit.starter`
-                        : "minuit.starter",
-                  }}
-                >
-                  <MainStack />
-                </NavigationContainer>
-                <CommentsBottomSheet />
-              </AppLayout>
+              {/* <AppLayout currentUID={currentUID}> */}
+              <NavigationContainer
+                theme={{
+                  ...DefaultTheme,
+                  colors: {
+                    ...DefaultTheme.colors,
+                    background:
+                      Platform.OS === "web"
+                        ? "transparent"
+                        : Palette.darkPurple,
+                  },
+                }}
+                ref={navigationRef}
+                documentTitle={{
+                  formatter: (options) =>
+                    options?.title
+                      ? `${options?.title} - minuit.starter`
+                      : "minuit.starter",
+                }}
+              >
+                <MainStack />
+              </NavigationContainer>
+              <CommentsBottomSheet />
+              {/* </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 { 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>
   );
 };