feat(mobile): new settings ui

i18n/en.json

@@ -484,6 +484,7 @@
   "authorized_devices": "Authorized Devices",
   "automatic_endpoint_switching_subtitle": "Connect locally over designated Wi-Fi when available and use alternative connections elsewhere",
   "automatic_endpoint_switching_title": "Automatic URL switching",
+  "automatic_endpoint_switching_toggle": "Auto-Switching",
   "autoplay_slideshow": "Autoplay slideshow",
   "back": "Back",
   "back_close_deselect": "Back, close, or deselect",
@@ -517,6 +518,7 @@
   "backup_controller_page_background_description": "Turn on the background service to automatically backup any new assets without needing to open the app",
   "backup_controller_page_background_is_off": "Automatic background backup is off",
   "backup_controller_page_background_is_on": "Automatic background backup is on",
+  "backup_controller_page_background_title": "Background Backup",
   "backup_controller_page_background_turn_off": "Turn off background service",
   "backup_controller_page_background_turn_on": "Turn on background service",
   "backup_controller_page_background_wifi": "Only on Wi-Fi",
@@ -528,6 +530,7 @@
   "backup_controller_page_excluded": "Excluded: ",
   "backup_controller_page_failed": "Failed ({count})",
   "backup_controller_page_filename": "File name: {filename} [{size}]",
+  "backup_controller_page_foreground_title": "Foreground Backup",
   "backup_controller_page_id": "ID: {id}",
   "backup_controller_page_info": "Backup Information",
   "backup_controller_page_none_selected": "None selected",

mobile/lib/extensions/theme_extensions.dart

@@ -22,3 +22,41 @@ extension ColorExtensions on Color {
     );
   }
 }
+
+extension SettingsTextStyles on BuildContext {
+  TextTheme get _textTheme => Theme.of(this).textTheme;
+  ColorScheme get _colors => Theme.of(this).colorScheme;
+  Color get _disabled => Theme.of(this).disabledColor;
+
+  TextStyle get sectionTitle => _textTheme.titleSmall!.copyWith(
+        letterSpacing: -0.25,
+        color: _colors.primary,
+      );
+
+  TextStyle get itemTitle => _textTheme.titleSmall!.copyWith(
+        fontWeight: FontWeight.w500,
+        letterSpacing: 0,
+        color: _colors.onSurface,
+      );
+
+  TextStyle get itemTitleDisabled => itemTitle.copyWith(color: _disabled);
+
+  TextStyle get itemSubtitle => _textTheme.bodyMedium!.copyWith(
+        height: 1.4,
+        letterSpacing: 0,
+        color: _colors.onSurfaceSecondary,
+      );
+
+  TextStyle get itemSubtitleDisabled => itemSubtitle.copyWith(color: _disabled);
+
+  TextStyle get caption => _textTheme.bodySmall!.copyWith(
+        height: 1.4,
+        letterSpacing: 0,
+        color: _colors.onSurfaceSecondary,
+      );
+
+  TextStyle get pageTitle => _textTheme.titleMedium!.copyWith(
+        fontWeight: FontWeight.w600,
+        color: _colors.primary,
+      );
+}

mobile/lib/pages/backup/backup_album_selection.page.dart

@@ -10,7 +10,7 @@ import 'package:immich_mobile/services/app_settings.service.dart';
 import 'package:immich_mobile/utils/hooks/app_settings_update_hook.dart';
 import 'package:immich_mobile/widgets/backup/album_info_card.dart';
 import 'package:immich_mobile/widgets/backup/album_info_list_tile.dart';
-import 'package:immich_mobile/widgets/settings/settings_switch_list_tile.dart';
+import 'package:immich_mobile/widgets/settings/core/setting_switch_list_tile.dart';
 
 @RoutePage()
 class BackupAlbumSelectionPage extends HookConsumerWidget {
@@ -197,7 +197,7 @@ class BackupAlbumSelectionPage extends HookConsumerWidget {
                   ),
                 ),
 
