Files
orca/mobile/app/_layout.web.tsx
T
Brennan Benson 6a9b1d786f feat(mobile): tap the session title to see its full name, path and host (#30389)
* feat(mobile): tap the session title to see its full name, path and host

A sideways phone caps the title at 160pt beside the tabs, so long worktree names were cut off with no way to read them. Tapping the title now opens a card under the top bar, built like desktop's tab hover card, with the full name, the worktree's path and the host. It fades and slides in over 150ms (fade only with Reduce Motion), and any tap outside closes it.

* fix(mobile): keep the worktree-name reset effect unchanged; type-only View import; lazy card animation value

* fix(mobile): preserve title card bounds and execution host identity

* test(mobile): complete title card platform mocks

* fix(mobile): separate detail card from title trigger

* style(mobile): apply pinned formatter wrapping

* fix(mobile): reopen session details during the closing animation

* style(mobile): wrap the session title imports

* Keep session title activation on one target through card exit

* Host session details above page navigation and retain input scope

* Keep the title target clear as its layout changes

* Clarify title-card types and observer cleanup for checks

* Keep mobile title-card requests and visual exits under one owner

* Make the existing mobile title an explicit web click target

* Keep mobile title details nonmodal through their visual exit

* Follow the active mobile palette in session title details

* Use array syntax for title card motion fixture

* Localize the mobile workspace details hint

* test(mobile): cover title card release to a higher sheet

* Refresh measured mobile web chunk envelope
2026-10-30 13:48:10 -07:00

49 lines
2.0 KiB
TypeScript
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
import { useMemo, useSyncExternalStore } from 'react'
import { useWindowDimensions, View } from 'react-native'
import { Slot, usePathname } from 'expo-router'
import { SafeAreaFrameContext, SafeAreaInsetsContext } from 'react-native-safe-area-context'
import { ZERO_SAFE_AREA_INSETS } from '../src/mobile-web-shell/bridge/bridge-safe-area-insets'
import { DetailCardHostProvider } from '../src/components/detail-card-host'
import { SideSafeArea } from '../src/layout/side-safe-area'
import { usePageBridgeClient } from '../src/transport/client-context.web'
import { colors } from '../src/theme/mobile-theme'
import { themedStyleSheet } from '../src/theme/themed-styles'
import { useMobileColorScheme } from '../src/theme/use-mobile-color-scheme'
import { isOverlayPageRoute } from '../src/new-workspace/overlay-page-route'
// Provide shell insets below ExpoRoot (WebView CSS env insets are zero); pad only sides to avoid DefaultNavigator’s duplicate all-edge SafeAreaView.
export default function PageRootLayout() {
useMobileColorScheme()
const client = usePageBridgeClient()
const insets = useSyncExternalStore(
client.onSafeAreaInsetsUpdate,
() => client.getShellSession()?.safeAreaInsets ?? ZERO_SAFE_AREA_INSETS
)
const { width, height } = useWindowDimensions()
const transparent = isOverlayPageRoute(usePathname())
const frame = useMemo(() => ({ x: 0, y: 0, width, height }), [width, height])
return (
<SafeAreaFrameContext.Provider value={frame}>
<SafeAreaInsetsContext.Provider value={insets}>
<View style={[styles.root, transparent && styles.transparent]}>
<DetailCardHostProvider>
<SideSafeArea>
<Slot />
</SideSafeArea>
</DetailCardHostProvider>
</View>
</SafeAreaInsetsContext.Provider>
</SafeAreaFrameContext.Provider>
)
}
const styles = themedStyleSheet(() => ({
root: {
flex: 1,
backgroundColor: colors.bgBase
},
transparent: {
backgroundColor: 'transparent'
}
}))