From bf97861377e996f52d6da2ca594c7d596752d0d7 Mon Sep 17 00:00:00 2001
From: Innei <tukon479@gmail.com>
Date: Thu, 13 Mar 2025 23:51:42 +0800
Subject: [PATCH] fix(mobile): sheet modal corners and view background

- Updated the `EntryNormalItem` component to improve styling with rounded corners and overflow handling.
- Integrated `ThemedBlurView` for a better visual effect in the play button area.
- Modified layout structure in `_layout.tsx` and `(stack)/_layout.tsx` to ensure consistent background and overflow behavior.
- Enhanced the animated stack with dynamic border radius based on scaling.

Signed-off-by: Innei <tukon479@gmail.com>
---
 .../entry-list/templates/EntryNormalItem.tsx  | 10 ++++---
 apps/mobile/src/screens/(stack)/_layout.tsx   | 19 ++++++++----
 apps/mobile/src/screens/_layout.tsx           | 29 +++++++++----------
 3 files changed, 34 insertions(+), 24 deletions(-)

diff --git a/apps/mobile/src/modules/entry-list/templates/EntryNormalItem.tsx b/apps/mobile/src/modules/entry-list/templates/EntryNormalItem.tsx
index 66ed85661..b535c907a 100644
--- a/apps/mobile/src/modules/entry-list/templates/EntryNormalItem.tsx
+++ b/apps/mobile/src/modules/entry-list/templates/EntryNormalItem.tsx
@@ -2,10 +2,11 @@ import { FeedViewType } from "@follow/constants"
 import { formatEstimatedMins } from "@follow/utils"
 import { router } from "expo-router"
 import { useCallback, useEffect } from "react"
-import { ActivityIndicator, Text, TouchableOpacity, View } from "react-native"
+import { ActivityIndicator, StyleSheet, Text, TouchableOpacity, View } from "react-native"
 import ReAnimated, { useAnimatedStyle, useSharedValue, withSpring } from "react-native-reanimated"
 
 import { useUISettingKey } from "@/src/atoms/settings/ui"
+import { ThemedBlurView } from "@/src/components/common/ThemedBlurView"
 import { preloadWebViewEntry } from "@/src/components/native/webview/EntryContentWebView"
 import { RelativeDateTime } from "@/src/components/ui/datetime/RelativeDateTime"
 import { FeedIcon } from "@/src/components/ui/icon/feed-icon"
@@ -127,7 +128,7 @@ export function EntryNormalItem({ entryId, extraData }: { entryId: string; extra
                     uri: image,
                   }}
                   blurhash={blurhash}
-                  className="border-secondary-system-background size-24 rounded-md border"
+                  className="border-secondary-system-background size-24 overflow-hidden rounded-lg border"
                   contentFit="cover"
                 />
               ) : (
@@ -156,7 +157,8 @@ export function EntryNormalItem({ entryId, extraData }: { entryId: string; extra
                   })
                 }}
               >
-                <View className="bg-gray-6/50 rounded-full p-2">
+                <View className="overflow-hidden rounded-full p-2">
+                  <ThemedBlurView style={StyleSheet.absoluteFillObject} intensity={30} />
                   {isPlaying ? (
                     <PauseCuteFiIcon color="white" width={24} height={24} />
                   ) : isLoading ? (
@@ -222,7 +224,7 @@ const AspectRatioImage = ({
             height: scaledHeight,
           }}
           blurhash={blurhash}
-          className="border-secondary-system-background border"
+          className="border-secondary-system-background rounded-md border"
           contentFit="cover"
         />
       </View>
diff --git a/apps/mobile/src/screens/(stack)/_layout.tsx b/apps/mobile/src/screens/(stack)/_layout.tsx
index 7e858399b..d0491ccd0 100644
--- a/apps/mobile/src/screens/(stack)/_layout.tsx
+++ b/apps/mobile/src/screens/(stack)/_layout.tsx
@@ -1,11 +1,20 @@
 import { Stack } from "expo-router"
+import Animated, { interpolate, useAnimatedStyle } from "react-native-reanimated"
+import { useSheet } from "react-native-sheet-transitions"
 
 export default function AppRootLayout() {
+  const { scale } = useSheet()
+
+  const style = useAnimatedStyle(() => ({
+    borderRadius: interpolate(scale.value, [0.8, 0.99, 1], [0, 50, 0]),
+  }))
   return (
-    <Stack
-      screenOptions={{
-        headerShown: false,
-      }}
-    />
+    <Animated.View className={"flex-1 overflow-hidden"} style={style}>
+      <Stack
+        screenOptions={{
+          headerShown: false,
+        }}
+      />
+    </Animated.View>
   )
 }
diff --git a/apps/mobile/src/screens/_layout.tsx b/apps/mobile/src/screens/_layout.tsx
index 0cefdc0e7..0229323ac 100644
--- a/apps/mobile/src/screens/_layout.tsx
+++ b/apps/mobile/src/screens/_layout.tsx
@@ -4,14 +4,13 @@ import analytics from "@react-native-firebase/analytics"
 import { Stack, usePathname } from "expo-router"
 import { useColorScheme } from "nativewind"
 import { useEffect } from "react"
-import { useSheet } from "react-native-sheet-transitions"
+import { View } from "react-native"
 
 import { FullWindowOverlay } from "../components/common/FullWindowOverlay"
 import { useIntentHandler } from "../hooks/useIntentHandler"
 import { DebugButton, EnvProfileIndicator } from "../modules/debug"
 import { RootProviders } from "../providers"
 import { usePrefetchSessionUser } from "../store/user/hooks"
-import { getSystemBackgroundColor } from "../theme/utils"
 
 export default function RootLayout() {
   useColorScheme()
@@ -34,27 +33,28 @@ export default function RootLayout() {
   }, [pathname])
 
   return (
-    <RootProviders>
-      <Session />
-      <AnimatedStack />
+    <View className="flex-1 bg-black">
+      <RootProviders>
+        <Session />
+        <AnimatedStack />
 
-      {__DEV__ && <DebugButton />}
-      <FullWindowOverlay>
-        <EnvProfileIndicator />
-      </FullWindowOverlay>
-    </RootProviders>
+        {__DEV__ && <DebugButton />}
+        <FullWindowOverlay>
+          <EnvProfileIndicator />
+        </FullWindowOverlay>
+      </RootProviders>
+    </View>
   )
 }
 
 function AnimatedStack() {
-  const systemBackgroundColor = getSystemBackgroundColor()
-  const { isScaling } = useSheet()
-
   return (
     <Stack
       screenOptions={{
-        contentStyle: { backgroundColor: systemBackgroundColor },
         headerShown: false,
+        contentStyle: {
+          backgroundColor: "#000",
+        },
       }}
     >
       <Stack.Screen
@@ -62,7 +62,6 @@ function AnimatedStack() {
         options={{
           title: "Follow",
           headerShown: false,
-          contentStyle: isScaling ? { borderRadius: 50, overflow: "hidden" } : {},
         }}
       />
       <Stack.Screen name="(headless)" options={{ headerShown: false, title: "Follow" }} />