iPhone Duo: story camera and editor clear the home indicator

On the folded screen (466x678) the 9:16 preview is 150pt taller than the
screen, so the camera and editor take their compact bottom layout, whose
offsets were tuned for home-button phones (the only other phones whose
preview overflows). Measured from the screen edge they put the camera's
mode selector, gallery and flip buttons, and the editor's bar, on the home
indicator (layout.intrinsicInsets.bottom, 20pt; the Duo's safeInsets.bottom
is 0).

- Camera: the bottom inset is at least the home indicator's (phones only).
  Every other phone has more room than that below the preview, so only the
  Duo changes. The collage reorder hint stays below the preview, as before.
- Editor: the bar sits 62pt above the indicator instead of the edge. The
  drawing screen's bar keeps matching it (rows above move up with it), and
  the sticker frame helper, shared with the cut-out screen, keeps its
  bottom limit in step. Beside the unfolded status island the bar still
  mirrors the top row, which already clears the indicator.

Checked on the Duo simulator, folded portrait: camera bottom row and
shutter 20pt higher, editor and drawing bars end at about 649pt, above the
indicator at about 669pt. Sticker editor not checked on screen.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

Author: isaac

docs/iphone-duo-layout.md

@@ -112,6 +112,11 @@ These are the user's decisions; a screen that follows them is correct, one that
 - `UIScreen.main` used for layout while unfolded.
 - `widthClass == .regular` treated as iPad.
 - A 9:16 preview taller than the screen (UP, FP) leaving negative space below it for the bottom controls.
+- A bottom row lifted by a constant tuned for home-button phones, until the Duo the only phones whose 9:16 preview is
+  taller than the screen: measured from the screen edge, it lands on the home indicator. The indicator is
+  `layout.intrinsicInsets.bottom` (20pt); the Duo's `safeInsets.bottom` is 0. The story camera keeps its controls above
+  it; the editor's bar, the drawing screen's and the sticker frame sit 62pt above it on the folded screen. Beside the
+  unfolded island the bar mirrors the top row, which already clears it.
 - Something parked just past the content's edge, off-screen on a phone, shows in the strip beside a band: the story
   viewer's resting cube neighbours sat 40pt into FP's strip. Clip to the band (the stories turn the clip off while
   opening and closing, which can start or end at an avatar in the strip).

submodules/DrawingUI/Sources/DrawingScreen.swift

@@ -1179,6 +1179,11 @@ private final class DrawingScreenComponent: CombinedComponent {
                     let mirroredControlsBottomInset = -(environment.statusBarHeight + 31.0 + 30.0)
                     bottomPanelLift = max(0.0, controlsBottomInset - mirroredControlsBottomInset)
                     controlsBottomInset -= bottomPanelLift
+                } else {
+                    // Elsewhere (folded) the editor's bar is 62pt above the home indicator; so is this one, and the rows
+                    // above it move up with it.
+                    bottomPanelLift = environment.safeInsets.bottom
+                    controlsBottomInset -= bottomPanelLift
                 }
             }
             let previewBottomInset = max(0.0, unclampedPreviewBottomInset)

submodules/TelegramUI/Components/CameraScreen/Sources/CameraScreen.swift

@@ -2139,8 +2139,10 @@ private final class CameraScreenComponent: CombinedComponent {
                     availableSize: CGSize(width: availableSize.width - 32.0, height: availableSize.height),
                     transition: context.transition
                 )
+                // Below the viewfinder, not above the bottom inset, which can be the home indicator's (iPhone Duo): a viewfinder
+                // taller than the screen leaves no room for the hint, and it stays off screen as on home-button phones.
                 context.add(collageReorderHint
-                    .position(CGPoint(x: availableSize.width / 2.0, y: availableSize.height - environment.safeInsets.bottom + 16.0 + collageReorderHint.size.height / 2.0))
+                    .position(CGPoint(x: availableSize.width / 2.0, y: environment.safeInsets.top + previewHeight + 16.0 + collageReorderHint.size.height / 2.0))
                     .appear(.default(alpha: true))
                     .disappear(.default(alpha: true))
                 )
@@ -3747,7 +3749,13 @@ public class CameraScreenImpl: ViewController, CameraScreen {
             }
             // Clamped like the story editor's: a 9:16 viewfinder much taller than the screen (iPhone Duo's unfolded
             // screen in portrait, 238pt over) would otherwise put the bottom controls below the screen.
