feat(timezone): Design the search bar for 'Select Timezone' page

lib/ui/pages/server_details/server_details_screen.dart

@@ -12,23 +12,20 @@ import 'package:selfprivacy/logic/models/auto_upgrade_settings.dart';
 import 'package:selfprivacy/logic/models/job.dart';
 import 'package:selfprivacy/ui/components/brand_button/segmented_buttons.dart';
 import 'package:selfprivacy/ui/components/brand_cards/filled_card.dart';
-import 'package:selfprivacy/ui/components/brand_header/brand_header.dart';
 import 'package:selfprivacy/ui/components/brand_hero_screen/brand_hero_screen.dart';
 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

@@ -18,6 +18,7 @@ class _SelectTimezoneState extends State<SelectTimezone> {
   final TextEditingController searchController = TextEditingController();
 
   String? timezoneFilterValue;
+  bool isSearching = false;
 
   @override
   void initState() {
@@ -57,38 +58,36 @@ class _SelectTimezoneState extends State<SelectTimezone> {
 
   @override
   Widget build(final BuildContext context) => Scaffold(
-        appBar: PreferredSize(
+        appBar: AppBar(
-          preferredSize: const Size.fromHeight(156),
+          title: isSearching
-          child: Column(
+              ? TextField(
-            children: [
+                  readOnly: false,
-              BrandHeader(
+                  textAlign: TextAlign.start,
-                title: 'server.select_timezone'.tr(),
+                  textInputAction: TextInputAction.next,
-              ),
+                  enabled: true,
-              Row(
+                  controller: searchController,
-                children: [
+                  decoration: InputDecoration(
-                  const SizedBox(width: 16),
+                    errorText: null,
-                  SizedBox(
+                    hintText: 'server.timezone_search_bar'.tr(),
-                    height: 52,
-                    child: TextField(
-                      readOnly: false,
-                      textAlign: TextAlign.start,
-                      textInputAction: TextInputAction.next,
-                      enabled: true,
-                      controller: searchController,
-                      decoration: InputDecoration(
-                        border: const OutlineInputBorder(),
-                        errorText: null,
-                        labelText: 'server.timezone_search_bar'.tr(),
-                      ),
-                    ),
                   ),
-                  const SizedBox(width: 16),
+                )
-                  const Icon(Icons.search_outlined),
+              : Padding(
-                  const SizedBox(width: 16),
+                  padding: const EdgeInsets.only(top: 4.0),
-                ],
+                  child: Text('server.select_timezone'.tr()),
-              ),
+                ),
-            ],
+          leading: IconButton(
+            icon: const Icon(Icons.arrow_back),
+            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(