diff --git a/src/renderer/src/components/settings/MobilePairingConnectionOptions.test.tsx b/src/renderer/src/components/settings/MobilePairingConnectionOptions.test.tsx index 1ee0009184b..bd7b4989fe9 100644 --- a/src/renderer/src/components/settings/MobilePairingConnectionOptions.test.tsx +++ b/src/renderer/src/components/settings/MobilePairingConnectionOptions.test.tsx @@ -65,8 +65,8 @@ describe('MobilePairingConnectionOptions', () => { const user = userEvent.setup() render() - expect(screen.getByRole('radio', { name: /connect from anywhere/i })).toBeDisabled() - expect(screen.getByRole('radio', { name: /local network only/i })).toBeChecked() + expect(screen.getByRole('switch', { name: /connect from anywhere/i })).toBeDisabled() + expect(screen.getByRole('switch', { name: /connect from anywhere/i })).not.toBeChecked() await user.click(screen.getByRole('button', { name: 'Sign in' })) expect(connect).toHaveBeenCalledOnce() }) @@ -87,27 +87,26 @@ describe('MobilePairingConnectionOptions', () => { render() await waitFor(() => expect(screen.getByText('Ready')).toBeVisible()) - await user.click(screen.getByRole('radio', { name: /local network only/i })) + expect(screen.getByRole('switch', { name: /connect from anywhere/i })).toBeChecked() + await user.click(screen.getByRole('switch', { name: /connect from anywhere/i })) expect(onChange).toHaveBeenCalledWith('local-only') statusListener?.('standby') await waitFor(() => expect(screen.getByText('Available')).toBeVisible()) }) - it('explains the Relay beta and opens both compatible mobile builds', async () => { + it('shows the Relay beta availability inline and opens both compatible mobile builds', async () => { const user = userEvent.setup() render() - await user.hover(screen.getByRole('button', { name: 'About the Orca Relay beta' })) - await waitFor(() => - expect(screen.getByText(/currently available on the iOS TestFlight preview/i)).toBeVisible() - ) + expect(screen.getByText('Beta')).toBeVisible() + expect(screen.getByText('Available on')).toBeVisible() - await user.click(screen.getByRole('button', { name: 'Open TestFlight' })) + await user.click(screen.getByRole('button', { name: 'TestFlight' })) expect(window.api.shell.openUrl).toHaveBeenCalledWith( 'https://testflight.apple.com/join/YjeGMQBA' ) - await user.click(screen.getByRole('button', { name: 'Download Android APK' })) + await user.click(screen.getByRole('button', { name: 'Android APK' })) expect(window.api.shell.openUrl).toHaveBeenCalledWith( 'https://github.com/stablyai/orca/releases/download/mobile-android-v0.0.27/app-release.apk' ) @@ -127,13 +126,12 @@ describe('MobilePairingConnectionOptions', () => { const props = { compact: true, onChange: vi.fn() } const { rerender } = render() - expect(screen.getByRole('radiogroup').children).toHaveLength(2) - expect(screen.getByText('LAN or Tailscale')).toBeVisible() + expect(screen.getByRole('switch', { name: /connect from anywhere/i })).toBeChecked() expect(screen.getByText(/direct connection when available/i)).toBeVisible() await waitFor(() => expect(screen.getByText('Ready')).toBeInTheDocument()) rerender() - expect(screen.getByRole('radiogroup').children).toHaveLength(2) + expect(screen.getByRole('switch', { name: /connect from anywhere/i })).not.toBeChecked() expect(screen.getByText(/without connecting this phone through Orca Relay/i)).toBeVisible() }) }) diff --git a/src/renderer/src/components/settings/MobilePairingConnectionOptions.tsx b/src/renderer/src/components/settings/MobilePairingConnectionOptions.tsx index 1e615922937..b99b63822d3 100644 --- a/src/renderer/src/components/settings/MobilePairingConnectionOptions.tsx +++ b/src/renderer/src/components/settings/MobilePairingConnectionOptions.tsx @@ -8,6 +8,7 @@ import { useAppStore } from '../../store' import type { MobileRelayStatus } from '../../../../shared/mobile-relay-status' import type { MobilePairingConnectionMode } from '../../../../shared/mobile-pairing-connection-mode' import { MobileRelayBetaAvailability } from './MobileRelayBetaAvailability' +import { SettingsRow, SettingsSwitch } from './SettingsFormControls' function relayStatusLabel(status: MobileRelayStatus): string { if (status === 'registered') { @@ -47,6 +48,33 @@ type CompactConnectionOptionsProps = { relayStatus: MobileRelayStatus } +function ConnectionModeSwitch({ + value, + onChange, + signedIn +}: Pick): React.JSX.Element { + return ( + } + control={ + onChange(value === 'automatic' ? 'local-only' : 'automatic')} + /> + } + /> + ) +} + function CompactConnectionOptions({ value, onChange, @@ -58,74 +86,7 @@ function CompactConnectionOptions({ }: CompactConnectionOptionsProps): React.JSX.Element { return (
-

- {translate( - 'auto.components.settings.MobilePairingConnectionOptions.title', - 'How should the new phone connect?' - )} -

-
-
- onChange('automatic')} - className="size-4 shrink-0 accent-primary" - /> - - - - -
- - -
+

@@ -227,115 +188,47 @@ export function MobilePairingConnectionOptions({ return (

-

- {translate( - 'auto.components.settings.MobilePairingConnectionOptions.title', - 'How should the new phone connect?' + +
+

+ {!signedIn + ? translate( + 'auto.components.settings.MobilePairingConnectionOptions.signInDescription', + 'Sign in on this desktop to use Orca Relay.' + ) + : value === 'automatic' + ? translate( + 'auto.components.settings.MobilePairingConnectionOptions.automaticDescription', + 'Orca uses a direct connection when available and Relay otherwise.' + ) + : translate( + 'auto.components.settings.MobilePairingConnectionOptions.localDescription', + 'Uses LAN or Tailscale without connecting this phone through Orca Relay.' + )} +

+ {signedIn ? ( + + {relayStatusLabel(relayStatus)} + + ) : configured ? ( + + ) : ( + + {translate( + 'auto.components.settings.MobilePairingConnectionOptions.unavailable', + 'Unavailable' + )} + )} -

-
-
-
- onChange('automatic')} - className="mt-0.5 size-4 shrink-0 accent-primary" - /> - - - - - - - {signedIn - ? translate( - 'auto.components.settings.MobilePairingConnectionOptions.automaticDescription', - 'Orca uses a direct connection when available and Relay otherwise.' - ) - : translate( - 'auto.components.settings.MobilePairingConnectionOptions.signInDescription', - 'Sign in on this desktop to use Orca Relay.' - )} - - -
- {signedIn ? ( - - {relayStatusLabel(relayStatus)} - - ) : configured ? ( - - ) : ( - - {translate( - 'auto.components.settings.MobilePairingConnectionOptions.unavailable', - 'Unavailable' - )} - - )} -
- -
) diff --git a/src/renderer/src/components/settings/MobileRelayBetaAvailability.tsx b/src/renderer/src/components/settings/MobileRelayBetaAvailability.tsx index 8bde46c1aec..b7f4f946f0e 100644 --- a/src/renderer/src/components/settings/MobileRelayBetaAvailability.tsx +++ b/src/renderer/src/components/settings/MobileRelayBetaAvailability.tsx @@ -1,8 +1,4 @@ -import { Info } from 'lucide-react' import { translate } from '@/i18n/i18n' -import { badgeVariants } from '../ui/badge' -import { Button } from '../ui/button' -import { HoverCard, HoverCardContent, HoverCardTrigger } from '../ui/hover-card' const TESTFLIGHT_URL = 'https://testflight.apple.com/join/YjeGMQBA' const ANDROID_APK_URL = @@ -10,57 +6,35 @@ const ANDROID_APK_URL = export function MobileRelayBetaAvailability(): React.JSX.Element { return ( - - - - - -

- {translate( - 'auto.components.settings.MobileRelayBetaAvailability.availability', - 'Orca Relay is currently available on the iOS TestFlight preview and Android APK.' - )} -

-
- - -
-
-
+ + + {translate('auto.components.settings.MobileRelayBetaAvailability.beta', 'Beta')} + + + + {translate( + 'auto.components.settings.MobileRelayBetaAvailability.availability', + 'Available on' + )} + + + + + ) } diff --git a/src/renderer/src/i18n/locales/en.json b/src/renderer/src/i18n/locales/en.json index c5c8bb05982..e804e0c167b 100644 --- a/src/renderer/src/i18n/locales/en.json +++ b/src/renderer/src/i18n/locales/en.json @@ -9079,9 +9079,9 @@ "MobileRelayBetaAvailability": { "about": "About the Orca Relay beta", "beta": "Beta", - "availability": "Orca Relay is currently available on the iOS TestFlight preview and Android APK.", - "testFlight": "Open TestFlight", - "androidApk": "Download Android APK" + "availability": "Available on", + "testFlight": "TestFlight", + "androidApk": "Android APK" } }, "right": { diff --git a/src/renderer/src/i18n/locales/es.json b/src/renderer/src/i18n/locales/es.json index f38d77ca2ed..098ed7b2f41 100644 --- a/src/renderer/src/i18n/locales/es.json +++ b/src/renderer/src/i18n/locales/es.json @@ -9079,9 +9079,9 @@ "MobileRelayBetaAvailability": { "about": "Acerca de la beta de Orca Relay", "beta": "Beta", - "availability": "Orca Relay está disponible actualmente en la versión preliminar de iOS en TestFlight y en el APK de Android.", - "testFlight": "Abrir TestFlight", - "androidApk": "Descargar APK de Android" + "availability": "Disponible en", + "testFlight": "TestFlight", + "androidApk": "APK de Android" } }, "right": { diff --git a/src/renderer/src/i18n/locales/ja.json b/src/renderer/src/i18n/locales/ja.json index 96fe19968d7..fc8be31f976 100644 --- a/src/renderer/src/i18n/locales/ja.json +++ b/src/renderer/src/i18n/locales/ja.json @@ -9079,9 +9079,9 @@ "MobileRelayBetaAvailability": { "about": "Orca Relay ベータについて", "beta": "ベータ", - "availability": "Orca Relay は現在、iOS TestFlight プレビュー版と Android APK で利用できます。", - "testFlight": "TestFlight を開く", - "androidApk": "Android APK をダウンロード" + "availability": "利用可能:", + "testFlight": "TestFlight", + "androidApk": "Android APK" } }, "right": { diff --git a/src/renderer/src/i18n/locales/ko.json b/src/renderer/src/i18n/locales/ko.json index 23d9eb2dfd6..f22f4971267 100644 --- a/src/renderer/src/i18n/locales/ko.json +++ b/src/renderer/src/i18n/locales/ko.json @@ -9079,9 +9079,9 @@ "MobileRelayBetaAvailability": { "about": "Orca Relay 베타 정보", "beta": "베타", - "availability": "Orca Relay는 현재 iOS TestFlight 미리 보기 및 Android APK에서 사용할 수 있습니다.", - "testFlight": "TestFlight 열기", - "androidApk": "Android APK 다운로드" + "availability": "이용 가능:", + "testFlight": "TestFlight", + "androidApk": "Android APK" } }, "right": { diff --git a/src/renderer/src/i18n/locales/zh.json b/src/renderer/src/i18n/locales/zh.json index e57c52cb7c8..354eef6c882 100644 --- a/src/renderer/src/i18n/locales/zh.json +++ b/src/renderer/src/i18n/locales/zh.json @@ -9079,9 +9079,9 @@ "MobileRelayBetaAvailability": { "about": "关于 Orca Relay 测试版", "beta": "测试版", - "availability": "Orca Relay 目前在 iOS TestFlight 预览版和 Android APK 中提供。", - "testFlight": "打开 TestFlight", - "androidApk": "下载 Android APK" + "availability": "可用平台:", + "testFlight": "TestFlight", + "androidApk": "Android APK" } }, "right": {