diff --git a/src/renderer/src/assets/mobile-page.css b/src/renderer/src/assets/mobile-page.css
index e586ab9f8b2..4f7c2a92ba9 100644
--- a/src/renderer/src/assets/mobile-page.css
+++ b/src/renderer/src/assets/mobile-page.css
@@ -680,6 +680,42 @@
border-bottom-color: var(--foreground);
}
+/* iOS release-channel switch (Preview vs Stable), shown above the install CTA */
+.mobile-page-root .mp-channel-toggle {
+ display: inline-flex;
+ align-items: center;
+ gap: 4px;
+ margin: -8px 0 18px;
+ flex-wrap: wrap;
+}
+
+.mobile-page-root .mp-channel-toggle button {
+ border: 1px solid var(--border);
+ background: transparent;
+ padding: 4px 12px;
+ border-radius: 999px;
+ color: var(--muted-foreground);
+ font-size: 12px;
+ font-weight: 600;
+ cursor: pointer;
+ transition:
+ background-color 140ms ease,
+ color 140ms ease,
+ border-color 140ms ease;
+}
+
+.mobile-page-root .mp-channel-toggle button.is-active {
+ background: color-mix(in srgb, var(--foreground) 8%, transparent);
+ border-color: color-mix(in srgb, var(--foreground) 20%, transparent);
+ color: var(--foreground);
+}
+
+.mobile-page-root .mp-channel-tagline {
+ margin-left: 6px;
+ color: var(--muted-foreground);
+ font-size: 12px;
+}
+
.mobile-page-root .mp-inline-actions {
display: flex;
align-items: center;
diff --git a/src/renderer/src/components/mobile/MobileHero.tsx b/src/renderer/src/components/mobile/MobileHero.tsx
index 1d7ac73c013..2690f2155f0 100644
--- a/src/renderer/src/components/mobile/MobileHero.tsx
+++ b/src/renderer/src/components/mobile/MobileHero.tsx
@@ -3,6 +3,7 @@ import { cn } from '../../lib/utils'
import type { MobileNetworkInterface } from '../settings/mobile-network-interface-selection'
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../ui/select'
import { AndroidLogo, IosBrandIcon } from './MobileBrandIcons'
+import { getChannelTagline, type InstallCopy, type IosChannel } from './mobile-platform-copy'
export { HeroIntro } from './MobileHeroIntro'
export { HeroPaired, type PairedDevice } from './MobileHeroPairedDevices'
import { translate } from '@/i18n/i18n'
@@ -27,7 +28,9 @@ type HeroFlowProps = {
platform: Platform
onPlatformChange: (next: Platform) => void
installQrUrl: string | null
- installCopy: { description: string; ctaLabel: string; url: string }
+ installCopy: InstallCopy
+ iosChannel: IosChannel
+ onIosChannelChange: (next: IosChannel) => void
onOpenInstallUrl: () => void
onCopyInstallUrl: () => void
pairQrDataUrl: string | null
@@ -51,6 +54,8 @@ export function HeroFlow({
onPlatformChange,
installQrUrl,
installCopy,
+ iosChannel,
+ onIosChannelChange,
onOpenInstallUrl,
onCopyInstallUrl,
pairQrDataUrl,
@@ -110,6 +115,36 @@ export function HeroFlow({
{translate('auto.components.mobile.MobileHero.ac1eb64952', 'Android')}
+ {platform === 'ios' ? (
+
+
+
+ {getChannelTagline(iosChannel)}
+
+ ) : null}