Improve Performance

* Home screen refactoring

* Home screen refactoring

* Fix preview

* Sync preview (#26)

* Sync preview

* Add pagination in home media list

* Add pagination in home media list

* Improve home performance

* Minor fix

app/assets/locales/app_en.arb

@@ -10,10 +10,15 @@
   "common_google_drive": "Google Drive",
   "common_term_and_condition": "Terms and Conditions",
   "common_privacy_policy": "Privacy Policy",
+  "common_today": "Today",
+  "common_yesterday": "Yesterday",
+  "common_tomorrow": "Tomorrow",
 
   "no_internet_connection_error": "No internet connection! Please check your network and try again.",
   "something_went_wrong_error": "Something went wrong! Please try again later.",
   "user_google_sign_in_account_not_found_error": "You haven't signed in with Google account yet. Please sign in with Google account and try again.",
+  "back_up_folder_not_found_error": "Back up folder not found!",
+  "unable_to_open_attachment_error": "Unable to open attachment!",
 
   "on_board_description": "Effortlessly move, share, and organize your photos and videos in a breeze. Access all your clouds in one friendly place. Your moments, your way, simplified for you! 🚀",
 

app/lib/components/app_page.dart

@@ -9,8 +9,11 @@ class AppPage extends StatelessWidget {
   final Widget? leading;
   final Widget? floatingActionButton;
   final Widget? body;
+  final Widget Function(BuildContext context)? bodyBuilder;
   final bool automaticallyImplyLeading;
   final bool? resizeToAvoidBottomInset;
+  final Color? backgroundColor;
+  final Color? barBackgroundColor;
 
   const AppPage({
     super.key,
@@ -21,7 +24,10 @@ class AppPage extends StatelessWidget {
     this.body,
     this.floatingActionButton,
     this.resizeToAvoidBottomInset,
+    this.bodyBuilder,
     this.automaticallyImplyLeading = true,
+    this.barBackgroundColor,
+    this.backgroundColor,
   });
 
   @override
@@ -39,6 +45,7 @@ class AppPage extends StatelessWidget {
                 leading == null
             ? null
             : CupertinoNavigationBar(
+                backgroundColor: barBackgroundColor,
                 leading: leading,
                 middle: titleWidget ?? _title(context),
                 border: null,
@@ -56,10 +63,15 @@ class AppPage extends StatelessWidget {
                     : null,
               ),
         resizeToAvoidBottomInset: resizeToAvoidBottomInset ?? true,
+        backgroundColor: backgroundColor,
         child: Stack(
           alignment: Alignment.bottomRight,
           children: [
-            body ?? const SizedBox(),
+            body ??
+                Builder(
+                  builder: (context) =>
+                      bodyBuilder?.call(context) ?? const SizedBox(),
+                ),
             SafeArea(
               child: Padding(
                 padding: const EdgeInsets.only(right: 16, bottom: 16),
@@ -76,12 +88,18 @@ class AppPage extends StatelessWidget {
                 leading == null
             ? null
             : AppBar(
+                backgroundColor: barBackgroundColor,
                 title: titleWidget ?? _title(context),
                 actions: actions,
                 leading: leading,
                 automaticallyImplyLeading: automaticallyImplyLeading,
               ),
-        body: body,
+        body: body ??
+            Builder(
+              builder: (context) =>
+                  bodyBuilder?.call(context) ?? const SizedBox(),
+            ),
+        backgroundColor: backgroundColor,
         floatingActionButton: floatingActionButton,
         resizeToAvoidBottomInset: resizeToAvoidBottomInset,
       );
@@ -92,3 +110,46 @@ class AppPage extends StatelessWidget {
         overflow: TextOverflow.ellipsis,
       );
 }
+
+class AdaptiveAppBar extends StatelessWidget {
+  final String text;
+  final Widget? leading;
+  final List<Widget>? actions;
+  final bool iosTransitionBetweenRoutes;
+  final bool automaticallyImplyLeading;
+
+  const AdaptiveAppBar(
+      {super.key,
+      required this.text,
+      this.leading,
+      this.actions,
+      this.iosTransitionBetweenRoutes = true,
+      this.automaticallyImplyLeading = true});
+
+  @override
+  Widget build(BuildContext context) {
+    return Platform.isIOS || Platform.isMacOS
+        ? CupertinoNavigationBar(
+            transitionBetweenRoutes: iosTransitionBetweenRoutes,
+            middle: Text(text),
+            previousPageTitle:
+                MaterialLocalizations.of(context).backButtonTooltip,
+            automaticallyImplyLeading: automaticallyImplyLeading,
+            leading: leading,
+            trailing: actions == null
+                ? null
+                : actions!.length == 1
+                    ? actions!.first
+                    : Row(
+                        mainAxisSize: MainAxisSize.min,
+                        children: actions!,
+                      ),
+          )
+        : AppBar(
+            leading: leading,
+            actions: actions,
+            automaticallyImplyLeading: automaticallyImplyLeading,
+            title: Text(text),
+          );
+  }
+}

app/lib/domain/extensions/app_error_extensions.dart

@@ -13,6 +13,8 @@ extension AppErrorExtensions on Object {
           return context.l10n.something_went_wrong_error;
         case AppErrorL10nCodes.googleSignInUserNotFoundError:
           return context.l10n.user_google_sign_in_account_not_found_error;
+        case AppErrorL10nCodes.backUpFolderNotFound:
+          return context.l10n.back_up_folder_not_found_error;
         default:
           return (this as AppError).message ??
               context.l10n.something_went_wrong_error;

app/lib/domain/extensions/map_extensions.dart

@@ -0,0 +1,4 @@
+extension MapExtension<K, E> on Map<K, List<E>> {
+  List<E> valuesWhere(bool Function(E element) test) =>
+      values.expand((element) => element.where(test)).toList();
+}

app/lib/domain/formatter/date_formatter.dart

@@ -0,0 +1,54 @@
+import 'package:cloud_gallery/domain/extensions/context_extensions.dart';
+import 'package:flutter/cupertino.dart';
+import 'package:intl/intl.dart';
+
+enum DateFormatType {
+  dayMonthYear("d MMMM, y"),
+  dayMonthYearShort("d MMM, y"),
+  monthYear("MMMM y"),
+  monthYearShort("MMM y"),
+  dayMonth("d MMMM"),
+  dayMonthShort("d MMM"),
+  year("y"),
+  month("MMMM"),
+  monthShort("MMM"),
+  week("EEEE"),
+  time("HH:mm:ss a"),
+  timeShort("HH:mm a"),
+  relative("relative");
+
+  final String formatPattern;
+
+  const DateFormatType(this.formatPattern);
+
+  bool get isRelative => this == DateFormatType.relative;
+}
+
+extension DateFormatter on DateTime {
+  DateTime get dateOnly => DateTime(year, month, day);
+
+  String format(BuildContext context, DateFormatType type) {
+    if (isUtc) return toLocal().format(context, type);
+    if (type.isRelative) return relativeFormat(context);
+    return DateFormat(type.formatPattern).format(this);
+  }
+
+  String relativeFormat(BuildContext context) {
+    if (isUtc) return toLocal().relativeFormat(context);
+    final now = DateTime.now().toLocal();
+    final diff = now.difference(this);
+    if (diff.inDays == 0) {
+      return context.l10n.common_today;
+    } else if (diff.inDays == 1) {
+      return context.l10n.common_yesterday;
+    } else if (diff.inDays == -1) {
+      return context.l10n.common_tomorrow;
+    } else if (diff.inDays < 7) {
+      return DateFormat(DateFormatType.week.formatPattern).format(this);
+    } else if (now.year == year) {
+      return DateFormat(DateFormatType.dayMonth.formatPattern).format(this);
+    } else {
+      return DateFormat(DateFormatType.dayMonthYear.formatPattern).format(this);
+    }
+  }
+}

app/lib/domain/formatter/duration_formatter.dart

@@ -0,0 +1,18 @@
+extension DurationFormatter on Duration {
+  String get format {
+    String twoDigits(int n) {
+      if (n >= 10) return "$n";
+      return "0$n";
+    }
+
+    String twoDigitHours = twoDigits(inHours.remainder(24));
+    String twoDigitMinutes = twoDigits(inMinutes.remainder(60));
+    String twoDigitSeconds = twoDigits(inSeconds.remainder(60));
+
+    if (inHours > 0) {
+      return "$twoDigitHours:$twoDigitMinutes:$twoDigitSeconds";
+    } else {
+      return "$twoDigitMinutes:$twoDigitSeconds";
+    }
+  }
+}

app/lib/ui/flow/accounts/accounts_screen.dart

@@ -39,56 +39,58 @@ class _AccountsScreenState extends ConsumerState<AccountsScreen> {
 
     return AppPage(
       title: context.l10n.common_accounts,
-      body: ListView(
-        padding: const EdgeInsets.all(16),
-        children: [
-          if (googleAccount != null)
-            AccountsTab(
-              name: googleAccount.displayName ?? googleAccount.email,
-              serviceDescription: context.l10n.common_google_drive,
-              profileImage: googleAccount.photoUrl,
-              actionList: ActionList(buttons: [
-                ActionListButton(
-                  title: context.l10n.common_auto_back_up,
-                  trailing: Consumer(
-                    builder: (context, ref, child) {
-                      final googleDriveAutoBackUp = ref
-                          .watch(AppPreferences.canTakeAutoBackUpInGoogleDrive);
-                      return AppSwitch(
-                        value: googleDriveAutoBackUp,
-                        onChanged: (bool value) {
-                          ref
-                              .read(AppPreferences
-                                  .canTakeAutoBackUpInGoogleDrive.notifier)
-                              .state = value;
-                        },
-                      );
-                    },
+      bodyBuilder: (context) {
+        return ListView(
+          padding: context.systemPadding + const EdgeInsets.all(16),
+          children: [
+            if (googleAccount != null)
+              AccountsTab(
+                name: googleAccount.displayName ?? googleAccount.email,
+                serviceDescription: context.l10n.common_google_drive,
+                profileImage: googleAccount.photoUrl,
+                actionList: ActionList(buttons: [
+                  ActionListButton(
+                    title: context.l10n.common_auto_back_up,
+                    trailing: Consumer(
+                      builder: (context, ref, child) {
+                        final googleDriveAutoBackUp = ref.watch(
+                            AppPreferences.canTakeAutoBackUpInGoogleDrive);
+                        return AppSwitch(
+                          value: googleDriveAutoBackUp,
+                          onChanged: (bool value) {
+                            ref
+                                .read(AppPreferences
+                                    .canTakeAutoBackUpInGoogleDrive.notifier)
+                                .state = value;
+                          },
+                        );
+                      },
+                    ),
                   ),
+                  ActionListButton(
+                    title: context.l10n.common_sign_out,
+                    onPressed: notifier.signOutWithGoogle,
+                  ),
+                ]),
+                backgroundColor: AppColors.googleDriveColor.withAlpha(50),
+              ),
+            if (googleAccount == null)
+              OnTapScale(
+                onTap: () {
+                  notifier.signInWithGoogle();
+                },
+                child: AccountsTab(
+                  name: context.l10n.add_account_title,
+                  backgroundColor: context.colorScheme.containerNormal,
                 ),
-                ActionListButton(
-                  title: context.l10n.common_sign_out,
-                  onPressed: notifier.signOutWithGoogle,
-                ),
-              ]),
-              backgroundColor: AppColors.googleDriveColor.withAlpha(50),
-            ),
-          if (googleAccount == null)
-            OnTapScale(
-              onTap: () {
-                notifier.signInWithGoogle();
-              },
-              child: AccountsTab(
-                name: context.l10n.add_account_title,
-                backgroundColor: context.colorScheme.containerNormal,
               ),
-            ),
-          const SizedBox(height: 16),
-          const SettingsActionList(),
-          const SizedBox(height: 16),
-          _buildVersion(context: context),
-        ],
-      ),
+            const SizedBox(height: 16),
+            const SettingsActionList(),
+            const SizedBox(height: 16),
+            _buildVersion(context: context),
+          ],
+        );
+      },
     );
   }