-                SettingsSwitchListTile(
+                SettingSwitchListTile(
                   valueNotifier: enableSyncUploadAlbum,
                   title: "sync_albums".tr(),
                   subtitle: "sync_upload_album_setting_subtitle".tr(),

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

@@ -1,13 +1,16 @@
 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';
 import 'package:immich_mobile/extensions/build_context_extensions.dart';
+import 'package:immich_mobile/extensions/theme_extensions.dart';
+import 'package:immich_mobile/extensions/translate_extensions.dart';
+import 'package:immich_mobile/utils/fade_on_tap.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/core/setting_card.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';
@@ -79,11 +82,9 @@ class SettingsPage extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    context.locale;
     return Scaffold(
       appBar: AppBar(
-        centerTitle: false,
-        title: const Text('settings').tr(),
+        title: Text('settings'.t(context: context), style: context.pageTitle),
       ),
       body: context.isMobile ? const _MobileLayout() : const _TabletLayout(),
     );
@@ -96,84 +97,44 @@ class _MobileLayout extends StatelessWidget {
   Widget build(BuildContext context) {
     return ListView(
       physics: const ClampingScrollPhysics(),
-      padding: const EdgeInsets.symmetric(vertical: 10.0),
-      children: SettingSection.values
-          .map(
-            (setting) => Padding(
-              padding: const EdgeInsets.symmetric(
-                horizontal: 16.0,
-              ),
-              child: Card(
-                elevation: 0,
-                clipBehavior: Clip.antiAlias,
-                color: context.colorScheme.surfaceContainer,
-                shape: const RoundedRectangleBorder(
-                  borderRadius: BorderRadius.all(Radius.circular(16)),
-                ),
-                margin: const EdgeInsets.symmetric(vertical: 4.0),
-                child: ListTile(
-                  contentPadding: const EdgeInsets.symmetric(
-                    horizontal: 16.0,
-                  ),
-                  leading: Container(
-                    decoration: BoxDecoration(
-                      borderRadius: const BorderRadius.all(Radius.circular(16)),
-                      color: context.isDarkTheme
-                          ? Colors.black26
-                          : Colors.white.withAlpha(100),
-                    ),
-                    padding: const EdgeInsets.all(16.0),
-                    child: Icon(setting.icon, color: context.primaryColor),
-                  ),
-                  title: Text(
-                    setting.title,
-                    style: context.textTheme.titleMedium!.copyWith(
-                      fontWeight: FontWeight.w600,
-                      color: context.primaryColor,
-                    ),
-                  ).tr(),
-                  subtitle: Text(
-                    setting.subtitle,
-                    style: context.textTheme.labelLarge,
-                  ).tr(),
-                  onTap: () =>
-                      context.pushRoute(SettingsSubRoute(section: setting)),
-                ),
-              ),
-            ),
-          )
-          .toList(),
+      padding: const EdgeInsets.all(16.0),
+      children: [
+        ...SettingSection.values.map(
+          (section) => Padding(
+            padding: const EdgeInsets.only(bottom: 8),
+            child: _MobileSettingsItem(section: section),
+          ),
+        ),
+      ],
     );
   }
 }
 
 class _TabletLayout extends HookWidget {
   const _TabletLayout();
+
   @override
   Widget build(BuildContext context) {
     final selectedSection =
         useState<SettingSection>(SettingSection.values.first);
 
     return Row(
-      mainAxisAlignment: MainAxisAlignment.start,
       children: [
         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,
-                    ),
-                  ),
-                )
-                .toList(),
+          child: ListView.builder(
+            itemCount: SettingSection.values.length,
+            itemBuilder: (context, index) {
+              final section = SettingSection.values[index];
+              return Padding(
+                padding: const EdgeInsets.symmetric(horizontal: 8.0),
+                child: _TabletSettingsItem(
+                  section: section,
+                  isSelected: section == selectedSection.value,
+                  onTap: () => selectedSection.value = section,
+                ),
+              );
+            },
           ),
         ),
         const VerticalDivider(width: 1),
@@ -186,6 +147,79 @@ class _TabletLayout extends HookWidget {
   }
 }
 
+class _MobileSettingsItem extends StatelessWidget {
+  final SettingSection section;
+
+  const _MobileSettingsItem({
+    required this.section,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return SettingCard(
+      child: FadeOnTap(
+        onTap: () => context.pushRoute(SettingsSubRoute(section: section)),
+        child: ListTile(
+          shape: const RoundedRectangleBorder(
+            borderRadius: BorderRadius.all(Radius.circular(16)),
+          ),
+          contentPadding: const EdgeInsets.symmetric(horizontal: 16),
+          leading: DecoratedBox(
+            decoration: BoxDecoration(
+              borderRadius: const BorderRadius.all(Radius.circular(12)),
+              color: context.colorScheme.primary.withValues(alpha: 0.1),
+            ),
+            child: Padding(
+              padding: const EdgeInsets.all(8.0),
+              child: Icon(section.icon, color: context.primaryColor),
+            ),
+          ),
+          title: Text(section.title.t(context: context)),
+          titleTextStyle: context.itemTitle,
+          subtitle: Text(section.subtitle.t(context: context)),
+          subtitleTextStyle: context.itemSubtitle,
+          trailing: Icon(
+            Icons.chevron_right,
+            color: context.colorScheme.onSurface.withValues(alpha: 0.4),
+            size: 18,
+          ),
+        ),
+      ),
+    );
+  }
+}
+
+class _TabletSettingsItem extends StatelessWidget {
+  const _TabletSettingsItem({
+    required this.section,
+    required this.isSelected,
+    required this.onTap,
+  });
+
+  final SettingSection section;
+  final bool isSelected;
+  final VoidCallback onTap;
+
+  @override
+  Widget build(BuildContext context) {
+    return FadeOnTap(
+      onTap: onTap,
+      child: ListTile(
+        shape: const RoundedRectangleBorder(
+          borderRadius: BorderRadius.all(Radius.circular(12)),
+        ),
+        title: Text(section.title.t(context: context)),
+        titleTextStyle: context.itemTitle.copyWith(
+          fontWeight: isSelected ? FontWeight.w600 : FontWeight.w500,
+        ),
+        leading: Icon(section.icon),
+        selected: isSelected,
+        selectedTileColor: context.primaryColor.withValues(alpha: 0.1),
+      ),
+    );
+  }
+}
+
 @RoutePage()
 class SettingsSubPage extends StatelessWidget {
   const SettingsSubPage(this.section, {super.key});
@@ -194,11 +228,10 @@ class SettingsSubPage extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    context.locale;
     return Scaffold(
       appBar: AppBar(
-        centerTitle: false,
-        title: Text(section.title).tr(),
+        title:
+            Text(section.title.t(context: context), style: context.pageTitle),
       ),
       body: section.widget,
     );

mobile/lib/theme/theme_data.dart

@@ -88,8 +88,11 @@ ThemeData getThemeData({
       side: BorderSide.none,
     ),
     sliderTheme: const SliderThemeData(
-      thumbShape: RoundSliderThumbShape(enabledThumbRadius: 7),
-      trackHeight: 2.0,
+      thumbShape: RoundSliderThumbShape(enabledThumbRadius: 8),
+      overlayShape: RoundSliderOverlayShape(overlayRadius: 16),
+      // ignore: deprecated_member_use
+      year2023: false,
+      trackHeight: 4,
     ),
     bottomNavigationBarTheme: const BottomNavigationBarThemeData(
       type: BottomNavigationBarType.fixed,