-            let bottomInset = max(0.0, layout.size.height - previewSize.height - topInset)
+            var bottomInset = max(0.0, layout.size.height - previewSize.height - topInset)
+            if !isTablet {
+                // The bottom controls stay above the home indicator. Below a 9:16 viewfinder that fits there is always more
+                // room than the indicator takes; one taller than the screen leaves none, which until iPhone Duo only
+                // happened on home-button phones (its folded screen, 150pt over, put the mode selector on the indicator).
+                bottomInset = max(bottomInset, layout.intrinsicInsets.bottom)
+            }
 
             let panelWidth: CGFloat
             let previewFrame: CGRect

submodules/TelegramUI/Components/MediaEditorScreen/Sources/MediaCutoutScreen.swift

@@ -24,19 +24,25 @@ private final class MediaCutoutScreenComponent: Component {
 
     let context: AccountContext
     let mediaEditor: MediaEditor
+    let homeIndicatorInset: CGFloat
 
     init(
         context: AccountContext,
-        mediaEditor: MediaEditor
+        mediaEditor: MediaEditor,
+        homeIndicatorInset: CGFloat
     ) {
         self.context = context
         self.mediaEditor = mediaEditor
+        self.homeIndicatorInset = homeIndicatorInset
     }
 
     static func ==(lhs: MediaCutoutScreenComponent, rhs: MediaCutoutScreenComponent) -> Bool {
         if lhs.context !== rhs.context {
             return false
         }
+        if lhs.homeIndicatorInset != rhs.homeIndicatorInset {
+            return false
+        }
         return true
     }
 
@@ -430,7 +436,7 @@ private final class MediaCutoutScreenComponent: Component {
                 // whole screen (iPhone Duo) that is not the visible area: it starts at the top, 44pt higher on a screen
                 // under 680pt, as in the editor's sticker mode.
                 var overlayFrame = previewContainerFrame
-                if !isTablet, let stickerPreviewFrame = mediaEditorStickerPreviewFrame(screenSize: availableSize, safeInsets: environment.safeInsets, reservedCorners: environment.reservedCorners, statusBarHeight: environment.statusBarHeight, hasStatusIsland: environment.navigationBarTrailingButtonsInset > 0.0) {
+                if !isTablet, let stickerPreviewFrame = mediaEditorStickerPreviewFrame(screenSize: availableSize, safeInsets: environment.safeInsets, reservedCorners: environment.reservedCorners, statusBarHeight: environment.statusBarHeight, hasStatusIsland: environment.navigationBarTrailingButtonsInset > 0.0, homeIndicatorInset: component.homeIndicatorInset) {
                     // iPhone Duo: the editor's narrowed sticker preview.
                     overlayFrame = stickerPreviewFrame
                 } else if previewSize.height > availableSize.height + 30.0 {
@@ -608,7 +614,8 @@ final class MediaCutoutScreen: ViewController {
                 component: AnyComponent(
                     MediaCutoutScreenComponent(
                         context: self.context,
-                        mediaEditor: controller.mediaEditor
+                        mediaEditor: controller.mediaEditor,
+                        homeIndicatorInset: layout.intrinsicInsets.bottom
                     )
                 ),
                 environment: {

submodules/TelegramUI/Components/MediaEditorScreen/Sources/MediaEditorScreen.swift

@@ -64,16 +64,17 @@ import MediaAssetsContext
 /// preview is narrowed and placed with the frame in that space. The sticker is the canvas-centred square either way, so
 /// only the preview's scale changes. Returns the preview's frame on iPhone Duo (reserved corners), nil elsewhere, where
 /// the usual placement is kept.
-func mediaEditorStickerPreviewFrame(screenSize: CGSize, safeInsets: UIEdgeInsets, reservedCorners: ContainerViewLayoutCorners, statusBarHeight: CGFloat, hasStatusIsland: Bool) -> CGRect? {
+func mediaEditorStickerPreviewFrame(screenSize: CGSize, safeInsets: UIEdgeInsets, reservedCorners: ContainerViewLayoutCorners, statusBarHeight: CGFloat, hasStatusIsland: Bool, homeIndicatorInset: CGFloat) -> CGRect? {
     if reservedCorners == .none {
         return nil
     }
     let frameFraction: CGFloat = 0.97
     let spaceAboveFrame: CGFloat = 35.0 + 40.0
     let spaceBelowFrame: CGFloat = 35.0 + 40.0 + 16.0 + 40.0
     // The bottom bar's buttons start 8pt above where the editor's controls inset puts them (see the component's
-    // `controlsBottomInset`: mirrored on the status island's clock line beside the island, 62pt up otherwise).
-    let controlsBottomInset: CGFloat = hasStatusIsland ? -(statusBarHeight + 31.0 + 30.0) : -62.0
+    // `controlsBottomInset`: mirrored on the status island's clock line beside the island, 62pt above the home
+    // indicator otherwise).
+    let controlsBottomInset: CGFloat = hasStatusIsland ? -(statusBarHeight + 31.0 + 30.0) : -62.0 - homeIndicatorInset
     let bottomLimit = screenSize.height + 8.0 + controlsBottomInset - 8.0
     let topLimit = statusBarHeight + 8.0
     let available = bottomLimit - topLimit
@@ -867,6 +868,11 @@ final class MediaEditorScreenComponent: Component {
                         // Beside a status island the bottom bar mirrors the top row (see topRowY): its 44pt buttons
                         // centred compact status height + 31 above the bottom edge, as the drawing screen's are.
                         controlsBottomInset = min(controlsBottomInset, -(environment.statusBarHeight + 31.0 + 30.0))
+                    } else {
+                        // Elsewhere 62pt above the home indicator. The 62pt was set for home-button phones, the only phones
+                        // with a preview taller than the screen until iPhone Duo, whose folded screen it left with the
+                        // buttons on the indicator.
+                        controlsBottomInset -= component.bottomSafeInset
                     }
                     // Beside a status island the bottom buttons keep the top rows' 16pt side inset; so do they on the folded
                     // screen, whose outer corners (59pt) would clip a button 9pt from the edge (iPhone Duo).
@@ -886,7 +892,7 @@ final class MediaEditorScreenComponent: Component {
             // The sticker frame's buttons centre on the frame, which beside a side strip is the band's centre, not the screen's
             // (iPhone Duo folded: an erase and restore pair centred on the screen reached 16pt into the strip).
             var stickerButtonsCenterX: CGFloat = availableSize.width / 2.0
-            if !isTablet, case .stickerEditor = controller.mode, let stickerPreviewFrame = mediaEditorStickerPreviewFrame(screenSize: availableSize, safeInsets: environment.safeInsets, reservedCorners: environment.reservedCorners, statusBarHeight: environment.statusBarHeight, hasStatusIsland: environment.navigationBarTrailingButtonsInset > 0.0) {
+            if !isTablet, case .stickerEditor = controller.mode, let stickerPreviewFrame = mediaEditorStickerPreviewFrame(screenSize: availableSize, safeInsets: environment.safeInsets, reservedCorners: environment.reservedCorners, statusBarHeight: environment.statusBarHeight, hasStatusIsland: environment.navigationBarTrailingButtonsInset > 0.0, homeIndicatorInset: component.bottomSafeInset) {
                 // iPhone Duo: see `mediaEditorStickerPreviewFrame` (the node places the preview the same way).
                 previewSize = stickerPreviewFrame.size
                 previewFrame = stickerPreviewFrame
@@ -6122,7 +6128,7 @@ public final class MediaEditorScreenImpl: ViewController, MediaEditorScreen, UID
             // `mediaEditorStickerPreviewFrame`; the component places them the same way). The insets above stay those of
             // the full-width preview, so the bottom bar keeps its place.
             var stickerPreviewOrigin: CGPoint?
-            if !isTablet, case .stickerEditor = controller.mode, let stickerPreviewFrame = mediaEditorStickerPreviewFrame(screenSize: layout.size, safeInsets: layout.safeInsets, reservedCorners: layout.reservedCorners, statusBarHeight: layout.navigationBarStatusBarHeight ?? 0.0, hasStatusIsland: layout.navigationBarTrailingButtonsInset > 0.0) {
+            if !isTablet, case .stickerEditor = controller.mode, let stickerPreviewFrame = mediaEditorStickerPreviewFrame(screenSize: layout.size, safeInsets: layout.safeInsets, reservedCorners: layout.reservedCorners, statusBarHeight: layout.navigationBarStatusBarHeight ?? 0.0, hasStatusIsland: layout.navigationBarTrailingButtonsInset > 0.0, homeIndicatorInset: layout.intrinsicInsets.bottom) {
                 previewSize = stickerPreviewFrame.size
                 stickerPreviewOrigin = stickerPreviewFrame.origin
             }