Preview

app/assets/locales/app_en.arb

@@ -18,7 +18,9 @@
   "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!",
+
+  "unable_to_load_media_error": "Unable to load media!",
+  "unable_to_load_media_message": "Oops! It looks like we're having trouble loading the media right now. Please try again later.",
 
   "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/action_sheet.dart

@@ -22,7 +22,7 @@ class AppSheetAction extends StatelessWidget {
     return OnTapScale(
       onTap: onPressed,
       child: SizedBox(
-        height: 45,
+        height: 50,
         width: double.infinity,
         child: Row(
           children: [

app/lib/components/app_dialog.dart

@@ -0,0 +1,83 @@
+import 'dart:io';
+import 'package:flutter/cupertino.dart';
+import 'package:flutter/material.dart';
+import 'package:style/extensions/context_extensions.dart';
+import 'package:style/text/app_text_style.dart';
+
+class AppAlertAction {
+  final String title;
+  final bool isDestructiveAction;
+  final VoidCallback onPressed;
+
+  const AppAlertAction({
+    required this.title,
+    this.isDestructiveAction = false,
+    required this.onPressed,
+  });
+}
+
+Future<T?> showAppAlertDialog<T>({
+  required BuildContext context,
+  required String title,
+  required String message,
+  required List<AppAlertAction> actions,
+}) {
+  return showAdaptiveDialog<T>(
+    context: context,
+    builder: (context) {
+      if (Platform.isIOS || Platform.isMacOS) {
+        return CupertinoAlertDialog(
+          title: Text(title,
+              style: AppTextStyles.body
+                  .copyWith(color: context.colorScheme.textPrimary)),
+          content: Text(
+            message,
+            style: AppTextStyles.caption
+                .copyWith(color: context.colorScheme.textSecondary),
+          ),
+          actions: [
+            for (final action in actions)
+              CupertinoDialogAction(
+                onPressed: action.onPressed,
+                child: Text(
+                  action.title,
+                  style: AppTextStyles.button.copyWith(
+                      color: action.isDestructiveAction
+                          ? context.colorScheme.alert
+                          : context.colorScheme.textPrimary),
+                ),
+              ),
+          ],
+        );
+      }
+
+      return AlertDialog(
+        backgroundColor: context.colorScheme.containerNormalOnSurface,
+        shape: RoundedRectangleBorder(
+          borderRadius: BorderRadius.circular(22),
+        ),
+        title: Text(title,
+            style: AppTextStyles.body
+                .copyWith(color: context.colorScheme.textPrimary)),
+        content: Text(
+          message,
+          style: AppTextStyles.caption
+              .copyWith(color: context.colorScheme.textSecondary),
+        ),
+        actions: [
+          for (final action in actions)
+            TextButton(
+              onPressed: action.onPressed,
+              child: Text(
+                action.title,
+                style: AppTextStyles.button.copyWith(
+                    color: action.isDestructiveAction
+                        ? context.colorScheme.alert
+                        : context.colorScheme.textPrimary),
+              ),
+            ),
+        ],
+      );
+    },
+  );
+}

app/lib/components/app_page.dart

@@ -1,6 +1,7 @@
 import 'dart:io';
 import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
+import 'package:style/extensions/context_extensions.dart';
 
 class AppPage extends StatelessWidget {
   final String? title;
@@ -145,11 +146,16 @@ class AdaptiveAppBar extends StatelessWidget {
                         children: actions!,
                       ),
           )
-        : AppBar(
-            leading: leading,
-            actions: actions,
-            automaticallyImplyLeading: automaticallyImplyLeading,
-            title: Text(text),
-          );
+        : Column(
+          children: [
+            AppBar(
+                backgroundColor: context.colorScheme.barColor,
+                leading: leading,
+                actions: actions,
+                automaticallyImplyLeading: automaticallyImplyLeading,
+                title: Text(text),
+              ),
+          ],
+        );
   }
 }

app/lib/components/error_view.dart

@@ -0,0 +1,70 @@
+import 'package:flutter/cupertino.dart';
+import 'package:style/buttons/primary_button.dart';
+import 'package:style/extensions/context_extensions.dart';
+import 'package:style/text/app_text_style.dart';
+
+class ErrorViewAction {
+  final String title;
+  final VoidCallback onPressed;
+
+  const ErrorViewAction({required this.title, required this.onPressed});
+}
+
+class ErrorView extends StatelessWidget {
+  final Widget? icon;
+  final String title;
+  final String message;
+  final Color? foregroundColor;
+  final ErrorViewAction? action;
+
+  const ErrorView({
+    super.key,
+    this.icon,
+    required this.title,
+    this.foregroundColor,
+    this.message = '',
+    this.action,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return SafeArea(
+      child: Padding(
+        padding: const EdgeInsets.all(30),
+        child: Column(
+          mainAxisAlignment: MainAxisAlignment.center,
+          crossAxisAlignment: CrossAxisAlignment.center,
+          children: [
+            const SizedBox(width: double.infinity),
+            icon ??
+                Icon(
+                  CupertinoIcons.exclamationmark_circle,
+                  color: context.colorScheme.containerHighOnSurface,
+                  size: 100,
+                ),
+            const SizedBox(height: 20),
+            Text(title,
+                style: AppTextStyles.subtitle2.copyWith(
+                  color: foregroundColor?? context.colorScheme.textPrimary,
+                )),
+            const SizedBox(height: 20),
+            Text(
+              message,
+              style: AppTextStyles.body2.copyWith(
+                color: foregroundColor ??context.colorScheme.textSecondary,
+              ),
+              textAlign: TextAlign.center,
+            ),
+            if (action != null) ...[
+              const SizedBox(height: 20),
+              PrimaryButton(
+                onPressed: action!.onPressed,
+                child: Text(action!.title, style: AppTextStyles.button,),
+              ),
+            ],
+          ],
+        ),
+      ),
+    );
+  }
+}

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

@@ -13,6 +13,7 @@ import 'package:style/text/app_text_style.dart';
 import 'package:style/theme/colors.dart';
 import 'package:style/buttons/buttons_list.dart';
 import 'package:style/buttons/switch.dart';
+import '../../../components/snack_bar.dart';
 import 'components/account_tab.dart';
 
 class AccountsScreen extends ConsumerStatefulWidget {
@@ -32,11 +33,20 @@ class _AccountsScreenState extends ConsumerState<AccountsScreen> {
     runPostFrame(() => notifier.init());
   }
 
+  void _errorObserver() {
+    ref.listen(accountsStateNotifierProvider.select((value) => value.error),
+        (previous, next) {
+      if (next != null) {
+        showErrorSnackBar(context: context, error: next);
+      }
+    });
+  }
+
   @override
   Widget build(BuildContext context) {
+    _errorObserver();
     final googleAccount = ref.watch(
         accountsStateNotifierProvider.select((value) => value.googleAccount));
-
     return AppPage(
       title: context.l10n.common_accounts,
       bodyBuilder: (context) {

app/lib/ui/flow/home/components/app_media_item.dart

@@ -1,5 +1,4 @@
 import 'dart:async';
-import 'dart:typed_data';
 import 'package:cached_network_image/cached_network_image.dart';
 import 'package:cloud_gallery/domain/formatter/duration_formatter.dart';
 import 'package:data/models/media/media.dart';
@@ -17,7 +16,7 @@ class AppMediaItem extends StatefulWidget {
   final void Function()? onTap;
   final void Function()? onLongTap;
   final bool isSelected;
-  final UploadStatus? status;
+  final AppMediaProcessStatus? status;
 
   const AppMediaItem({
     super.key,
@@ -171,14 +170,14 @@ class _AppMediaItemState extends State<AppMediaItem>
               ],
             ),
           ),
-        if (widget.status == UploadStatus.uploading)
+        if (widget.status?.isProcessing ?? false)
           _BackgroundContainer(
             child: AppCircularProgressIndicator(
               size: 16,
               color: context.colorScheme.surfaceInverse,
             ),
           ),
-        if (widget.status == UploadStatus.waiting)
+        if (widget.status?.isWaiting ?? false)
           _BackgroundContainer(
             child: Icon(
               CupertinoIcons.time,