History

refactor(mobile): name the iOS nav bar height fallback (#6589)

Pavlo Trinko committed 3 months ago

Commit 6ae44b41 parent 4a2f8b05 files · +18 −7Browse files

Unified · Split

5 files
  1. apps/mobile/src/features/files/FileTreeBrowser.tsx +2 −1
  2. apps/mobile/src/features/review/ReviewSheet.tsx +5 −2
  3. apps/mobile/src/features/threads/ThreadDetailScreen.tsx +2 −1
  4. apps/mobile/src/features/threads/ThreadFeed.tsx +3 −2
  5. apps/mobile/src/lib/layoutMetrics.ts +6 −1
apps/mobile/src/features/files/FileTreeBrowser.tsx+2−1
@@ -8,6 +8,7 @@ import { AppText as Text } from "../../components/AppText"; · 7 unmodified lines
88 import { PierreEntryIcon } from "../../components/PierreEntryIcon";
99 import { cn } from "../../lib/cn";
1010 import { useThemeColor } from "../../lib/useThemeColor";
11+import { IOS_NAV_BAR_HEIGHT } from "../../lib/layoutMetrics";
1112 import { NATIVE_LIQUID_GLASS_SUPPORTED } from "../../native/native-glass";
1213 import {
1314 buildFileTree,
@@ -123,7 +124,7 @@ export function FileTreeBrowser(props: { · 109 unmodified lines
123124 const insets = useSafeAreaInsets();
124125 // Native transparent-header height ≈ safe-area top + nav bar (~44). Matches the
125126 // observed adjustedContentInset bottom (~102) seen in the native trace.
126− const headerInset = NATIVE_LIQUID_GLASS_SUPPORTED ? insets.top + 44 : 0;
127+ const headerInset = NATIVE_LIQUID_GLASS_SUPPORTED ? insets.top + IOS_NAV_BAR_HEIGHT : 0;
127128 const iconColor = String(useThemeColor("--color-icon-muted"));
128129 const { onPreviewFile, onSelectFile, selectedPath: controlledSelectedPath } = props;
129130 const controlledSelectedPathRef = useRef(controlledSelectedPath);
apps/mobile/src/features/review/ReviewSheet.tsx+5−2
@@ -39,6 +39,7 @@ import { environmentCatalog } from "../../connection/catalog"; · 38 unmodified lines
3939 import { useEnvironmentPresentation } from "../../state/presentation";
4040 import { useAtomCommand } from "../../state/use-atom-command";
4141 import { useThemeColor } from "../../lib/useThemeColor";
42+import { IOS_NAV_BAR_HEIGHT } from "../../lib/layoutMetrics";
4243 import { useThreadDraftForThread } from "../../state/use-thread-composer-state";
4344 import { EnvironmentConnectionNotice } from "../connection/EnvironmentConnectionNotice";
4445 import {
@@ -277,9 +278,11 @@ function ReviewFileNavigator({ · 232 unmodified lines
277278 // The nested native header is translucent; start the list below it so
278279 // the scroll-edge effect can sample the content (same treatment as
279280 // FileTreeBrowser in the Files pane).
280− paddingTop: Platform.OS === "ios" ? insets.top + 44 + 8 : 8,
281+ paddingTop: Platform.OS === "ios" ? insets.top + IOS_NAV_BAR_HEIGHT + 8 : 8,
281282 }}
282− scrollIndicatorInsets={Platform.OS === "ios" ? { top: insets.top + 44 } : undefined}
283+ scrollIndicatorInsets={
284+ Platform.OS === "ios" ? { top: insets.top + IOS_NAV_BAR_HEIGHT } : undefined
285+ }
283286 renderItem={renderFile}
284287 />
285288 );
apps/mobile/src/features/threads/ThreadDetailScreen.tsx+2−1
@@ -57,6 +57,7 @@ import type { ComposerEditorHandle } from "../../components/ComposerEditor"; · 56 unmodified lines
5757 import type { StatusTone } from "../../components/StatusPill";
5858 import type { DraftComposerImageAttachment } from "../../lib/composerImages";
5959 import { CHAT_CONTENT_MAX_WIDTH, type LayoutVariant } from "../../lib/layout";
60+import { IOS_NAV_BAR_HEIGHT } from "../../lib/layoutMetrics";
6061 import { scopedThreadKey } from "../../lib/scopedEntities";
6162 import type {
6263 PendingApproval,
@@ -249,7 +250,7 @@ export const ThreadDetailScreen = memo(function ThreadDetailScreen(props: Thread · 186 unmodified lines
249250 }
250251 }, []);
251252 const windowHeight = useWindowDimensions().height;
252− const navigationHeaderHeight = useContext(HeaderHeightContext) || insets.top + 44;
253+ const navigationHeaderHeight = useContext(HeaderHeightContext) || insets.top + IOS_NAV_BAR_HEIGHT;
253254 const agentLabel = `${props.selectedThread.modelSelection.instanceId} agent`;
254255 const selectedThreadKey = scopedThreadKey(props.environmentId, props.selectedThread.id);
255256 const composerEditorRef = useRef<ComposerEditorHandle>(null);
apps/mobile/src/features/threads/ThreadFeed.tsx+3−2
@@ -47,6 +47,7 @@ import ImageViewing from "react-native-image-viewing"; · 46 unmodified lines
4747 import { useSafeAreaInsets } from "react-native-safe-area-context";
4848 import Animated, { FadeIn, FadeInUp, type SharedValue } from "react-native-reanimated";
4949 import { useThemeColor } from "../../lib/useThemeColor";
50+import { IOS_NAV_BAR_HEIGHT } from "../../lib/layoutMetrics";
5051 import { useFontFamily } from "../../lib/useFontFamily";
5152 import { scopedThreadKey } from "../../lib/scopedEntities";
5253 import { copyTextWithHaptic } from "../../lib/copyTextWithHaptic";
@@ -1396,7 +1397,7 @@ export const ThreadFeed = memo(function ThreadFeed(props: ThreadFeedProps) { · 1343 unmodified lines
13961397 const userBubbleMaxWidth = contentWidth * 0.85;
13971398 const reviewCommentBubbleWidth = Math.min(Math.max(280, contentWidth * 0.85), contentWidth);
13981399 const insets = useSafeAreaInsets();
1399− const topContentInset = props.contentTopInset ?? insets.top + 44;
1400+ const topContentInset = props.contentTopInset ?? insets.top + IOS_NAV_BAR_HEIGHT;
14001401 const bottomContentInset = props.contentBottomInset ?? 18;
14011402 const usesNativeAutomaticInsets =
14021403 props.usesAutomaticContentInsets === true && Platform.OS === "ios";
@@ -1409,7 +1410,7 @@ export const ThreadFeed = memo(function ThreadFeed(props: ThreadFeedProps) { · 6 unmodified lines
14091410 // header-providing screen) and fall back to the standard iOS bar height.
14101411 const navigationHeaderHeight = useContext(HeaderHeightContext);
14111412 const anchorTopInset = usesNativeAutomaticInsets
1412− ? navigationHeaderHeight || insets.top + 44
1413+ ? navigationHeaderHeight || insets.top + IOS_NAV_BAR_HEIGHT
14131414 : topContentInset;
14141415
14151416 const iconSubtleColor = useThemeColor("--color-icon-subtle");
apps/mobile/src/lib/layoutMetrics.ts+6−1
@@ -5,7 +5,12 @@ export const HOME_HORIZONTAL_INSET = 20; · 4 unmodified lines
55 export const IPAD_HOME_TITLE_OFFSET = 10;
66
77 /**
8− * Height of the app's own header chrome below the safe-area inset, on every
8+ * Height of the native iOS navigation bar below the safe-area inset, used as
9+ * a fallback when the measured HeaderHeightContext is unavailable.
10+ */
11+export const IOS_NAV_BAR_HEIGHT = 44;
12+
13+/* Height of the app's own header chrome below the safe-area inset, on every
914 * platform (matches the `min-h-12` AndroidScreenHeader). Distinct from the
1015 * 44pt native iOS navigation bar.
1116 */