top bar gone :0

js/app/components/mobile/chat.tsx

···
   useSharedValue,
   withSpring,
 } from "react-native-reanimated";
-import { useResponsiveLayout } from "./useResponsiveLayout";
 
 import { useNavigation } from "@react-navigation/native";
 import { usePDSAgent } from "@streamplace/components/src/streamplace-store/xrpc";
···
 }
 
 function ChatPanel() {
-  const { shouldShowChatSidePanel, safeAreaInsets } = useResponsiveLayout();
   const { profile } = useLivestreamInfo();
   const handle = useHandle();
 

js/app/components/mobile/player.tsx

···
   Text,
   usePlayerDimensions,
   usePlayerStore,
+  useSegmentDimensions,
   View,
 } from "@streamplace/components";
 import { gap, h, pt, w } from "@streamplace/components/src/lib/theme/atoms";
···
     screenWidth,
     contentWidth,
     availableHeight,
+    safeAreaInsets,
   } = useResponsiveLayout({
     sidebarWidth: sb.animatedWidth,
     sidebarHidden: !sb.isActive,
···
 
   // content info
   const { width, height } = usePlayerDimensions();
+
+  const { isPlayerRatioGreater } = useSegmentDimensions();
 
   // Calculate aspect ratio and determine if we're in desktop mode
   const aspectRatio = width > 0 && height > 0 ? width / height : 16 / 9;
···
             : {
                 flex: 1,
               },
+          { paddingTop: isPlayerRatioGreater ? safeAreaInsets.top : 0 },
         ]}
       >
         <PlayerInnerInner {...props}>

js/app/components/mobile/ui.tsx

···
                 >
                   <ChevronLeft color="white" />
                 </Pressable>
-                {shouldShowFloatingMetrics && (
-                  <>
-                    <Image
-                      source={
-                        profile?.did
-                          ? { url: avatars[profile?.did]?.avatar }
-                          : require("assets/images/goose.png")
-                      }
-                      width={32}
-                      height={32}
-                      style={[
-                        {
-                          width: 36,
-                          height: 36,
-                          backgroundColor: "green",
-                        },
-                        { borderRadius: 999 },
-                        borders.width.thin,
-                        borders.color.gray[700],
-                      ]}
-                    />
-                    <Text>{profile?.handle}</Text>
-                  </>
-                )}
+                <Image
+                  source={
+                    profile?.did
+                      ? { url: avatars[profile?.did]?.avatar }
+                      : require("assets/images/goose.png")
+                  }
+                  width={32}
+                  height={32}
+                  style={[
+                    {
+                      width: 36,
+                      height: 36,
+                      backgroundColor: "green",
+                    },
+                    { borderRadius: 999 },
+                    borders.width.thin,
+                    borders.color.gray[700],
+                  ]}
+                />
+                <Text>{profile?.handle}</Text>
               </View>
             </View>
 

js/app/src/router.tsx

···
         options={{
           headerTitle: "Stream",
           title: "Streamplace Stream",
+          headerShown: false,
         }}
       />
     </Stack.Navigator>