Put the reply bar's expand button inside the field on iOS

resources/views/native/commit-detail.blade.php

@@ -113,26 +113,40 @@
             the surface and the hairline above it belong to this column, or the replies show through. On iOS the bar
             is bare and the field is a Liquid Glass plate instead, the way the HIG floats controls over content; the
             hairline stays as a clear 1pt so the bar keeps the height Display::ReplyBarHeight counts on.
+
+            The expand button opens the reply in the composer sheet, which has the photos and preview the bar has no
+            room for. On iOS it sits inside the plate at its trailing edge, where iOS puts a field's own controls, and
+            stays at the bottom as the field grows. On Android it leads the bar, ahead of the field.
         --}}
+        @php($expandInField = \Native\Mobile\Platform::isIos())
         <native:bottom-bar>
             <native:column ref="reply-bar" class="w-full android:bg-theme-surface">
                 <native:column class="w-full h-[1] android:bg-theme-hairline" />
-                <native:row class="w-full pl-2 pr-4 py-2 gap-2 items-center">
-                    {{-- The bar has no room for photos or a preview, so this opens the reply in the composer sheet, which has them. --}}
-                    @include('native.partials.composer-tool', ['ref' => 'reply-expand', 'icon' => \App\Icons\Lucide::Maximize2, 'label' => 'Reply with photos or a preview', 'press' => "replyInSheet('{$commit->id}')"])
-                    {{-- EDGE sends no focus event, so a press on the field is how the page learns you're replying. --}}
-                    <native:column ref="reply-field" class="flex-1 ios:px-4 ios:rounded-[18] ios:glass" @pressUp="replyTapped">
-                        <native:bare-text-input
-                            ref="reply-input"
-                            class="w-full py-2 text-theme-ink"
-                            placeholder="Reply to {{ $commit->author->handle() }}"
-                            native:model.debounce.150ms="reply"
-                            :autofocus="$focusReply"
-                            multiline
-                            :max-lines="5"
-                            :max-length="\App\Devnull\Data\Commit::MaxRawLength"
-                        />
-                    </native:column>
+                <native:row ref="reply-row" class="w-full {{ $expandInField ? 'pl-4' : 'pl-2' }} pr-4 py-2 gap-2 items-center">
+                    @unless ($expandInField)
+                        @include('native.partials.composer-tool', ['ref' => 'reply-expand', 'icon' => \App\Icons\Lucide::Maximize2, 'label' => 'Reply with photos or a preview', 'press' => "replyInSheet('{$commit->id}')"])
+                    @endunless
+                    <native:row ref="reply-plate" class="flex-1 items-end ios:pr-1 ios:rounded-[18] ios:glass">
+                        {{--
+                            EDGE sends no focus event, so a press on the field is how the page learns you're replying.
+                            The expand button is beside it rather than in it, so pressing it doesn't count.
+                        --}}
+                        <native:column ref="reply-field" class="flex-1 ios:pl-4" @pressUp="replyTapped">
+                            <native:bare-text-input
+                                ref="reply-input"
+                                class="w-full py-2 text-theme-ink"
+                                placeholder="Reply to {{ $commit->author->handle() }}"
+                                native:model.debounce.150ms="reply"
+                                :autofocus="$focusReply"
+                                multiline
+                                :max-lines="5"
+                                :max-length="\App\Devnull\Data\Commit::MaxRawLength"
+                            />
+                        </native:column>
+                        @if ($expandInField)
+                            @include('native.partials.composer-tool', ['ref' => 'reply-expand', 'icon' => \App\Icons\Lucide::Maximize2, 'label' => 'Reply with photos or a preview', 'press' => "replyInSheet('{$commit->id}')"])
+                        @endif
+                    </native:row>
                     @include('native.partials.body-counter', ['body' => $reply, 'ref' => 'reply-budget'])
                     <native:button ref="send-reply" :variant="$myColour" size="sm" :disabled="! \App\Devnull\Data\Commit::fits($reply)" @press="sendReply">Reply</native:button>
                 </native:row>

tests/Feature/Screens/CommitDetailTest.php

@@ -104,6 +104,18 @@ function fakeThread(array $commit = [], array $replies = [], array $extra = []):
         ->and(idsDownTo($screen->tree(), 'reply-input'))->toBe($field);
 });
 
+it('puts the expand button inside the reply field on iOS, and ahead of it on Android', function (string $platform, array $row, array $plate) {
+    fakeThread();
+
+    $screen = Native::visit('/log/commits/c2', platform: $platform);
+
+    expect(childRefs($screen, 'reply-row'))->toBe($row)
+        ->and(childRefs($screen, 'reply-plate'))->toBe($plate);
+})->with([
+    'iOS' => ['ios', ['reply-plate', 'send-reply'], ['reply-field', 'reply-expand']],
+    'Android' => ['android', ['reply-expand', 'reply-plate', 'send-reply'], ['reply-field']],
+]);
+
 it('runs the rail from the folded ancestors into the parent, which shows its avatar', function () {
     $ada = userJson(['id' => 'u2', 'handle' => 'ada', 'name' => 'Ada', 'lane' => 1]);
     fakeApi([
@@ -718,7 +730,7 @@ function fakeThread(array $commit = [], array $replies = [], array $extra = []):
         ->and($bar['children'][0]['style']['bg_color'] ?? null)->toBe(config('native-ui.theme.light.surface'))
         ->and($bar['children'][0]['props']['dark_bg_color'] ?? null)->toBe(config('native-ui.theme.dark.surface'))
         ->and($bar['children'][0]['children'][0]['style']['bg_color'] ?? null)->toBe(config('native-ui.theme.light.hairline'))
-        ->and(nodeByRef($screen, 'reply-field')['props']['glass'] ?? null)->toBeNull();
+        ->and(nodeByRef($screen, 'reply-plate')['props']['glass'] ?? null)->toBeNull();
 });
 
 it('leaves the reply bar bare on iOS and floats the field on Liquid Glass', function () {
@@ -730,7 +742,7 @@ function fakeThread(array $commit = [], array $replies = [], array $extra = []):
     expect($bar['children'][0]['ref'] ?? null)->toBe('reply-bar')
         ->and($bar['children'][0]['style']['bg_color'] ?? null)->toBeNull()
         ->and($bar['children'][0]['children'][0]['style']['bg_color'] ?? null)->toBeNull()
-        ->and(nodeByRef($screen, 'reply-field')['props']['glass'] ?? null)->toBe(1);
+        ->and(nodeByRef($screen, 'reply-plate')['props']['glass'] ?? null)->toBe(1);
 });
 
 it('ends the page above the reply bar, and further as the draft grows', function () {