Float the reply field on Liquid Glass on iOS

[KaitoMuraoka]

The reply bar under a commit is a control that floats over the replies as they scroll, but on iOS it was drawn flat: an opaque surface with a hairline on top. The HIG puts controls like this on Liquid Glass, above the content layer, and asks bars not to carry custom backgrounds that fight the system's effects. So on iOS the field becomes a glass plate, the way Messages draws its composer. Android keeps the flat bar, since Material has no glass to match.

What changed

• The reply field gets ios:glass ios:rounded-[18] ios:px-4. It's the regular variant, not clear, since text scrolls behind it. The radius isn't rounded-full because the field grows to five lines, and a capsule that tall bulges at both ends.
• The bar's surface and hairline only paint on Android now (android:bg-theme-surface, android:bg-theme-hairline). On an opaque surface the glass has nothing to show through and reads as a grey pill.
• The hairline stays as a clear 1pt on iOS, so the bar keeps the height Display::ReplyBarHeight counts on and the clearance under the last reply is unchanged.
• The Reply button stays as it is, so there's one glass element and no glass on glass.
• Older iOS gets .regularMaterial instead of glass, through the existing glass fallback.

Tests

The test that the reply bar is painted solid with its hairline now runs on Android and also checks the field has no glass. A new test checks that on iOS the bar and hairline have no background and the field is on glass. The 509 tests in tests/Feature/Screens pass, and Pint is clean. The full suite still stops at AppIconTest, which runs out of memory booting the plugin discovery; it does the same on main.

Screenshot

Before	After

Explanation in Japanese

コミット画面の返信バーは、返信がスクロールする間もその上に浮かぶコントロールです。しかしiOSでは、上部に細い線があるだけの不透明な面として描画されていました。HIGでは、このようなコントロールはコンテンツより手前にLiquid Glassで配置し、システムの効果と競合する独自の背景をバーに持たせないことが推奨されています。そこでiOSでは、Messagesの入力欄のように、返信フィールドをガラスのプレートにします。Materialには対応するガラス表現がないため、Androidでは従来どおりのフラットなバーを維持します。

変更内容

• 返信フィールドに ios:glass ios:rounded-[18] ios:px-4 を設定しました。返信が背後をスクロールするため、clearではなく通常のバリアントを使います。フィールドは最大5行まで伸びるので、両端が膨らんで見える rounded-full ではなく、18ポイントの角丸にしています。
• バーの背景色と上部の細い線は、Androidでのみ描画するようにしました（android:bg-theme-surface、android:bg-theme-hairline）。不透明な面ではガラス越しに何も見えず、灰色のピルのように見えてしまうためです。
• iOSでは細い線を背景のない1ポイントの線として残しました。これにより、バーの高さは引き続き Display::ReplyBarHeight の計算どおりとなり、最後の返信との間隔も変わりません。
• 返信ボタンはそのままです。ガラス要素はフィールドだけにし、ガラスの上にガラスが重ならないようにしています。
• 古いiOSでは、既存の glass フォールバックによって .regularMaterial が使われます。

テスト

返信バーを塗りつぶしと細い線で描画するテストはAndroidで実行するように変更し、フィールドにガラスが適用されていないことも確認します。また、iOSではバーと細い線に背景がなく、フィールドがガラス上にあることを確認するテストを追加しました。

Screens の509件のテストはすべて成功し、Pintも問題ありません。全テストスイートは AppIconTest で停止します。プラグインの検出処理でメモリ不足になりますが、main ブランチでも同じ状況です。

[simonhamp]

cool