From bd546b47d2a98fd53f0ecdd8730e6fe7def76d4e Mon Sep 17 00:00:00 2001 From: Jinjing <6427696+AmethystLiang@users.noreply.github.com> Date: Wed, 17 Jun 2026 19:21:42 -0700 Subject: [PATCH] Redesign mobile driver overlay layout and clarify action copy (#5647) Clarify the mobile-driving experience by updating outdated terminology and making actions more precise. Generic "Mobile" references are replaced with "Phone", and action buttons now explicitly distinguish between "this" terminal and "all" terminals. Also introduces a modern card layout featuring a smartphone icon badge and a live status indicator, complete with updated locales, tests, and a standalone HTML preview. --- config/scripts/locale-ja-value-overrides.mjs | 1 + mobile/app/terminal-settings.tsx | 2 +- previews/mobile-driver-overlay-preview.html | 523 ++++++++++++++++++ .../settings/MobileAutoRestoreFitSection.tsx | 2 +- .../MobileDriverOverlay.test.tsx | 19 +- .../terminal-pane/MobileDriverOverlay.tsx | 88 ++- src/renderer/src/i18n/locales/en.json | 15 +- src/renderer/src/i18n/locales/es.json | 15 +- src/renderer/src/i18n/locales/ja.json | 15 +- src/renderer/src/i18n/locales/ko.json | 15 +- src/renderer/src/i18n/locales/zh.json | 15 +- tests/e2e/mobile-banner.spec.ts | 30 +- 12 files changed, 675 insertions(+), 65 deletions(-) create mode 100644 previews/mobile-driver-overlay-preview.html diff --git a/config/scripts/locale-ja-value-overrides.mjs b/config/scripts/locale-ja-value-overrides.mjs index fbe5f208f..7f9eeb60a 100644 --- a/config/scripts/locale-ja-value-overrides.mjs +++ b/config/scripts/locale-ja-value-overrides.mjs @@ -210,6 +210,7 @@ export const JA_VALUE_OVERRIDES = { Ding: 'ディン', 'Take back': '操作を取り戻す', 'Mobile driving': 'モバイルで操作中', + 'Phone driving': 'スマホ操作中', 'Mobile is driving this browser': 'モバイルがこのブラウザを操作しています', 'Wants to run': '実行をリクエスト中', 'No states found': 'ステータスが見つかりません', diff --git a/mobile/app/terminal-settings.tsx b/mobile/app/terminal-settings.tsx index 81367c7f7..261293e99 100644 --- a/mobile/app/terminal-settings.tsx +++ b/mobile/app/terminal-settings.tsx @@ -277,7 +277,7 @@ export default function TerminalSettingsScreen() { While you're using a terminal on your phone, Orca shrinks it to fit your screen. When you close the app or switch away, this controls whether it stays at phone size (so interactive CLI tools don't reflow) or resizes back to your desktop. You can always - tap Restore on the terminal banner to resize it manually. + use Restore this terminal or Restore all terminals on the banner to resize manually. {hosts.length === 0 ? ( diff --git a/previews/mobile-driver-overlay-preview.html b/previews/mobile-driver-overlay-preview.html new file mode 100644 index 000000000..8c300f3dc --- /dev/null +++ b/previews/mobile-driver-overlay-preview.html @@ -0,0 +1,523 @@ + + + + + + Mobile Driver Overlay — Orca Preview + + + +
+

Mobile Driver Overlay — production layout preview

+
+ + + +
+
+ +
+
+
+
+ bash — fix-phone-resizing +
+ +
+ + + + + + + + + + +
+
+
+
+ + + + \ No newline at end of file diff --git a/src/renderer/src/components/settings/MobileAutoRestoreFitSection.tsx b/src/renderer/src/components/settings/MobileAutoRestoreFitSection.tsx index 33182b089..5560189db 100644 --- a/src/renderer/src/components/settings/MobileAutoRestoreFitSection.tsx +++ b/src/renderer/src/components/settings/MobileAutoRestoreFitSection.tsx @@ -26,7 +26,7 @@ export function MobileAutoRestoreFitSection({

{translate( 'auto.components.settings.MobilePane.35100bca5d', - "While you're using a terminal on your phone, Orca shrinks it to fit your phone screen. When you close the app or switch away, this controls whether it stays at phone size (so interactive CLI tools don't reflow) or resizes back to your desktop. You can always click Restore on the terminal banner to resize it manually." + "While you're using a terminal on your phone, Orca shrinks it to fit your phone screen. When you close the app or switch away, this controls whether it stays at phone size (so interactive CLI tools don't reflow) or resizes back to your desktop. You can always use Restore this terminal or Restore all terminals on the banner to resize manually." )}