fix: add beta toggle in landscape mode (#20187)

Co-authored-by: shenlong-tanwen <139912620+shalong-tanwen@users.noreply.github.com>

mobile/lib/pages/common/settings.page.dart

@@ -2,21 +2,27 @@ import 'package:auto_route/auto_route.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_hooks/flutter_hooks.dart' hide Store;
+import 'package:immich_mobile/entities/store.entity.dart';
 import 'package:immich_mobile/extensions/build_context_extensions.dart';
 import 'package:immich_mobile/routing/router.dart';
 import 'package:immich_mobile/widgets/settings/advanced_settings.dart';
 import 'package:immich_mobile/widgets/settings/asset_list_settings/asset_list_settings.dart';
 import 'package:immich_mobile/widgets/settings/asset_viewer_settings/asset_viewer_settings.dart';
 import 'package:immich_mobile/widgets/settings/backup_settings/backup_settings.dart';
+import 'package:immich_mobile/widgets/settings/beta_sync_settings/beta_sync_settings.dart';
 import 'package:immich_mobile/widgets/settings/beta_timeline_list_tile.dart';
 import 'package:immich_mobile/widgets/settings/language_settings.dart';
 import 'package:immich_mobile/widgets/settings/networking_settings/networking_settings.dart';
 import 'package:immich_mobile/widgets/settings/notification_setting.dart';
 import 'package:immich_mobile/widgets/settings/preference_settings/preference_setting.dart';
-import 'package:immich_mobile/entities/store.entity.dart';
 import 'package:immich_mobile/widgets/settings/settings_card.dart';
 
 enum SettingSection {
+  beta(
+    'beta_sync',
+    Icons.sync_outlined,
+    "beta_sync_subtitle",
+  ),
   advanced(
     'advanced',
     Icons.build_outlined,
@@ -63,6 +69,7 @@ enum SettingSection {
   final IconData icon;
 
   Widget get widget => switch (this) {
+        SettingSection.beta => const _BetaLandscapeToggle(),
         SettingSection.advanced => const AdvancedSettings(),
         SettingSection.assetViewer => const AssetViewerSettings(),
         SettingSection.backup => const BackupSettings(),
@@ -98,29 +105,32 @@ class _MobileLayout extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     final List<Widget> settings = SettingSection.values
-        .map(
-          (setting) => SettingsCard(
-            title: setting.title.tr(),
-            subtitle: setting.subtitle.tr(),
-            icon: setting.icon,
-            settingRoute: SettingsSubRoute(section: setting),
-          ),
+        .expand(
+          (setting) => setting == SettingSection.beta
+              ? [
+                  const BetaTimelineListTile(),
+                  if (Store.isBetaTimelineEnabled)
+                    SettingsCard(
+                      icon: Icons.sync_outlined,
+                      title: 'beta_sync'.tr(),
+                      subtitle: 'beta_sync_subtitle'.tr(),
+                      settingRoute: const BetaSyncSettingsRoute(),
+                    ),
+                ]
+              : [
+                  SettingsCard(
+                    title: setting.title.tr(),
+                    subtitle: setting.subtitle.tr(),
+                    icon: setting.icon,
+                    settingRoute: SettingsSubRoute(section: setting),
+                  ),
+                ],
         )
         .toList();
     return ListView(
       physics: const ClampingScrollPhysics(),
       padding: const EdgeInsets.only(top: 10.0, bottom: 56),
-      children: [
-        const BetaTimelineListTile(),
-        if (Store.isBetaTimelineEnabled)
-          SettingsCard(
-            icon: Icons.sync_outlined,
-            title: 'beta_sync'.tr(),
-            subtitle: 'beta_sync_subtitle'.tr(),
-            settingRoute: const BetaSyncSettingsRoute(),
-          ),
-        ...settings,
-      ],
+      children: [...settings],
     );
   }
 }
@@ -137,20 +147,20 @@ class _TabletLayout extends HookWidget {
         Expanded(
           flex: 2,
           child: CustomScrollView(
-            slivers: SettingSection.values
-                .map(
-                  (s) => SliverToBoxAdapter(
-                    child: ListTile(
-                      title: Text(s.title).tr(),
-                      leading: Icon(s.icon),
-                      selected: s.index == selectedSection.value.index,
-                      selectedColor: context.primaryColor,
-                      selectedTileColor: context.themeData.highlightColor,
-                      onTap: () => selectedSection.value = s,
-                    ),
+            slivers: [
+              ...SettingSection.values.map(
+                (s) => SliverToBoxAdapter(
+                  child: ListTile(
+                    title: Text(s.title).tr(),
+                    leading: Icon(s.icon),
+                    selected: s.index == selectedSection.value.index,
+                    selectedColor: context.primaryColor,
+                    selectedTileColor: context.themeData.highlightColor,
+                    onTap: () => selectedSection.value = s,
                   ),
-                )
-                .toList(),
+                ),
+              ),
+            ],
           ),
         ),
         const VerticalDivider(width: 1),
@@ -163,6 +173,22 @@ class _TabletLayout extends HookWidget {
   }
 }
 
+class _BetaLandscapeToggle extends HookWidget {
+  const _BetaLandscapeToggle();
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      mainAxisAlignment: MainAxisAlignment.start,
+      children: [
+        const SizedBox(height: 100, child: BetaTimelineListTile()),
+        if (Store.isBetaTimelineEnabled)
+          const Expanded(child: BetaSyncSettings()),
+      ],
+    );
+  }
+}
+
 @RoutePage()
 class SettingsSubPage extends StatelessWidget {
   const SettingsSubPage(this.section, {super.key});