Merge pull request 'feat(timezone): Timezone search bar for the timezone selection screen' (#138) from timezone-bar into master

Reviewed-on: https://git.selfprivacy.org/kherel/selfprivacy.org.app/pulls/138
Reviewed-by: NaiJi ✨ <naiji@udongein.xyz>

assets/translations/en.json

@@ -101,6 +101,7 @@
         "reboot_after_upgrade_hint": "Reboot without prompt after applying changes on server",
         "server_timezone": "Server timezone",
         "select_timezone": "Select timezone",
+        "timezone_search_bar": "Timezone name or time shift value",
         "server_id": "Server ID",
         "status": "Status",
         "cpu": "CPU",

assets/translations/ru.json

@@ -101,6 +101,7 @@
         "reboot_after_upgrade_hint": "Автоматически перезагружать сервер после применения обновлений",
         "server_timezone": "Часовой пояс сервера",
         "select_timezone": "Выберите часовой пояс",
+        "timezone_search_bar": "Имя часового пояса или значение временного сдвига",
         "server_id": "ID сервера",
         "status": "Статус",
         "cpu": "Процессор",

lib/ui/pages/server_details/server_details_screen.dart

@@ -17,17 +17,15 @@ import 'package:selfprivacy/ui/components/brand_icons/brand_icons.dart';
 import 'package:selfprivacy/ui/components/brand_loader/brand_loader.dart';
 import 'package:selfprivacy/ui/components/brand_text/brand_text.dart';
 import 'package:selfprivacy/ui/components/list_tiles/list_tile_on_surface_variant.dart';
+import 'package:selfprivacy/ui/pages/server_details/charts/cpu_chart.dart';
+import 'package:selfprivacy/ui/pages/server_details/charts/network_charts.dart';
 import 'package:selfprivacy/ui/pages/server_storage/storage_card.dart';
-import 'package:selfprivacy/ui/pages/server_details/time_zone/lang.dart';
 import 'package:selfprivacy/utils/extensions/duration.dart';
 import 'package:selfprivacy/utils/extensions/string_extensions.dart';
 import 'package:selfprivacy/utils/named_font_weight.dart';
 import 'package:selfprivacy/utils/route_transitions/basic.dart';
 import 'package:timezone/timezone.dart';
 
-import 'package:selfprivacy/ui/pages/server_details/charts/cpu_chart.dart';
-import 'package:selfprivacy/ui/pages/server_details/charts/network_charts.dart';
-
 part 'charts/chart.dart';
 part 'server_settings.dart';
 part 'text_details.dart';

lib/ui/pages/server_details/time_zone/time_zone.dart

@@ -14,11 +14,21 @@ class SelectTimezone extends StatefulWidget {
 }
 
 class _SelectTimezoneState extends State<SelectTimezone> {
-  final ScrollController controller = ScrollController();
+  final ScrollController scrollController = ScrollController();
+  final TextEditingController searchController = TextEditingController();
+
+  String? timezoneFilterValue;
+  bool isSearching = false;
 
   @override
   void initState() {
     WidgetsBinding.instance.addPostFrameCallback(_afterLayout);
+    searchController.addListener(() {
+      setState(() {
+        timezoneFilterValue =
+            searchController.text.isNotEmpty ? searchController.text : null;
+      });
+    });
     super.initState();
   }
 
@@ -31,7 +41,7 @@ class _SelectTimezoneState extends State<SelectTimezone> {
     print(t);
 
     if (index >= 0) {
-      controller.animateTo(
+      scrollController.animateTo(
         60.0 * index,
         duration: const Duration(milliseconds: 300),
         curve: Curves.easeIn,
@@ -41,41 +51,76 @@ class _SelectTimezoneState extends State<SelectTimezone> {
 
   @override
   void dispose() {
-    controller.dispose();
+    scrollController.dispose();
+    searchController.dispose();
     super.dispose();
   }
 
   @override
   Widget build(final BuildContext context) => Scaffold(
         appBar: AppBar(
-          title: Padding(
+          title: isSearching
+              ? TextField(
+                  readOnly: false,
+                  textAlign: TextAlign.start,
+                  textInputAction: TextInputAction.next,
+                  enabled: true,
+                  controller: searchController,
+                  decoration: InputDecoration(
+                    errorText: null,
+                    hintText: 'server.timezone_search_bar'.tr(),
+                  ),
+                )
+              : Padding(
                   padding: const EdgeInsets.only(top: 4.0),
                   child: Text('server.select_timezone'.tr()),
                 ),
           leading: IconButton(
             icon: const Icon(Icons.arrow_back),
-            onPressed: () => Navigator.of(context).pop(),
+            onPressed: isSearching
+                ? () => setState(() => isSearching = false)
+                : () => Navigator.of(context).pop(),
           ),
+          actions: [
+            if (!isSearching)
+              IconButton(
+                icon: const Icon(Icons.search),
+                onPressed: () => setState(() => isSearching = true),
+              ),
+          ],
         ),
         body: SafeArea(
           child: ListView(
-            controller: controller,
+            controller: scrollController,
             children: locations
+                .where(
+                  (final Location location) => timezoneFilterValue == null
+                      ? true
+                      : location.name
+                              .toLowerCase()
+                              .contains(timezoneFilterValue!) ||
+                          Duration(
+                            milliseconds: location.currentTimeZone.offset,
+                          )
+                              .toDayHourMinuteFormat()
+                              .contains(timezoneFilterValue!),
+                )
+                .toList()
                 .asMap()
-                .map((final key, final value) {
+                .map(
-                  final duration =
+                  (final key, final value) => locationToListTile(key, value),
-                      Duration(milliseconds: value.currentTimeZone.offset);
+                )
-                  final area = value.currentTimeZone.abbreviation
+                .values
-                      .replaceAll(RegExp(r'[\d+()-]'), '');
+                .toList(),
+          ),
+        ),
+      );
 
-                  String timezoneName = value.name;
+  MapEntry<int, Container> locationToListTile(
-                  if (context.locale.toString() == 'ru') {
+      final int key, final Location location) {
-                    timezoneName = russian[value.name] ??
+    final duration = Duration(milliseconds: location.currentTimeZone.offset);
-                        () {
+    final area = location.currentTimeZone.abbreviation
-                          final arr = value.name.split('/')..removeAt(0);
+        .replaceAll(RegExp(r'[\d+()-]'), '');
-                          return arr.join('/');
-                        }();
-                  }
 
     return MapEntry(
       key,
@@ -91,11 +136,8 @@ class _SelectTimezoneState extends State<SelectTimezone> {
         ),
         child: InkWell(
           onTap: () {
-                          context
+            context.read<ServerDetailsCubit>().repository.setTimezone(
-                              .read<ServerDetailsCubit>()
+                  location.name,
-                              .repository
-                              .setTimezone(
-                                timezoneName,
                 );
             Navigator.of(context).pop();
           },
@@ -106,7 +148,7 @@ class _SelectTimezoneState extends State<SelectTimezone> {
               mainAxisAlignment: MainAxisAlignment.center,
               children: [
                 BrandText.body1(
-                                timezoneName,
+                  location.name,
                   style: const TextStyle(
                     fontSize: 16,
                     fontWeight: FontWeight.bold,
@@ -124,10 +166,5 @@ class _SelectTimezoneState extends State<SelectTimezone> {
         ),
       ),
     );
-                })
+  }
-                .values
-                .toList(),
-          ),
-        ),
-      );
 }

lib/ui/pages/server_storage/extending_volume.dart

@@ -32,6 +32,13 @@ class _ExtendingVolumePageState extends State<ExtendingVolumePage> {
     super.initState();
   }
 
+  @override
+  void dispose() {
+    _sizeController.dispose();
+    _priceController.dispose();
+    super.dispose();
+  }
+
   bool _isError = false;
 
   late double _currentSliderGbValue;